I have a contact form on my website. After filling out the form and clicking sub
ID: 3905909 • Letter: I
Question
I have a contact form on my website. After filling out the form and clicking submit, the button gets stuck on "sending..." BUT I still receive the email. I think it might have something to do with the ajax portion of my code? Any help is apprecitated.
JS CODE:
$(function()
{
function after_form_submitted(data)
{
if(data.result == 'success')
{
$('form#reused_form').hide();
$('#success_message').show();
$('#error_message').hide();
}
else
{
$('#error_message').append('<ul></ul>');
jQuery.each(data.errors,function(key,val)
{
$('#error_message ul').append('<li>'+key+':'+val+'</li>');
});
$('#success_message').hide();
$('#error_message').show();
//reverse the response on the button
$('button[type="button"]', $form).each(function()
{
var $btn = $(this);
var label = $btn.prop('orig_label');
if(label)
{
$btn.prop('type','submit' );
$btn.text(label);
$btn.prop('orig_label','');
}
});
}//else
}
$('#reused_form').submit(function(e)
{
e.preventDefault();
var $form = $(this);
//show some response on the button
$('button[type="submit"]', $form).each(function()
{
var $btn = $(this);
$btn.prop('type','button' );
$btn.prop('orig_label',$btn.text());
$btn.text('Sending ...');
});
$.ajax({
type: "POST",
url: 'handler.php',
data: $form.serialize(),
success: after_form_submitted,
dataType: 'json'
});
});
});
Explanation / Answer
Updated Source Code:
$(function()
{
function after_form_submitted(data)
{
if(data.result == 'success')
{
$('form#reused_form').hide();
$('#success_message').show();
$('#error_message').hide();
}
else
{
$('#error_message').append('<ul></ul>');
jQuery.each(data.errors,function(key,val)
{
$('#error_message ul').append('<li>'+key+':'+val+'</li>');
});
$('#success_message').hide();
$('#error_message').show();
//reverse the response on the button
$('button[type="button"]', $form).each(function()
{
var $btn = $(this);
var label = $btn.prop('orig_label');
if(label)
{
$btn.prop('type','submit' );
$btn.text(label);
$btn.prop('orig_label','');
}
});
}//else
}
$('#reused_form').submit(function(e)
{
//Remove the code e.preventDefault(); and clear the cach
//e.preventDefault();
var $form = $(this);
//show some response on the button
$('button[type="submit"]', $form).each(function()
{
var $btn = $(this);
$btn.prop('type','button' );
$btn.prop('orig_label',$btn.text());
$btn.text('Sending ...');
});
$.ajax({
type: "POST",
url: 'handler.php',
data: $form.serialize(),
success: after_form_submitted,
dataType: 'json'
});
});
});
Explaination:
//Remove the code e.preventDefault(); and clear the cach
//e.preventDefault();
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.