PreventDefault () doesn't stop normal form submit
I am trying to code an AJAX contact form that sends an email. I am following the tutorial found here .
I am having trouble preventing my browser from navigating to the url specified in the form action attribute.
Here is my javascript code:
$(function(){
var form = $('#ajaxMail');
var formSuccess = $('#successMail');
var formError = $('#errorMail');
$(form).submit(function(event){
event.preventDefault();
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response){
$(successMail).removeClass('standbyMessage');
$(successMail).addClass('completedMessage');
$('#name').val('');
$('#email').val('');
$('#message').val('');
)}
.fail(function(response){
$(errorMail).removeClass('standbyMessage');
$(errorMail).addClass('completedMessage');
)};
}
});
HTML CODE
<form name="ajaxMail" id="ajaxMail" action="mailer.php" method="POST">
<input type="text" id="name" name="name" placeholder="<?php echo $plName; ?>" required>
<input type="text" id="email" name="email" placeholder="<?php echo $plEmail; ?>" required>
<textarea id="message" name="message" cols="63" rows="8" placeholder="<?php echo $plMessage; ?>" required></textarea>
<input type="submit" id="submitMail" value="<?php echo $plSend; ?>">
</form>
<div id="successMail" class="alert alert-success standbyMessage" role="alert"><strong>Correo electronico</strong> enviado correctamente.</div>
<div id="errorMail" class="alert alert-danger standbyMessage" role="alert"><strong>Correo electronico</strong> no pudo enviarse, intente de nuevo mas tarde</div>
+3
source to share
3 answers
you have incorrect closing parentheses between submit, complete and close to check
fixed script:
$(document).ready(function(){
var submitform = $('#ajaxMail');
var formSuccess = $('#successMail');
var formError = $('#errorMail');
$(submitform).on('submit',function(event){
event.preventDefault();
var formData = $(submitform).serialize();
$.ajax({
type: 'POST',
url: $(submitform).attr('action'),
data: formData
})
.done(function(response){
$(successMail).removeClass('standbyMessage');
$(successMail).addClass('completedMessage');
$('#name').val('');
$('#email').val('');
$('#message').val('');
})
.fail(function(response){
$(errorMail).removeClass('standbyMessage');
$(errorMail).addClass('completedMessage');
});
});
});
+1
source to share
Add to return false;
$(form).submit(function(event){
event.preventDefault();
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response){
$(successMail).removeClass('standbyMessage');
$(successMail).addClass('completedMessage');
$('#name').val('');
$('#email').val('');
$('#message').val('');
)}
.fail(function(response){
$(errorMail).removeClass('standbyMessage');
$(errorMail).addClass('completedMessage');
)};
return false;
}
+1
source to share
You need to use jQuery to bind to the submit event and prevent the default action. It would be a little more efficient if your form and alias were used id
in addition to their names:
try it
<script type="text/javascript">
jQuery(function($){
$("form[name=input]").submit(function(e){
e.preventDefault(); // Keep the form from submitting
var form = $(this);
// Use the POST method to post to the same url as
// the real form, passing in newNickname as the only
// data content
$.post( form.attr('action'), { newNickname: form.find(':text').val() }, function(data){
alert(data); // Alert the return from the server
}, "text" );
});
});
</script>
0
source to share