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>

我有一个名为＆＃34; notes_validate（）＆＃34;的JavaScript脚本验证表单上的元素，如果所有元素都通过了检查，则返回true。

在这个脚本中，作为最后的验证步骤之一，我用这个JQuery对话框提示用户;如果＆＃34;是＆＃34;我试图让对话框提交表格。如果＆＃34;取消＆＃34;选择并返回false（不提交表单）被选中。

在＆＃34; notes_validate（）＆＃34;是：

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="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()" />

在进行JQuery Dialog选择之前，HTML表单是否继续提交？

1 个答案: