Menu
Hello All,
I currently have this page
What I am trying to do is have a guest choose yes or no, if they choose no, and click submit. I will get The answer no with their name to my email.
If they choose Yes, then I want a dropdown box to appear with numbers 1 though 10. If they choose 1, then a input box shows up so they can put the name of the guest. If they choose 2 then 2 input boxes show up, so on and so forth.
All fields should be required if they choose yes.
The submit should send me the results to my email…
Let me know your guys thoughts.
Thank you very much.
<!DOCTYPE html>
<html lang="de">
<head>
<title>Dynamic form</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
#dynselect {
display: none;
}
#dyn2 label {
display: none;
}
</style>
</head>
<body>
<input type="radio" name="choice-animals" id="choice-animals-dogs" value="yes" required>
<label for="choice-animals-dogs">Yes, I would love to.</label>
<input type="radio" name="choice-animals" id="choice-animals-cats" value="no">
<label for="choice-animals-cats">No, Sorry I can't make it.</label>
<select id="dynselect">
<option value="">Please make your choice</option>
<option value="dyninput1">Opt 1</option>
<option value="dyninput2">Opt 2</option>
<option value="dyninput3">Opt 3</option>
</select>
<div id="dyn2">
<label for="dyninput1">
<input id="dyninput1" name="dyninput1" disabled>
Label for input 1
</label>
<label for="dyninput2">
<input id="dyninput2" name="dyninput2" disabled>
Label for input 2
</label>
<label for="dyninput3">
<input id="dyninput3" name="dyninput3" disabled>
Label for input 3
</label>
</div>
<script>
document.getElementById("choice-animals-dogs").addEventListener("click", function () {
document.getElementById("dynselect").style.display = "block";
// todo: set required for this select
});
<i> </i> // todo: hide select and remove required when "no" is clicked
<i> </i> document.getElementById("dynselect").addEventListener("change", function () {
<i> </i> var oldinput = document.querySelector("#dyn2 input[required]");
<i> </i> if (oldinput) {
<i> </i> oldinput.parentNode.style.display = "none";
<i> </i> oldinput.removeAttribute("required");
<i> </i> oldinput.setAttribute("disabled", true);
<i> </i> }
<i> </i> var vinput = document.getElementById(this.value);
<i> </i> vinput.parentNode.style.display = "block";
<i> </i> vinput.removeAttribute("disabled");
<i> </i> vinput.setAttribute("required", true);
<i> </i> });
<i> </i></script>
</body>
</html>how do i make it so when opt 2 is clicked, then 2 options show up, and then if opt 3 is selected three text fields show up[/quote]This can be done easily by using classes for making the elements visible and set the appropriate attributes:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Dynamic form</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
#dynselect {
display: none;
}
#dyn2 label {
display: none;
}
</style>
</head>
<body>
<input type="radio" name="choice-animals" id="choice-animals-dogs" value="yes" required>
<label for="choice-animals-dogs">Yes, I would love to.</label>
<input type="radio" name="choice-animals" id="choice-animals-cats" value="no">
<label for="choice-animals-cats">No, Sorry I can't make it.</label>
<select id="dynselect">
<option value="">Please make your choice</option>
<option value="foropt1">Opt 1</option>
<option value="foropt2">Opt 2</option>
<option value="foropt3">Opt 3</option>
</select>
<div id="dyn2">
<label for="dyninput1">
<input class="foropt1 foropt2 foropt3" name="dyninput1" disabled>
Label for input 1
</label>
<label for="dyninput2">
<input class="foropt2 foropt3" name="dyninput2" disabled>
Label for input 2
</label>
<label for="dyninput3">
<input class="foropt3" name="dyninput3" disabled>
Label for input 3
</label>
</div>
<script>
function setParams(sel, display, disabled, required) {
var inputs = document.querySelectorAll(sel);
for (var i = 0; i < inputs.length; i++) {
var cinput = inputs[i];
cinput.parentNode.style.display = display;
cinput.removeAttribute(required);
cinput.setAttribute("disabled", disabled);
<i> </i> }
<i> </i> }
<i> </i> document.getElementById("choice-animals-dogs").addEventListener("click", function () {
<i> </i> document.getElementById("dynselect").style.display = "block";
<i> </i> // todo: set required for this select
<i> </i> });
<i> </i> // todo: hide select and remove required when "no" is clicked
<i> </i> document.getElementById("dynselect").addEventListener("change", function () {
<i> </i> setParams("#dyn2 input", "none", true, false);
<i> </i> setParams("#dyn2 input." + this.value, "block", false, true);
<i> </i> });
<i> </i></script>
</body>
</html>if you chose NO, then they disappear, also the submit btn is gone[/quote]I left this to do for you. Have a look at my code, specifically the event listener for the first radio button and try to adapt it to the second one (no).
</label>
<label for="dyninput2">
Name of 2nd Person: <input class="foropt2 foropt3 foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput2" enabled>
</label>
<label for="dyninput3">
Name of 3rd Person:<input class="foropt3 foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput3" enabled>
</label> </label> </label> </label> </label> </label> </label> </label>
</div>
<script>
function setParams(sel, display, disabled, required) {
var inputs = document.querySelectorAll(sel);
for (var i = 0; i < inputs.length; i++) {
var cinput = inputs[i];
cinput.parentNode.style.display = display;
cinput.removeAttribute(required);
cinput.setAttribute("disabled", disabled);
}
}
document.getElementById("choice-animals-dogs").addEventListener("click", function () {
document.getElementById("dynselect").style.display = "block";
// todo: set required for this select
});
// todo: hide select and remove required when "no" is clicked
document.getElementById("dynselect").addEventListener("change", function () {
setParams("#dyn2 input", "none", true, false);
setParams("#dyn2 input." + this.value, "block", false, true);
}); <script>
document.getElementById("choice-animals-dogs").addEventListener("click", function () {
document.getElementById("dynselect").style.display = "block";
// todo: set required for this select
});
<i> </i> // todo: hide select and remove required when "no" is clicked
<i> </i> document.getElementById("dynselect").addEventListener("change", function () {
<i> </i> // create a list of all inputs
<i> </i> var inputs = document.querySelectorAll("#dyn2 input");
<i> </i> // loop through these inputs
<i> </i> for (var i = 0; i < inputs.length; i++) {
<i> </i> // provide current input
<i> </i> var cinput = inputs[i];
<i> </i> // check if this input has class according
<i> </i> // value of the selected option
<i> </i> if (cinput.classList.contains(this.value)) {
<i> </i> // input should be enabled and visible
<i> </i> cinput.parentNode.style.display = "block";
<i> </i> cinput.setAttribute("required", true);
<i> </i> cinput.removeAttribute("disabled");
<i> </i> } else {
<i> </i> // input should be disabled and invisible
<i> </i> cinput.parentNode.style.display = "none";
<i> </i> cinput.removeAttribute("required");
<i> </i> cinput.setAttribute("disabled", true);
<i> </i> }
<i> </i> }
<i> </i> });
<i> </i></script>
<i>
</i><!DOCTYPE html>
<html lang="de">
<head>
<title>Dynamic form</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
#dynselect {
display: none;
}
#dyn2 label {
display: none;
}
</style>
</head>
<body>
<input type="radio" name="choice-animals" id="choice-animals-dogs" value="yes" required>
<label for="choice-animals-dogs">Yes, I would love to.</label>
<input type="radio" name="choice-animals" id="choice-animals-cats" value="no">
<label for="choice-animals-cats">No, Sorry I can't make it.</label>
<select id="dynselect">
<option value="">How Many People Will Be Attending?</option>
<option value="foropt1">1 Person:</option>
<option value="foropt2">2 People:</option>
<option value="foropt3">3 People:</option>
<option value="foropt4">4 People:</option>
<option value="foropt5">5 People:</option>
<option value="foropt6">6 People:</option>
<option value="foropt7">7 People:</option>
<option value="foropt8">8 People:</option>
<option value="foropt9">9 People:</option>
<option value="foropt10">10 People:</option>
</select>
<div id="dyn2">
<label for="dyninput1">
Name of 1st Person:<input class="foropt1 foropt2 foropt3 foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput1" enabled>
<br/>
<i> </i> </label>
<i> </i> <label for="dyninput2">
<i> </i> Name of 2nd Person: <input class="foropt2 foropt3 foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput2" enabled>
<i> </i>
<i> </i> </label>
<i> </i> <label for="dyninput3">
<i> </i> Name of 3rd Person:<input class="foropt3 foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput3" enabled>
<i> </i>
<i> </i> </label>
<label for="dyninput4">
Name of 4th Person: <input class="foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput4" enabled>
<br/>
<i> </i> </label>
<label for="dyninput5">
Name of 5th Person: <input class="foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput5" enabled>
<br/>
<i> </i> </label>
<label for="dyninput6">
Name of 6th Person: <input class="foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput6" enabled>
<br/>
<i> </i> </label>
<label for="dyninput7">
Name of 7th Person: <input class="foropt7 foropt8 foropt9 foropt10" name="dyninput7" enabled>
<br/>
<i> </i> </label>
<label for="dyninput8">
Name of 8th Person: <input class="foropt8 foropt9 foropt10" name="dyninput8" enabled>
<br/>
<i> </i> </label>
<label for="dyninput9">
Name of 9th Person: <input class="foropt9 foropt10" name="dyninput9" enabled>
<br/>
<i> </i> </label>
<label for="dyninput10">
Name of 10th Person: <input class="foropt10" name="dyninput10" enabled>
<br/>
<i> </i> </label>
<i> </i></div>
<script>
document.getElementById("choice-animals-dogs").addEventListener("click", function () {
document.getElementById("dynselect").style.display = "block";
// todo: set required for this select
});
<i> </i>// todo: hide select and remove required when "no" is clicked
<i> </i>document.getElementById("dynselect").addEventListener("change", function () {
<i> </i> // create a list of all inputs
<i> </i> var inputs = document.querySelectorAll("#dyn2 input");
<i> </i> // loop through these inputs
<i> </i> for (var i = 0; i < inputs.length; i++) {
<i> </i> // provide current input
<i> </i> var cinput = inputs[i];
<i> </i> // check if this input has class according
<i> </i> // value of the selected option
<i> </i> if (cinput.classList.contains(this.value)) {
<i> </i> // input should be enabled and visible
<i> </i> cinput.parentNode.style.display = "block";
<i> </i> cinput.setAttribute("required", true);
<i> </i> cinput.removeAttribute("disabled");
<i> </i> } else {
<i> </i> // input should be disabled and invisible
<i> </i> cinput.parentNode.style.display = "none";
<i> </i> cinput.removeAttribute("required");
<i> </i> cinput.setAttribute("disabled", true);
<i> </i> }
<i> </i> }
<i> </i>});
</script>
</body>
</html> <!DOCTYPE html>
<html lang="de">
<head>
<title>Dynamic form</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
#dynselect {
display: none;
}
#dyn2 label {
display: none;
}
</style>
</head>
<body>
<form action="testpost.php" method="post">
<input type="radio" name="choice-animals" id="choice-animals-dogs" value="yes" required>
<label for="choice-animals-dogs">Yes, I would love to.</label>
<input type="radio" name="choice-animals" id="choice-animals-cats" value="no">
<label for="choice-animals-cats">No, Sorry I can't make it.</label>
<select id="dynselect">
<option value="">How Many People Will Be Attending?</option>
<option value="foropt1">1 Person:</option>
<option value="foropt2">2 People:</option>
<option value="foropt3">3 People:</option>
<option value="foropt4">4 People:</option>
<option value="foropt5">5 People:</option>
<option value="foropt6">6 People:</option>
<option value="foropt7">7 People:</option>
<option value="foropt8">8 People:</option>
<option value="foropt9">9 People:</option>
<option value="foropt10">10 People:</option>
</select>
<div id="dyn2">
<label for="dyninput1">
Name of 1st Person:<input class="foropt1 foropt2 foropt3 foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10"
name="dyninput1" enabled>
<i> </i> </label>
<i> </i> <label for="dyninput2">
<i> </i> Name of 2nd Person: <input class="foropt2 foropt3 foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10"
<i> </i> name="dyninput2" enabled>
<i> </i> </label>
<i> </i> <label for="dyninput3">
<i> </i> Name of 3rd Person:<input class="foropt3 foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput3"
<i> </i> enabled>
<i> </i> </label>
<i> </i> <label for="dyninput4">
<i> </i> Name of 4th Person: <input class="foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput4"
<i> </i> enabled>
<i> </i> </label>
<i> </i> <label for="dyninput5">
<i> </i> Name of 5th Person: <input class="foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput5"
<i> </i> enabled>
<i> </i> </label>
<i> </i> <label for="dyninput6">
<i> </i> Name of 6th Person: <input class="foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput6" enabled>
<i> </i> </label>
<i> </i> <label for="dyninput7">
<i> </i> Name of 7th Person: <input class="foropt7 foropt8 foropt9 foropt10" name="dyninput7" enabled>
<i> </i> </label>
<i> </i> <label for="dyninput8">
<i> </i> Name of 8th Person: <input class="foropt8 foropt9 foropt10" name="dyninput8" enabled>
<i> </i> </label>
<i> </i> <label for="dyninput9">
<i> </i> Name of 9th Person: <input class="foropt9 foropt10" name="dyninput9" enabled>
<i> </i> </label>
<i> </i> <label for="dyninput10">
<i> </i> Name of 10th Person: <input class="foropt10" name="dyninput10" enabled>
<i> </i> </label>
<i> </i> </div>
<i> </i> <input type="submit">
<i> </i></form>
<i> </i><script>
<i> </i> document.getElementById("choice-animals-dogs").addEventListener("click", function () {
<i> </i> sel = document.getElementById("dynselect");
<i> </i> sel.style.display = "block";
<i> </i> sel.selectedIndex = 0;
<i> </i> });
<i> </i> document.getElementById("choice-animals-cats").addEventListener("click", function () {
<i> </i> document.getElementById("dynselect").style.display = "none";
<i> </i> // create a list of all inputs
<i> </i> var inputs = document.querySelectorAll("#dyn2 input");
<i> </i> for (var i = 0; i < inputs.length; i++) {
<i> </i> // provide current input
<i> </i> var cinput = inputs[i];
<i> </i> // input should be disabled and invisible
<i> </i> cinput.parentNode.style.display = "none";
<i> </i> cinput.removeAttribute("required");
<i> </i> cinput.setAttribute("disabled", true);
<i> </i> }
<i> </i> });
<i> </i> document.getElementById("dynselect").addEventListener("change", function () {
<i> </i> // create a list of all inputs
<i> </i> var inputs = document.querySelectorAll("#dyn2 input");
<i> </i> // loop through these inputs
<i> </i> for (var i = 0; i < inputs.length; i++) {
<i> </i> // provide current input
<i> </i> var cinput = inputs[i];
<i> </i> // check if this input has class according
<i> </i> // value of the selected option
<i> </i> if (cinput.classList.contains(this.value)) {
<i> </i> // input should be enabled and visible
<i> </i> cinput.parentNode.style.display = "block";
<i> </i> cinput.setAttribute("required", true);
<i> </i> cinput.removeAttribute("disabled");
<i> </i> } else {
<i> </i> // input should be disabled and invisible
<i> </i> cinput.parentNode.style.display = "none";
<i> </i> cinput.removeAttribute("required");
<i> </i> cinput.setAttribute("disabled", true);
<i> </i> }
<i> </i> }
<i> </i> });
<i> </i></script>
</body>
</html>location.roload( true ); // reload from the server
location.roload( false ); // reload from the cache <style>
#dynselect {
display: none;
}
#dyn2 label {
display: none;
}
</style><?php
// add PHP Mailer
use PHPMailerPHPMailerPHPMailer;
require_once 'phpmailer/src/Exception.php';
require_once 'phpmailer/src/PHPMailer.php';
const HTML_ERROR_START = '<div class="alert alert-danger" role="alert"><p class="m-0">';
const HTML_ERROR_END = '</p></div>';
const HTML_SUCCESS_START = '<div class="alert alert-success" role="alert"><p class="m-0">';
const HTML_SUCCESS_END = '</p></div>';
$receiver = '[email protected]';
$emailfrom = '[email protected]';
$namefrom = 'Contact Form';
/**
* 1. Check if form was submitted.
*/
if (isset($_POST['submit'])) {
/**
* 2. Filter data
* - We use the function htmlspecialchars()
* - The function trim() is used to remove all empty spaces from start and end of the string
*/
$choice = htmlspecialchars(trim($_POST['choice-animals']));
$persons = [];
for ($i = 1; isset($_POST['dyninput' . $i]); $i++) {
$persons[] = htmlspecialchars(trim($_POST['dyninput' . $i]));
}
<i> </i>$errors = [];
<i> </i>$success = false;
<i> </i>$nr = 1;
<i> </i>foreach ($persons as $cperson) {
<i> </i> if (empty($cperson)) {
<i> </i> $errors[] = HTML_ERROR_START . 'Please enter a name for person no. ' . $nr . ' !' . HTML_ERROR_END;
<i> </i> $nr++;
<i> </i> }
<i> </i>}
<i> </i>// for testing only
<i> </i>if (empty($receiver)) {
<i> </i> $errors[] = HTML_ERROR_START . 'Please enter the email address of the receiver!' . HTML_ERROR_END;
<i> </i>}
<i> </i>/**
<i> </i> * 4. Check if there were errors, if not send email
<i> </i> * - for sending email we use PHPMailer
<i> </i> */
<i> </i>if (count($errors) === 0) {
<i> </i> $mailer = new PHPMailer();
<i> </i> $mailer->CharSet = 'UTF-8'; // Set charset setzen for correct display of special characters
<i> </i> $mailer->setFrom($emailfrom, $namefrom); // Set email address and name of sender
<i> </i> $mailer->addAddress($receiver); // Empfängeradresse
<i> </i> $mailer->isHTML(true);
<i> </i> $mailer->Subject = 'New message'; // Subject
<i> </i> $mailer->Body = '<h3>New message</h3>
<i> </i> <h3>Choice was: ' . $choice . '</h3>
<i> </i> <h2>Persons:</h2>';
<i> </i> foreach ($persons as $cperson) {
<i> </i> $mailer->Body .= $cperson . '<br>';
<i> </i> }
<i> </i> /**
<i> </i> * Check if email was sent successfully
<i> </i> * if so: Report success
<i> </i> * if not: Report error(s)
<i> </i> */
<i> </i> if (!$mailer->send()) {
<i> </i> $errors[] = HTML_ERROR_START . 'An errror occured. Please try again in some minutes!' . HTML_ERROR_END;
<i> </i> } else {
<i> </i> $success = HTML_SUCCESS_START . 'Your Message was sent successfully!' . HTML_SUCCESS_END;
<i> </i> }
<i> </i>}
}<?php
ini_set('display_errors', '1');
error_reporting(E_ALL);
require_once 'datacheck.php';
?> <?php
if (!empty($errors) && count($errors) > 0 && !$success) {
echo implode('', $errors);
} else if (!empty($success) && count($errors) === 0) {
echo $success;
}
?><!DOCTYPE html>
<html lang="en">
<head>
<title>Rahman | Khaliq | RSVP</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script src="js/jquery-1.6.js" ></script>
<script src="js/cufon-yui.js"></script>
<script src="js/cufon-replace.js"></script>
<script src="js/Josefin_Sans_400.font.js"></script>
<script src="js/Tangerine_700.font.js"></script>
<script src="js/atooltip.jquery.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/script.js"></script>
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<style type="text/css">.aToolTip, .box1, .box1 .inner, .button, .button strong{behavior:url("js/PIE.htc");}</style>
<![endif]-->
</head>
<body id="page6">
<div class="body1">
<div class="main">
<!-- header -->
<header>
<div class="wrapper">
<h1><a href="index.html" id="logo"></a></h1>
<nav>
<ul id="menu">
<li><a href="guest.html">Venue/Accommodations</a></li>
<li><a href="guestbook.html">Guestbook</a></li>
<li class="first" id="menu_active"><a href="contacts.html">RSVP</a></li>
</ul>
</nav>
</div>
</header>
<!-- / header -->
</div>
</div>
<div class="body3">
<div class="main">
<i> </i><!-- content -->
<i> </i><article id="content">
<i> </i> <div class="wrapper">
<i> </i> <div class="pad">
<i> </i> <div class="wrapper">
<i> </i> <section class="col1">
<i> </i> <h2>RSVP <span>Form</span></h2>
<i> </i> <body>
<i> </i>Please fill this section out regardless if you are attending or not. Enter your Party's Name, choose # of people attending and input their names<b> (please list children as well)</b>.
<i> </i><form action="testpost.php" method="post">
Family Name:<input class="firstname"
name="dyninput1" enabled required> <br>
<input type="radio" name="choice-animals" id="choice-animals-dogs" value="yes" required>
<label for="choice-animals-dogs">Yes, I would love to.</label>
<input type="radio" name="choice-animals" id="choice-animals-cats" value="no">
<label for="choice-animals-cats">No, Sorry I can't make it.</label>
<select id="dynselect">
<option value="">How Many People Will Be Attending?</option>
<option value="foropt1">1 Person:</option>
<option value="foropt2">2 People:</option>
<option value="foropt3">3 People:</option>
<option value="foropt4">4 People:</option>
<option value="foropt5">5 People:</option>
<option value="foropt6">6 People:</option>
<option value="foropt7">7 People:</option>
<option value="foropt8">8 People:</option>
<option value="foropt9">9 People:</option>
<option value="foropt10">10 People:</option>
</select>
<div id="dyn2">
<label for="dyninput1">
<input class="foropt1 foropt2 foropt3 foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10"
name="dyninput1" enabled placeholder="Name of 1st Person">
<i> </i> </label>
<i> </i> <label for="dyninput2">
<i> </i> <input class="foropt2 foropt3 foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10"
<i> </i> name="dyninput2" enabled placeholder="Name of 2nd Person">
<i> </i> </label>
<i> </i> <label for="dyninput3">
<i> </i> <input class="foropt3 foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput3"
<i> </i> enabled placeholder="Name of 3rd Person">
<i> </i> </label>
<i> </i> <label for="dyninput4">
<i> </i> <input class="foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput4"
<i> </i> enabled placeholder="Name of 4th Person">
<i> </i> </label>
<i> </i> <label for="dyninput5">
<i> </i> <input class="foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput5"
<i> </i> enabled placeholder="Name of 5th Person">
<i> </i> </label>
<i> </i> <label for="dyninput6">
<i> </i> <input class="foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput6" enabled placeholder="Name of 6th Person">
<i> </i> </label>
<i> </i> <label for="dyninput7">
<i> </i> <input class="foropt7 foropt8 foropt9 foropt10" name="dyninput7" enabled placeholder="Name of 7th Person">
<i> </i> </label>
<i> </i> <label for="dyninput8">
<i> </i> <input class="foropt8 foropt9 foropt10" name="dyninput8" enabled placeholder="Name of 8th Person">
<i> </i> </label>
<i> </i> <label for="dyninput9">
<i> </i> <input class="foropt9 foropt10" name="dyninput9" enabled placeholder="Name of 9th Person">
<i> </i> </label>
<i> </i> <label for="dyninput10">
<i> </i> <input class="foropt10" name="dyninput10" enabled placeholder="Name of 10th Person">
<i> </i> </label>
<i> </i></div><textarea name="paragraph_text" cols="50" rows="10" placeholder="Comments/Questions/Concerns"></textarea><br>
<i> </i><input type="submit"> <script>
function myFunction() {
document.getElementById("myForm").reset();
}
</script>
</form>
<script>
document.getElementById("choice-animals-dogs").addEventListener("click", function () {
sel = document.getElementById("dynselect");
sel.style.display = "block";
sel.selectedIndex = 0;
});
document.getElementById("choice-animals-cats").addEventListener("click", function () {
document.getElementById("dynselect").style.display = "none";
// create a list of all inputs
var inputs = document.querySelectorAll("#dyn2 input");
for (var i = 0; i < inputs.length; i++) {
// provide current input
var cinput = inputs[i];
// input should be disabled and invisible
cinput.parentNode.style.display = "none";
cinput.removeAttribute("required");
cinput.setAttribute("disabled", true);
}
});
<i> </i>document.getElementById("dynselect").addEventListener("change", function () {
<i> </i> // create a list of all inputs
<i> </i> var inputs = document.querySelectorAll("#dyn2 input");
<i> </i> // loop through these inputs
<i> </i> for (var i = 0; i < inputs.length; i++) {
<i> </i> // provide current input
<i> </i> var cinput = inputs[i];
<i> </i> // check if this input has class according
<i> </i> // value of the selected option
<i> </i> if (cinput.classList.contains(this.value)) {
<i> </i> // input should be enabled and visible
<i> </i> cinput.parentNode.style.display = "block";
<i> </i> cinput.setAttribute("required", true);
<i> </i> cinput.removeAttribute("disabled");
<i> </i> } else {
<i> </i> // input should be disabled and invisible
<i> </i> cinput.parentNode.style.display = "none";
<i> </i> cinput.removeAttribute("required");
<i> </i> cinput.setAttribute("disabled", true);
<i> </i> }
<i> </i> }
<i> </i>});
</script>
</section>
<section class="col2 pad_left2">
<h2>Our <span>Contacts</span></h2>
<p class="pad_bot1">Hilton Tampa Airport Westshore
Address: 2225 N. Lois Ave, Tampa Florida 33607
</p>
<b> E-mail:</b> <a href="mailto:[email protected]">[email protected]</a>
<br/>
<i> </i> Iram's #:
<i> </i> 954-300-7810<br>
Suhayb's #:
315-460-0322<br><br>
<i>Please do not hesitate to contact us if you have any questions or concerns.</i>
</section>
</div>
</div>
</div>
</article>
<!-- content / -->
</div>
</div>
<div class="body2">
<div class="main">
<!-- footer -->
<footer>Copyright &copy; <a href="#">2018</a> All Rights Reserved<br>
Design by Rahman</a></footer>
<!-- / footer -->
</div>
</div>
<script>Cufon.now();</script>
<script>
$(window).load(function () {
$('.slider').nivoSlider({
effect: 'fold', //Specify sets like: 'fold,fade,sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft'
slices: 17,
animSpeed: 500,
pauseTime: 8000,
startSlide: 0, //Set starting Slide (0 index)
directionNav: true, //Next & Prev
directionNavHide: false, //Only show on hover
controlNav: true, //1,2,3...
controlNavThumbs: false, //Use thumbnails for Control Nav
controlNavThumbsFromRel: false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav: true, //Use left & right arrows
pauseOnHover: true, //Stop animation while hovering
manualAdvance: false, //Force manual transitions
captionOpacity: 1, //Universal caption opacity
beforeChange: function () {},
afterChange: function () {
Cufon.refresh();
},
slideshowEnd: function () {} //Triggers after all slides have been shown
});
});
</script>
</body>
</html>
<input type="submit" name="submit"><i>
</i><?php
ini_set('display_errors', '1');
error_reporting(E_ALL);
require_once 'datacheck.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rahman | Khaliq | RSVP</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script src="js/jquery-1.6.js" ></script>
<script src="js/cufon-yui.js"></script>
<script src="js/cufon-replace.js"></script>
<script src="js/Josefin_Sans_400.font.js"></script>
<script src="js/Tangerine_700.font.js"></script>
<script src="js/atooltip.jquery.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/script.js"></script>
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<style type="text/css">.aToolTip, .box1, .box1 .inner, .button, .button strong{behavior:url("js/PIE.htc");}</style>
<![endif]-->
</head>
<body id="page6">
<div class="body1">
<div class="main">
<!-- header -->
<header>
<div class="wrapper">
<h1><a href="index.html" id="logo"></a></h1>
<nav>
<ul id="menu">
<li><a href="guest.html">Venue/Accommodations</a></li>
<li><a href="guestbook.html">Guestbook</a></li>
<li class="first" id="menu_active"><a href="contacts.html">RSVP</a></li>
</ul>
</nav>
</div>
</header>
<!-- / header -->
</div>
</div>
<div class="body3">
<div class="main">
<i> </i><!-- content -->
<i> </i><article id="content">
<i> </i> <div class="wrapper">
<i> </i> <div class="pad">
<i> </i> <div class="wrapper">
<i> </i> <section class="col1">
<i> </i> <h2>RSVP <span>Form</span></h2>
<i> </i> <body>
<i> </i>Please fill this section out regardless if you are attending or not. Enter your Party's Name, choose # of people attending and input their names<b> (please list children as well)</b>.
<i> </i><form action="testpost.php" method="post">
Family Name:<input class="firstname"
name="dyninput1" enabled required> <br>
<input type="radio" name="choice-animals" id="choice-animals-dogs" value="yes" required>
<label for="choice-animals-dogs">Yes, I would love to.</label>
<input type="radio" name="choice-animals" id="choice-animals-cats" value="no">
<label for="choice-animals-cats">No, Sorry I can't make it.</label>
<select id="dynselect">
<option value="">How Many People Will Be Attending?</option>
<option value="foropt1">1 Person:</option>
<option value="foropt2">2 People:</option>
<option value="foropt3">3 People:</option>
<option value="foropt4">4 People:</option>
<option value="foropt5">5 People:</option>
<option value="foropt6">6 People:</option>
<option value="foropt7">7 People:</option>
<option value="foropt8">8 People:</option>
<option value="foropt9">9 People:</option>
<option value="foropt10">10 People:</option>
</select>
<div id="dyn2">
<label for="dyninput1">
<input class="foropt1 foropt2 foropt3 foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10"
name="dyninput1" enabled placeholder="Name of 1st Person">
<i> </i> </label>
<i> </i> <label for="dyninput2">
<i> </i> <input class="foropt2 foropt3 foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10"
<i> </i> name="dyninput2" enabled placeholder="Name of 2nd Person">
<i> </i> </label>
<i> </i> <label for="dyninput3">
<i> </i> <input class="foropt3 foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput3"
<i> </i> enabled placeholder="Name of 3rd Person">
<i> </i> </label>
<i> </i> <label for="dyninput4">
<i> </i> <input class="foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput4"
<i> </i> enabled placeholder="Name of 4th Person">
<i> </i> </label>
<i> </i> <label for="dyninput5">
<i> </i> <input class="foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput5"
<i> </i> enabled placeholder="Name of 5th Person">
<i> </i> </label>
<i> </i> <label for="dyninput6">
<i> </i> <input class="foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput6" enabled placeholder="Name of 6th Person">
<i> </i> </label>
<i> </i> <label for="dyninput7">
<i> </i> <input class="foropt7 foropt8 foropt9 foropt10" name="dyninput7" enabled placeholder="Name of 7th Person">
<i> </i> </label>
<i> </i> <label for="dyninput8">
<i> </i> <input class="foropt8 foropt9 foropt10" name="dyninput8" enabled placeholder="Name of 8th Person">
<i> </i> </label>
<i> </i> <label for="dyninput9">
<i> </i> <input class="foropt9 foropt10" name="dyninput9" enabled placeholder="Name of 9th Person">
<i> </i> </label>
<i> </i> <label for="dyninput10">
<i> </i> <input class="foropt10" name="dyninput10" enabled placeholder="Name of 10th Person">
<i> </i> </label>
<i> </i></div><textarea name="paragraph_text" cols="50" rows="10" placeholder="Comments/Questions/Concerns"></textarea><br>
<i> </i><input type="submit" name="submit"> <script>
function myFunction() {
document.getElementById("myForm").reset();
}
</script>
<?php
if (!empty($errors) && count($errors) > 0 && !$success) {
echo implode('', $errors);
} else if (!empty($success) && count($errors) === 0) {
echo $success;
}
?>
</form>
<script>
document.getElementById("choice-animals-dogs").addEventListener("click", function () {
sel = document.getElementById("dynselect");
sel.style.display = "block";
sel.selectedIndex = 0;
});
document.getElementById("choice-animals-cats").addEventListener("click", function () {
document.getElementById("dynselect").style.display = "none";
// create a list of all inputs
var inputs = document.querySelectorAll("#dyn2 input");
for (var i = 0; i < inputs.length; i++) {
// provide current input
var cinput = inputs[i];
// input should be disabled and invisible
cinput.parentNode.style.display = "none";
cinput.removeAttribute("required");
cinput.setAttribute("disabled", true);
}
});
<i> </i>document.getElementById("dynselect").addEventListener("change", function () {
<i> </i> // create a list of all inputs
<i> </i> var inputs = document.querySelectorAll("#dyn2 input");
<i> </i> // loop through these inputs
<i> </i> for (var i = 0; i < inputs.length; i++) {
<i> </i> // provide current input
<i> </i> var cinput = inputs[i];
<i> </i> // check if this input has class according
<i> </i> // value of the selected option
<i> </i> if (cinput.classList.contains(this.value)) {
<i> </i> // input should be enabled and visible
<i> </i> cinput.parentNode.style.display = "block";
<i> </i> cinput.setAttribute("required", true);
<i> </i> cinput.removeAttribute("disabled");
<i> </i> } else {
<i> </i> // input should be disabled and invisible
<i> </i> cinput.parentNode.style.display = "none";
<i> </i> cinput.removeAttribute("required");
<i> </i> cinput.setAttribute("disabled", true);
<i> </i> }
<i> </i> }
<i> </i>});
</script>
</section>
<section class="col2 pad_left2">
<h2>Our <span>Contacts</span></h2>
<p class="pad_bot1">Hilton Tampa Airport Westshore
Address: 2225 N. Lois Ave, Tampa Florida 33607
</p>
<b> E-mail:</b> <a href="mailto:[email protected]">[email protected]</a>
<br/>
<i> </i> Iram's #:
<i> </i> 954-300-7810<br>
Suhayb's #:
315-460-0322<br><br>
<i>Please do not hesitate to contact us if you have any questions or concerns.</i>
</section>
</div>
</div>
</div>
</article>
<!-- content / -->
</div>
</div>
<div class="body2">
<div class="main">
<!-- footer -->
<footer>Copyright &copy; <a href="#">2018</a> All Rights Reserved<br>
Design by Rahman</a></footer>
<!-- / footer -->
</div>
</div>
<script>Cufon.now();</script>
<script>
$(window).load(function () {
$('.slider').nivoSlider({
effect: 'fold', //Specify sets like: 'fold,fade,sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft'
slices: 17,
animSpeed: 500,
pauseTime: 8000,
startSlide: 0, //Set starting Slide (0 index)
directionNav: true, //Next & Prev
directionNavHide: false, //Only show on hover
controlNav: true, //1,2,3...
controlNavThumbs: false, //Use thumbnails for Control Nav
controlNavThumbsFromRel: false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav: true, //Use left & right arrows
pauseOnHover: true, //Stop animation while hovering
manualAdvance: false, //Force manual transitions
captionOpacity: 1, //Universal caption opacity
beforeChange: function () {},
afterChange: function () {
Cufon.refresh();
},
slideshowEnd: function () {} //Triggers after all slides have been shown
});
});
</script>
</body>
</html>
<form action="" method="post">[code]<?php
// add PHP Mailer
use PHPMailerPHPMailerPHPMailer;
require_once 'phpmailer/src/Exception.php';
require_once 'phpmailer/src/PHPMailer.php';
const HTML_ERROR_START = '<div class="alert alert-danger" role="alert"><p class="m-0">';
const HTML_ERROR_END = '</p></div>';
const HTML_SUCCESS_START = '<div class="alert alert-success" role="alert"><p class="m-0">';
const HTML_SUCCESS_END = '</p></div>';
$receiver = '[email protected]';
$emailfrom = '[email protected]';
$namefrom = 'Contact Form';
/**
* 1. Check if form was submitted.
*/
if (isset($_POST['submit'])) {
/**
* 2. Filter data
* - We use the function htmlspecialchars()
* - The function trim() is used to remove all empty spaces from start and end of the string
*/
$choice = htmlspecialchars(trim($_POST['choice-animals']));
$persons = [];
for ($i = 1; isset($_POST['dyninput' . $i]); $i++) {
$persons[] = htmlspecialchars(trim($_POST['dyninput' . $i]));
}
$errors = [];
$success = false;
$nr = 1;
foreach ($persons as $cperson) {
if (empty($cperson)) {
$errors[] = HTML_ERROR_START . 'Please enter a name for person no. ' . $nr . ' !' . HTML_ERROR_END;
$nr++;
}
}
// for testing only
if (empty($receiver)) {
$errors[] = HTML_ERROR_START . 'Please enter the email address of the receiver!' . HTML_ERROR_END;
}
/**
* 4. Check if there were errors, if not send email
* - for sending email we use PHPMailer
*/
if (count($errors) === 0) {
$mailer = new PHPMailer();
$mailer->CharSet = 'UTF-8'; // Set charset setzen for correct display of special characters
$mailer->setFrom($emailfrom, $namefrom); // Set email address and name of sender
$mailer->addAddress($receiver); // Empf채ngeradresse
$mailer->isHTML(true);
$mailer->Subject = 'New message'; // Subject
$mailer->Body = '<h3>New message</h3>
<h3>Choice was: ' . $choice . '</h3>
<h2>Persons:</h2>';
foreach ($persons as $cperson) {
$mailer->Body .= $cperson . '<br>';
}
/**
* Check if email was sent successfully
* if so: Report success
* if not: Report error(s)
*/
if (!$mailer->send()) {
$errors[] = HTML_ERROR_START . 'An errror occured. Please try again in some minutes!' . HTML_ERROR_END;
} else {
$success = HTML_SUCCESS_START . 'Your Message was sent successfully!' . HTML_SUCCESS_END;
}
}
}[code]when submitted I got the "Your Message was sent successfully!"[/quote]That's very fine and indicates that the script has run fine.
$receiver = '[email protected]';use PHPMailerPHPMailerPHPMailer;
require_once 'phpmailer/src/Exception.php';
require_once 'phpmailer/src/PHPMailer.php'; Family Name:<input class="firstname"
name="family-name" required><?php
// add PHP Mailer
use PHPMailerPHPMailerPHPMailer;
require_once 'phpmailer/src/Exception.php';
require_once 'phpmailer/src/PHPMailer.php';
const HTML_ERROR_START = '<div class="alert alert-danger" role="alert"><p class="m-0">';
const HTML_ERROR_END = '</p></div>';
const HTML_SUCCESS_START = '<div class="alert alert-success" role="alert"><p class="m-0">';
const HTML_SUCCESS_END = '</p></div>';
$receiver = '[email protected]';
$emailfrom = '[email protected]';
$namefrom = 'Contact Form';
/**
* 1. Check if form was submitted.
*/
if (isset($_POST['submit'])) {
/**
* 2. Filter data
* - We use the function htmlspecialchars()
* - The function trim() is used to remove all empty spaces from start and end of the string
*/
$choice = htmlspecialchars(trim($_POST['choice-animals']));
$persons = [];
for ($i = 1; isset($_POST['dyninput' . $i]); $i++) {
$persons[] = htmlspecialchars(trim($_POST['dyninput' . $i]));
}
<i> </i>// New
<i> </i>$familyname = htmlspecialchars(trim($_POST['family-name']));
<i> </i>$comments = htmlspecialchars(trim($_POST['paragraph_text']));
<i> </i>$errors = [];
<i> </i>$success = false;
<i> </i>$nr = 1;
<i> </i>foreach ($persons as $cperson) {
<i> </i> if (empty($cperson)) {
<i> </i> $errors[] = HTML_ERROR_START . 'Please enter a name for person no. ' . $nr . ' !' . HTML_ERROR_END;
<i> </i> $nr++;
<i> </i> }
<i> </i>}
<i> </i>if (empty($familyname)) {
<i> </i> $errors[] = HTML_ERROR_START . 'Please enter a family name!' . HTML_ERROR_END;
<i> </i>}
<i> </i>// for testing only
<i> </i>if (empty($receiver)) {
<i> </i> $errors[] = HTML_ERROR_START . 'Please enter the email address of the receiver!' . HTML_ERROR_END;
<i> </i>}
<i> </i>/**
<i> </i> * 4. Check if there were errors, if not send email
<i> </i> * - for sending email we use PHPMailer
<i> </i> */
<i> </i>if (count($errors) === 0) {
<i> </i> $mailer = new PHPMailer();
<i> </i> $mailer->CharSet = 'UTF-8'; // Set charset setzen for correct display of special characters
<i> </i> $mailer->setFrom($emailfrom, $namefrom); // Set email address and name of sender
<i> </i> $mailer->addAddress($receiver); // Empfängeradresse
<i> </i> $mailer->isHTML(true);
<i> </i> $mailer->Subject = 'New message'; // Subject
<i> </i> $mailer->Body = '<h3>New message</h3>
<i> </i> <h3>Choice was: ' . $choice . '</h3>
<i> </i> // new
<i> </i> <h3>Family name was: ' . $familyname . '</h3>
<i> </i> <h2>Persons:</h2>';
<i> </i> foreach ($persons as $cperson) {
<i> </i> $mailer->Body .= $cperson . '<br>';
<i> </i> }
<i> </i> $mailer->Body .= '<h2>Comments were:</h2>';
<i> </i> // new
<i> </i> $mailer->Body .= $comments;
<i> </i> /**
<i> </i> * Check if email was sent successfully
<i> </i> * if so: Report success
<i> </i> * if not: Report error(s)
<i> </i> */
<i> </i> if (!$mailer->send()) {
<i> </i> $errors[] = HTML_ERROR_START . 'An errror occured. Please try again in some minutes!' . HTML_ERROR_END;
<i> </i> } else {
<i> </i> $success = HTML_SUCCESS_START . 'Your Message was sent successfully!' . HTML_SUCCESS_END;
<i> </i> }
<i> </i>}
}
<?php
// add PHP Mailer
use PHPMailerPHPMailerPHPMailer;
require_once 'phpmailer/src/Exception.php';
require_once 'phpmailer/src/PHPMailer.php';
const HTML_ERROR_START = '<div class="alert alert-danger" role="alert"><p class="m-0">';
const HTML_ERROR_END = '</p></div>';
const HTML_SUCCESS_START = '<div class="alert alert-success" role="alert"><p class="m-0">';
const HTML_SUCCESS_END = '</p></div>';
$receiver = '[email protected]';
$emailfrom = '[email protected]';
$namefrom = 'Contact Form'; you can fix this by creating one email account on your server and using that as the FROM address.[/quote]
You'll also want to make sure that domain has an SPF record that allows sending from our email servers (secureserver.net).[/quote]I found this resource:
* {
border: none;
}input {
border: 1px solid grey;
} /**
* Check if email was sent successfully
* if so: Report success
* if not: Report error(s)
*/
if (!$mailer->send()) {
$errors[] = HTML_ERROR_START . 'An errror occured. Please try again in some minutes!' . HTML_ERROR_END;
} else {
if ($choice == 'yes') {
$success = HTML_SUCCESS_START . 'Thank you see you soon!' . HTML_SUCCESS_END;
} else {
$success = HTML_SUCCESS_START . 'You will be missed!' . HTML_SUCCESS_END;
}
}
}
}
0.1.9 — BETA 4.18