1

美好的一天，我有一个包含此表单的简单 html 页面：

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

当我按下提交按钮时，我需要检查数据库中是否有使用 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 的相同提交处理程序。如何解决它以便执行表单提交？请指教。先感谢您。沃杰科技

4

3 回答 3

4

改变

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

到

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

它将跳过 jQuery onsubmit 函数。

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

于 2013-10-09T21:33:48.530 回答
1

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

您可以改用<button onlick="handler()">Submit</button>,handler()您的函数在哪里绑定到上述代码中表单的提交事件。如果您的处理程序决定应该提交表单，只需以编程方式提交即可。编辑：这实际上已经在您的代码中。

于 2013-10-09T21:31:11.697 回答
1

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

所以使用async选项禁用它ajax。 文档在这里

专门为您解答

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

于 2013-10-09T21:32:06.060 回答