javascript - 在选择“JQuery对话框”之前，HTML表单是否继续提交？

我有一个HTML形式：

<form id="notes" method="post" onsubmit="return notes_validate()">

在此表单中，我包括了一个“ jQuery对话框”（已连接脚本并且可以正常工作）：

<div id="dialog-confirm" title="Alert" style="display:none;">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Continue and submit?</p>
</div>

我有一个名为“ notes_validate（）”的JavaScript脚本，该脚本验证表单上的元素，如果所有元素均通过检查，则返回true。

在此脚本中，作为最后的验证步骤之一，我用此JQuery对话框提示用户。我试图让对话框在选择“是”的情况下提交表单，而在选择“取消”的情况下返回false（不提交表单）。

在“ notes_validate（）”中是：

if(validated){

        $(function() {
            $( "#dialog-confirm" ).dialog({
                resizable: false,
                height:240,
                width:300,
                modal: true,
                buttons: {
                    "Yes": function() {
                        $( this ).dialog( "close" );
                        return true;
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                        return false;
                    }
                }
            });
        });

    }

问题在于，在选择任何选项之前，表单是自动提交的。我在HTML表单中也有一个提交按钮：

<input class="submit" style="float:left" type="submit" value="submit" />

有什么问题？

最佳答案

问题是您期望onsubmit="return notes_validate()"阻止表单提交，但是您的线程混乱了。您没有直接从notes_validate()返回任何内容。

按下$( "#dialog-confirm" ).dialog({...})后，这就是另一个“线程”。您的notes_validate方法将继续运行，好像什么都没发生。

您需要的是

function notes_validate(event) {
    if(validated){
    $(function() {
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:240,
            width:300,
            modal: true,
            buttons: {
                "Yes": function() {
                    $( this ).dialog( "close" );
                    $( "#notes" ).submit();
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });
    }
    event.preventDefault();
}

更新：
如前所述，最好将其全部删除onsubmit部分。从窗体中删除onsubmit后，将按钮更改为以下内容即可解决问题：

<input class="submit" style="float:left" type="button" onclick="notes_validate()" />