I have a form in Bootstrap 3 that's inside a modal. When I click the "Submit" button, it redirects to process.php which is supposed to send an email to my email address. It doesn't.
Does anyone know why this happens? Here's the form:
<div class="modal fade" id="contactPop" tabindex="-1" role="dialog" aria-labelledby="contactModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!-- Close button. -->
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<!-- Title. -->
<h3 class="modal-title" style="font-family: 'Lato', sans-serif; font-weight: 700;">
Contact Us <small style="font-family: 'Lato', sans-serif; font-weight:400;"> You matter to us.</small>
</h3>
</div>
<!-- User input fields. -->
<form class="contact" action="process.php" method="post">
<div class="modal-body">
<div class="row">
<div class="col-sm-6">
<label class="control-label">Subject</label>
<input type="text" class="form-control" required="required" placeholder="I aciddentally the website!" name="subject">
</div>
<div class="col-sm-6">
<label class="control-label">Username</label>
<input type="text" class="form-control" required="required" placeholder="Notch" name="username">
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6">
<label class="control-label">Message</label>
<textarea class="form-control" rows="8" style="resize: vertical;" required="required" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget fermentum justo, sit amet semper." name="message"></textarea>
</div>
<div class="col-sm-6">
<label class="control-label">Email</label>
<input type="email" class="form-control" required="required" placeholder="johnsmith@example.com" name="email">
</div>
<div class="col-sm-6" style="line-height: 21px;">
<br>
<p>Responses are usually received within 1-2 business days.</p>
<p>Please be as clear and concise as possible, in order to help us process your inquiry faster.</p>
</div>
</div>
</div>
<!-- Close & submit buttons. -->
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button>
<button type="button" value=" Send" class="btn btn-success" type="submit" id="submit"><i class="glyphicon glyphicon-inbox"></i> Submit</button>
</div>
</div>
</div>
</div>
There's also the process.php that sends the form, which is here:
<?php
//add the recipient's address here
$myemail = 'stanleyreale@gmail.com';
//grab named inputs from html then post to #thanks
if (isset($_POST['name'])) {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$message = strip_tags($_POST['message']);
echo "<span class=\"alert alert-success\" >Your message has been received, and we will get back to you as soon as possible. Here is what you submitted:</span><br><br>";
echo "<stong>Name:</strong> ".$name."<br>";
echo "<stong>Email:</strong> ".$email."<br>";
echo "<stong>Message:</strong> ".$message."<br>";
//generate email and send!
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:\n Name: $name \n ".
"Email: $email\n Message \n $message";
$headers = "From: $myemail\n";
$headers .= "Reply-To: $email";
mail($to,$email_subject,$email_body,$headers);
}
?>
And then in the index there's also the javascript that is supposed to submit the form.
<script type="text/javascript">
$(document).ready(function () {
$("input#submit").click(function(){
$.ajax({
type: "POST",
url: "process.php", //process to mail
data: $('form.contact').serialize(),
success: function(msg){
$("#thanks").html(msg) //hide button and show thank you
$("#form-content").modal('hide'); //hide popup
},
error: function(){
alert("failure");
}
});
});
});
</script>
If someone could help that would be greatly appreciated!
Try return false;
$("input#submit").click(function(){
$.ajax({
type: "POST",
url: "process.php", //process to mail
data: $('form.contact').serialize(),
success: function(msg){
$("#thanks").html(msg) //hide button and show thank you
$("#form-content").modal('hide'); //hide popup
},
error: function(){
alert("failure");
});
return false;
});
Also, since you are using jQuery Ajax to submit data. you don't require form tag at HTML. your getting redirected because there is action='process.php' mentioned in your form tag and there is no return false; in your jQuery for onClick event
Email not sending
Make sure you have specified correct path at jquery ajax
url: "process.php", //process to mail
I know this is a question asked long time ago. But the answer would be
<button **type="button"** value=" Send" class="btn btn-success" **type="submit"** id="submit"><i class="glyphicon glyphicon-inbox"></i> Submit</button>
You dont need type="submit" and type="button" . Remove type="submit" and this would stop you from redirecting.
Or you could use type="submit" and in your index javascript you could use
$("input#submit").click(function(e){
e.preventDefault();
$.ajax({
type: "POST",
....
....
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.