Question

我有一个表单，在提交时检查帐号是否有效（通过AJAX）。

如果无效，则显示错误消息。这很好。

如果有效，则应提交表格。它提交但仅在单击“提交”按钮两次后才会提交。

$('#account_validation_form').on('submit', function(e){

    e.preventDefault();

    var payers_account = $("input[name='payers_account']").val();

  $.post('ajax.php', {payers_account:payers_account}, function(data){

  if(data === 'invalid'){
     $(".account_invalid_message").html("<p>Given Account Number is invalid</p>");
  }

  else if(data === 'valid'){
     $("#account_validation_form").unbind('submit').submit()
  }

  });

});

我知道在那里调用e.preventDefault()有问题。但这是必要的，它不能放在AJAX Callback中。那么这个解决方案是什么呢？

Answer 1

尝试将表单帖子绑定到提交按钮单击事件：即：

$('#submit_button_id').on('click', function(e){



    var payers_account = $("input[name='payers_account']").val();

  $.post('ajax.php', {payment_amount:payment_amount, payers_account:payers_account,}, function(data){

  if(data === 'invalid'){
     $(".account_invalid_message").html("<p>Given Account Number is invalid</p>");
  }

  else if(data === 'valid'){
     $("#account_validation_form").submit();
  }

  });

});

Answer 2

$('#submit_button_id').on('click', function(e)
{
    var payers_account = $("input[name='payers_account']").val();
    $.post('ajax.php',
    {
        payment_amount: payment_amount,
        payers_account: payers_account,
    }, function(data)
    {
        if (data === 'invalid')
        {
            $(".account_invalid_message").html("<p>Given Account Number is invalid</p>");
        }
        else if (data === 'valid')
        {
            $("#account_validation_form").submit();
        }
    });
});

使用此代码并对HTML进行一些更改将type =“submit”更改为提交按钮<= p>的type =“button”

jQuery Ajax表单只在单击两次后才会提交

2 个答案: