提交ajax后清除表单值
我使用以下脚本来validation我的联系表单。
//submission scripts $('.contactForm').submit( function(){ //statements to validate the form var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; var email = document.getElementById('e-mail'); if (!filter.test(email.value)) { $('.email-missing').show(); } else {$('.email-missing').hide();} if (document.cform.name.value == "") { $('.name-missing').show(); } else {$('.name-missing').hide();} if (document.cform.phone.value == "") { $('.phone-missing').show(); } else if(isNaN(document.cform.phone.value)){ $('.phone-missing').show(); } else {$('.phone-missing').hide();} if (document.cform.message.value == "") { $('.message-missing').show(); } else {$('.message-missing').hide();} if ((document.cform.name.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "") || isNaN(document.cform.phone.value)){ return false; } if ((document.cform.name.value != "") && (filter.test(email.value)) && (document.cform.message.value != "")) { //hide the form //$('.contactForm').hide(); //show the loading bar $('.loader').append($('.bar')); $('.bar').css({display:'block'}); /*document.cform.name.value = ''; document.cform.e-mail.value = ''; document.cform.phone.value = ''; document.cform.message.value = '';*/ //send the ajax request $.post('mail.php',{name:$('#name').val(), email:$('#e-mail').val(), phone:$('#phone').val(), message:$('#message').val()}, //return the data function(data){ //hide the graphic $('.bar').css({display:'none'}); $('.loader').append(data); }); //waits 2000, then closes the form and fades out //setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 2000); //stay on the page return false; } });
这是我的表格
我需要在成功提交后清除表单字段值。 我怎样才能做到这一点?
$("#cform")[0].reset();
或者在普通的javascript中:
document.getElementById("cform").reset();
您可以在$ .post调用成功回调中执行此操作
$.post('mail.php',{name:$('#name').val(), email:$('#e-mail').val(), phone:$('#phone').val(), message:$('#message').val()}, //return the data function(data){ //hide the graphic $('.bar').css({display:'none'}); $('.loader').append(data); //clear fields $('input[type="text"],textarea').val(''); });
$('.contactForm').submit(function(){ var that = this; //...more form stuff... $.post('mail.php',{...params...},function(data){ //...more success stuff... that.reset(); }); });
用这个:
$('form.contactForm input[type="text"],texatrea, select').val('');
或者如果您this
表单有引用:
$('input[type="text"],texatrea, select', this).val('');
:input
=== +
s +
s
只是
$('#cform')[0].reset();
$.post('mail.php',{name:$('#name').val(), email:$('#e-mail').val(), phone:$('#phone').val(), message:$('#message').val()}, //return the data function(data){ if(data==){ $('#
它的工作原理:在ajax成功后调用此函数并发送您的表单ID作为参数。 像这样的东西:
此function清除所有输入字段值,包括按钮,提交,重置,隐藏字段
function resetForm(formid) { $('#' + formid + ' :input').each(function(){ $(this).val('').attr('checked',false).attr('selected',false); }); }
*此function清除除按钮,提交,重置,隐藏字段外的所有输入字段值* * /
function resetForm(formid) { $(':input','#'+formid) .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); }
例:
提交表单时在表单中设置id
set in jquery document.getElementById("cform").reset();