Hi I am using the following html, JS and php to send an email form. All values are being received in the mail except select option drop down value. I want people and roomtype values to be mailed along with other data.
<form name="sentMessage" id="bookingForm">
<div >
<div data-wow-delay="100ms">
<div >
<label>Name</label>
<input type="text" name="message-name" id="name" placeholder="Your Name" required data-validation-required-message="Please enter your name.">
</div>
</div>
<div data-wow-delay="100ms">
<div >
<label>Email</label>
<input type="email" name="message-email" id="email" placeholder="Your Email" required data-validation-required-message="Please enter your email address.">
</div>
</div>
<div data-wow-delay="100ms">
<div >
<label>Phone</label>
<input type="number" name="message-phone" id="phone" placeholder="Your Phone" required data-validation-required-message="Please enter your phone number.">
</div>
</div>
<div data-wow-delay="100ms">
<div >
<label>Arrival Date</label>
<input type="date" name="message-arrival" id="arrival" placeholder="Arrival Date *" required data-validation-required-message="Please enter arrival date." value="<?php echo date('Y-m-d'); ?>">
</div>
</div>
<div data-wow-delay="100ms">
<div >
<label>Departure Date</label>
<input type="date" name="message-departure" id="departure" placeholder="Departure Date *" required data-validation-required-message="Please enter arrival date." value="<?php echo date('Y-m-d'); ?>">
</div>
</div>
<div data-wow-delay="100ms">
<div >
<label>No. of People</label>
<select id="people" name="people" required data-validation-required-message="Please select number of people.">
<option value="" disabled selected>Select no.s of people *</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</div>
<div data-wow-delay="100ms">
<div >
<label>Room/ Suite Type</label>
<select name="roomtype" id="roomtype" required data-validation-required-message="Please select type of room/ suite.">
<option value="" disabled selected>Select Room/Suite *</option>
<option value="1"> Family Suite-I </option>
<option value="2"> Family Suite-II </option>
<option value="3"> Double Bed Room </option>
</select>
</div>
</div>
<div data-wow-delay="100ms">
<div >
<br/><label>Comments</label>
<textarea name="message" id="message" placeholder="Your Message" required data-validation-required-message="Please enter a message."></textarea>
</div>
</div>
<div data-wow-delay="100ms">
<div id="success"></div><!--Required for Mail Sent-->
<button type="submit" >Send Message</button>
</div>
</div>
</form>
This is the Java script.
// Booking Form Scripts
$(function() {
$("#bookingForm input,#bookingForm textarea").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var arrival = $("input#arrival").val();
var departure = $("input#departure").val();
var people = $("input#people").val();
var roomtype = $("input#roomtype").val();
var message = $("textarea#message").val();
var firstName = name; // For Success/Failure Message
// Check for white space in name for Success/Fail message
if (firstName.indexOf(' ') >= 0) {
firstName = name.split(' ').slice(0, -1).join(' ');
}
$.ajax({
url: "././mail/bookmail/mail/book.php",
type: "POST",
data: {
name: name,
email: email,
phone: phone,
arrival: arrival,
departure: departure,
people: people,
roomtype: roomtype,
message: message
},
cache: false,
success: function() {
// Success message
$('#success').html("<div class='alert alert-success'>");
$('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-success')
.append("<strong>Your message has been sent. Will Contact you Shortly. </strong>");
$('#success > .alert-success')
.append('</div>');
//clear all fields
$('#bookingForm').trigger("reset");
},
error: function() {
// Fail message
$('#success').html("<div class='alert alert-danger'>");
$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-danger').append("<strong>Sorry " firstName ", it seems that my mail server is not responding. Please try again later!");
$('#success > .alert-danger').append('</div>');
//clear all fields
$('#bookingForm').trigger("reset");
},
});
},
filter: function() {
return $(this).is(":visible");
},
});
$("a[data-toggle=\"tab\"]").click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});
/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
$('#success').html('');
});
This is the PHP code which I am using with the html and js to send the data in email
<?php
// Check for empty fields
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['phone']) ||
empty($_POST['arrival']) ||
empty($_POST['departure']) ||
//empty($_POST['people']) ||
//empty($_POST['roomtype']) ||
empty($_POST['message']) ||
!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
{
echo "No arguments Provided!";
return false;
}
$name = strip_tags(htmlspecialchars($_POST['name']));
$emailadd = strip_tags(htmlspecialchars($_POST['email']));
$phone = strip_tags(htmlspecialchars($_POST['phone']));
$arrival = strip_tags(htmlspecialchars($_POST['arrival']));
$departure = strip_tags(htmlspecialchars($_POST['departure']));
$people = strip_tags(htmlspecialchars($_POST['people']));
$roomtype = strip_tags(htmlspecialchars($_POST['roomtype']));
$message = strip_tags(htmlspecialchars($_POST['message']));
// Create the email and send the message
$to = '[email protected]'; // Add your email address inbetween the '' replacing [email protected] - This is where the form will send a message to.
$email_subject = "Website Booking Form: $name";
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $emailadd\n\nPhone: $phone\n\nArrival: $arrival\n\nDeparture: $departure\n\nPeople: $people\n\nRoomtype: $roomtype\n\nMessage: $message";
$headers = "From: noreply\n"; // This is the email address the generated message will be from. We recommend using something like [email protected].
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>
CodePudding user response：
To get value of dropdown you have to use 'select' instead of 'input' in javascript.
Change these two variable's value in javascript code in submitSuccess :
var people = $("select#people").val();
var roomtype = $("select#roomtype").val();
CodePudding user response：
Add method=post, see docs at https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data
<form method="post">
...
</form>