javascript - 在进行 JQuery 对话框选择之前，HTML 表单继续提交？

Question

我有一个 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 对话框提示用户；我试图让对话框在选择"is"时提交表单，如果选择“取消”则返回 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" />

有什么问题吗？

Answer 1

问题是您期望 onsubmit="returnnotes_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()" />