確認提交后如何提交表格？ jQuery，AJAX

Question

美好的一天，我有一個包含以下表單的簡單html頁面：

<form:form method="post" action="details" modelAttribute="code">
  <form:input path="code"/>
  <br/>
  <input type="submit" value="Submit" />
</form:form>

當我按下Submit按鈕時，我需要使用jQuery AJAX檢查數據庫中是否存在給定代碼的某些記錄。 如果是，則彈出jQuery UI對話框，詢問用戶是否真的要顯示記錄詳細信息（因為這是一項付費服務​​）。 如果他確認我需要提交表格。 這是我在html頁面上的腳本：

$(document).ready(function() {

  // Bind an event handler to the submit event
  $('form#code').submit( function() {

    // Check whether there are some records in the DB using AJAX
    $.ajax({
      url: 'getResultCount',
      type: 'post',
      dataType: 'html',
      data: $("form#code").serialize(),
      success: function(result) {
        if(result == 'null') {
          $('div#results').html('<p>No records found for ' + $('input#code').val() + '.</p>');
        } else {
          // At leat one record was found so ask the user
          $('#dialog-confirm').dialog({
            resizable: false,
            draggable: false,
            height: 240,
            width: 450,
            modal: true,
            buttons: {
              "Display details": function() {
                // User confirmed, submit the form
                $('form#code').submit();
              },
              Cancel: function() {
                $(this).dialog("close");
              }
            }
          });
        }
      }
    });

    return false;
  });

});

當我按下“顯示詳細信息”按鈕時，什么也沒有發生。 我認為這是因為我正在輸入相同的提交處理程序，該處理程序返回false。 如何解決它以便執行表單提交？ 請指教。 先感謝您。 Vojtech

Answer 1

更改

$('form#code').submit();

至

$('form#code')[0].submit(); 

它將跳過jQuery onsubmit函數。

基本示例： http ： //jsfiddle.net/4Ax6m/

Answer 2

有一個簡單的答案：不要使用<input type="submit" ... /> 。

您可以改用<button onlick="handler()">Submit</button> ，其中handler()是綁定到上述代碼中表單提交事件的函數。 如果您的經理決定應提交表格，則以編程方式提交。 編輯：這實際上已經在您的代碼中。

Answer 3

您需要等待.ajax succeed因為它當前正在async模式下運行。

因此，請使用ajax上的async選項禁用它。 這里的文件

專門為您解答

JS

$(document).ready(function () {
    // Bind an event handler to the submit event
    $('form#code').submit(function () {
        // Check whether there are some records in the DB using AJAX
        $.ajax({
            url: 'getResultCount',
            type: 'post',
            dataType: 'html',
            data: $("form#code").serialize(),
            async: false,
            success: function (result) {
                if (result == 'null') {
                    $('div#results').html('<p>No records found for ' + $('input#code').val() + '.</p>');

                    //No Records found, submitting!!
                    return true;
                } else {
                    // At leat one record was found so ask the user
                    $('#dialog-confirm').dialog({
                        resizable: false,
                        draggable: false,
                        height: 240,
                        width: 450,
                        modal: true,
                        buttons: {
                            "Display details": function () {
                                // User confirmed, submit the form
                                return true;
                            },
                            Cancel: function () {
                                //TODO: Don't think you need this line?
                                $(this).dialog("close");

                                //CANCEL!!!
                                return false;
                            }
                        }
                    });
                    //User skipped Dialog somehow...ignoring....DO NOT SUBMIT
                    return false;
                }
            }
        });
    });
});

注意：這將返回true和false，以繼續向服務器提交過程