根据ajax响应提交表单
我创建了一个表单。 在提交表单时，我发出一个ajax请求，告诉我数据是否有效。 我想要做的是，如果ajax响应告诉数据有效，那么它应该提交表单，但如果数据无效，那么它不应该提交表单。
$('#agentLogin').submit(function(ev){ ev.preventDefault(); var username=$('#agentEmail').val(); var password=$('#agentPassword').val(); $.ajax({ url: 'createAbsoluteUrl('site/agentLogin'); ?>', type: 'POST', data: { email: username, pwd: password }, success: function(data){ if(data === 'invalid'){ $('#agentLoginStatus').html('Invalid Username and password'); }else if(data === 'deactivated'){ $('#agentLoginStatus').html('Account is deactivated'); }else if(data === 'valid'){ // submit form here } } }); }); 问题： –当数据无效时它不提交表格。 但如果数据有效，那么它也不会提交表格。 我该如何解决这个问题？
已经尝试过： –
$(this).submit(); return true;
试试这种方法：
$('#agentLogin').submit(function (ev, submit) { if (!submit) { ev.preventDefault(); var username = $('#agentEmail').val(), password = $('#agentPassword').val(), $form = $(this); $.ajax({ url: 'url', type: 'POST', data: { email: username, pwd: password }, success: function (data) { if (data === 'invalid') { $('#agentLoginStatus').html('Invalid Username and password'); } else if (data === 'deactivated') { $('#agentLoginStatus').html('Account is deactivated'); } else if (data === 'valid') { $form.trigger('submit', [true]); } } }); } });
它与原始代码不兼容的原因是，当您尝试调用$(this).submit()它会触发相同的事件处理程序，该处理程序尝试再次使用AJAX请求进行validation，并且从不实际提交表单。 要修复它，您需要以某种方式告诉事件处理程序，当您手动提交表单时，您不再需要运行validation。 我正在为此传递其他参数：
$form.trigger('submit', [true]);
您可以继续使用本机.submit()方法提交
，该方法应该只启动先前阻止的默认操作 ， 而不重新运行事件绑定 。
调用时，
submit()方法必须从form元素本身提交form元素，并设置提交的submit()方法标志。
5）如果未设置从
submit()方法submit()标志，则在form触发一个名为bubbles的可冒泡的简单事件 。 […]
但是，您还需要存储对
的引用，因为this可以并且通常在function s之间是不同的，包括嵌入式回调。
$('#agentLogin').submit(function(ev){ ev.preventDefault(); var form = this; // store reference as `this` can change between `function`s var username=$('#agentEmail').val(); var password=$('#agentPassword').val(); $.ajax({ url: 'createAbsoluteUrl('site/agentLogin'); ?>', type: 'POST', data: { email: username, pwd: password }, success: function(data){ if(data === 'invalid'){ $('#agentLoginStatus').html('Invalid Username and password'); }else if(data === 'deactivated'){ $('#agentLoginStatus').html('Account is deactivated'); }else if(data === 'valid'){ form.submit(); // use native method to counter `preventDefault()` } } }); });
$('#agentLogin').submit(function(ev){ var myForm=$(this); if(myForm.data("action")=="submit"){ return true; } ev.preventDefault(); var username=$('#agentEmail').val(); var password=$('#agentPassword').val(); $.ajax({ url: 'createAbsoluteUrl('site/agentLogin'); ?>', type: 'POST', data: { email: username, pwd: password }, success: function(data){ if(data === 'invalid'){ $('#agentLoginStatus').html('Invalid Username and password'); return false; }else if(data === 'deactivated'){ $('#agentLoginStatus').html('Account is deactivated'); }else if(data === 'valid'){ myForm.data("action","submit"); myForm.submit(); } } });
$('#agentLogin').submit(function(ev){ var myForm=$(this); if(myForm.data("action")=="submit"){ return true; } ev.preventDefault(); var username=$('#agentEmail').val(); var password=$('#agentPassword').val(); $.ajax({ url: 'createAbsoluteUrl('site/agentLogin'); ?>', type: 'POST', data: { email: username, pwd: password }, success: function(data){ if(data === 'invalid'){ $('#agentLoginStatus').html('Invalid Username and password'); }else if(data === 'deactivated'){ $('#agentLoginStatus').html('Account is deactivated'); }else if(data === 'valid'){ $("hidensubmitbutton").click(); //and the form will be submited } } });
在这里我们可以使用ajax的submithandler。 原因是submithandler使用提交按钮并validation数据。