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

您需要等待.ajax到succeed，因为它当前正在async模式下运行。

请使用async上的ajax选项将其停用。 Documentation Here

特别针对您的答案

<强> 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以继续向服务器提交过程

Answer 3

有一个简单的答案：不要使用<input type="submit" ... />。

您可以使用<button onlick="handler()">Submit</button>，其中handler()是您的函数绑定到上述代码中表单的submit-event。如果您的处理程序决定应该提交表单，只需以编程方式提交。编辑：实际上已存在于您的代码中。

确认提交后如何提交表格？ jQuery，AJAX

3 个答案:

特别针对您的答案