Right now, whenever I click the submit button on the contact form on my website, it brings me to the page www.mysite.com/php/function/email.php, rather than running the email.php in the background like I want it to.
The website is supposed to allow you to submit the contact form, then the button will fade away and fade in a "Your message has been sent!", then fade back the button.
HTML:
<form name="contact form" id='contact_form' method="post" action="php/function/email.php">
<div class="row half">
<div class="6u">
<input name="name" placeholder="Name" type="text" class="text" />
</div>
<div class="6u">
<input name="email" placeholder="Email" type="email" class="text" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row half">
<div class="12u">
<input id="submit" name="submit" type="submit" value="Send Message" class="button button-icon icon icon-envelope" />
</div>
</div>
<p id="success" style="display:none">Your message has been sent! I'll get back to you soon!</p>
<p id="error" style="display:none">Please fill in all the fields and try again!</p>
JS:
$(document).ready(function(){
$('#send_message').click(function(e){
//Stop form submission & check the validation
e.preventDefault();
// Variable declaration
var name = $('#name').val();
var email = $('#email').val();
var subject = $('#subject').val();
var message = $('#message').val();
// Disable submit button just after the form processed 1st time successfully.
$('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
/* Post Ajax function of jQuery to get all the data from the submission of the form as soon as the form sends the values to email.php*/
$.post("email.php", $("#contact_form").serialize(),function(result){
//Check the result set from email.php file.
if(result == 'sent'){
//If the email is sent successfully, remove the submit button
$('#submit').remove();
//Display the success message
$('#success').fadeIn(500);
}else{
//Display the error message
$('#error').fadeIn(500);
// Enable the submit button again
$('#submit').removeAttr('disabled').attr('value', 'Send The Message');
}
});
}
});
};
PHP:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: Example';
$to = 'example@gmail.com';
$subject = 'Example Contact Form';
$body = "
From: $name
Email: $email
---------------
Message: \n
$message";
if ($_POST['submit']) {
if (mail ($to, $subject, $body, $from)) {
echo 'sent';
} else {
echo 'failed';
}
}
?>
The problem is that you're looking for click events on #send_message
but your submit button has an id of submit
. So that click event never happens.
The .click()
event of a <input type="submit">
isn't actually what causes the redirection. It instead becomes a .submit()
event at the <form>
.
You can either e.stopPropagation()
so it doesn't reach the <form>
.
//Stop form submission & check the validation
e.stopPropagation();
Or preventDefault()
of the <form>
's .submit()
.
$('#contact_form').submit(function (e) {
e.preventDefault();
});
Note: You should also consider moving your code into a .submit()
handler as most browsers support other ways of submitting a <form>
than actually clicking the <input type="submit">
.
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.