jQuery Ajax 양식은 두 번 클릭 한 후에 만 ​​제출합니다.

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 콜백에 넣을 수는 없습니다. 그래서 이것을위한 해결책은 무엇입니까? "= = 입력"제출 "

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

사용이 코드와 유형을 변경 HTML에 약간의 변화를 수행 예 :

Answer 2

양식 게시물을 바인딩 버튼 클릭 이벤트를 제출하십시오 버튼 "을 클릭하십시오.