根据ajax响应提交表单 [英] Submit form depending on ajax response

问题描述

我创建了一个表单。在提交表单时，我发出了一个ajax请求，告诉我数据是否有效。我想要做的是，如果ajax响应告诉数据是有效的，那么它应该提交表单，但如果数据无效，那么它不应该提交表单。

< pre $ $（'＃agentLogin'）。submit（function（ev）{
ev.preventDefault（）;
var username = $（'＃agentEmail'） .val（）;
var password = $（'＃agentPassword'）。val（）;
$ .ajax（{$ b $ url：'<？php echo $ this-> createAbsoluteUrl（'site / agentLogin'）;？>'，
type：'POST'，
data：{
email：username，
pwd：password
}，
成功：函数（数据）{
if（data ==='invalid'）{
$（'＃agentLoginStatus'）。html（'Invalid Username and password'）;
} else if（data ==='deactivated'）{
$（'＃agentLoginStatus'）。html（'Account is deactivated'）;
} els （数据==='有效'）{
//在此处提交表单
}
}
}）;
}）;


问题： - 数据无效时不提交形成。但如果数据是有效的，那么它也不会提交表单。

已经尝试过： -

  $（本）.submit（）; 
返回true; 
  

解决方案

试试这种方法：$ b $ （$提交）{
$ b $ $ $ $ $'
$ b 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（'帐户已停用'）;
}
else if（data ==='valid'）{
$ form.trigger（'submit'，[true]）;
}
}
}）;
}
}）;

原因是它不适用于您的原始代码，因为当您尝试调用 $（this）.submit（）它会触发相同的事件处理程序，它会尝试重新验证AJAX请求，并且永远不会提交表单。要修复它，你需要以某种方式告诉事件处理程序，当你手动提交表单时，你不想再运行验证。我为此传递了其他参数：
$ b $ $ $ $ $ $ $ $ $ $ form.trigger（'submit'，[true]）;

I have created a form. On the submission of the form i make an ajax request which tells me whether the data is valid or not. What i want to do is that if the ajax response tells that the data is valid then it should submit the form but if data is not valid then it should not submit the form.

$('#agentLogin').submit(function(ev){
       ev.preventDefault();
       var username=$('#agentEmail').val();
       var password=$('#agentPassword').val();
       $.ajax({
           url: '<?php echo $this->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
               }
           }
       });
    });

Problem:- When the data is not valid It does not submit the form. but if the data is valid then also it does not submits the form. How can i resolve this issue?

Already tried:-

$(this).submit();
return true;

解决方案

Try this approach:

$('#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]);
                }
            }
        });
    }
});

The reason it didn't work with your original code is that when you try to call $(this).submit() it triggers the same event handler which attempts to validate with AJAX request all over again and never actually submit a form. To fix it you need to tell event handler somehow that when you submit a form manually you don't want to run validation anymore. I am passing additional parameter for this:

$form.trigger('submit', [true]);

这篇关于根据ajax响应提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！