忽略了jQuery对话框按钮,继续提交表单
P粉832212776
P粉832212776 2023-08-15 12:55:00
[CSS3讨论组]
<p>我有以下的表单代码和javascript代码如下所示。问题是当执行到<code>validateDialogForm()</code>时,如果满足某些条件,会显示一个jquery对话框。我确实能够看到对话框出现了几秒钟,但它不会停留在那里,表单仍然继续提交。我希望表单在一段时间内暂停,只有当用户点击<code>保存</code>按钮时才提交。我尝试在<code>validateDialogForm()</code>函数结束前加上<code>return false;</code>,以阻止表单提交,但当我点击对话框的保存按钮时,它不会继续提交表单,而是保持原样。我在这里做错了什么?以下代码的当前状态是,无论jquery对话框如何,表单都将继续提交。(为了清晰起见,删除了很多不相关的代码)</p> <p><br /></p> <pre class="brush:js;toolbar:false;">$('#checklist_dialog').hide(); function validateDialogForm() { $('#checklist_dialog').show(); var isConfirmed = false; //STEP:1 Check if option B is selected. var selectedVal = ""; var selected = $("input[type='radio'][name='sampleChoice']:checked"); if (selected.length &gt; 0) { selectedVal = selected.val(); console.log("Selected Option is " + selectedVal); } if (selectedVal === "choiceB") { if ($("#choiceBstatus").val() === "true") { //show the dialog box $('#checklist_dialog').dialog({ modal: true, maxWidth: 600, maxHeight: 500, width: 600, height: 500, overlay: { opacity: 0.7, background: "black" }, buttons: { "SAVE": function() { $(this).dialog('close'); alert("Inside SAVE button which is clicked"); $("#choiceBstatus").val("false"); //isConfirmed = true; return true; }, "CANCEL": function() { $(this).dialog('close'); alert("You must complete / save the checklist before saving your form!"); // return false; } } }); /* e.preventDefault(); return false; */ } //end of if($("#choiceBstatus").val() == true ){ if ($("#choiceBstatus").val() === "false") { // return true; } } //end of if(selectedVal === "choiceB"){ //return false; /* if(isConfirmed){ return true; } else { return false; } */ }</pre> <pre class="brush:html;toolbar:false;">&lt;form id="orderForm" action="/mywebsite/order.htm" method="POST" onsubmit="return (validateOrderForm(this) &amp;&amp; validateDialogForm())"&gt; &lt;input id="choiceBstatus" name="choiceBstatus" type="hidden" value="true"&gt; &lt;div id="ownerDisplayFields" style="visibility: visible;"&gt; &lt;table class="noPrint"&gt; //some divs &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;div id="pManualTitle" style="display: block"&gt; &lt;table class="noPrint"&gt; &lt;tbody&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;div id="checklist_dialog" title="New Title" style="display: none;"&gt; &lt;p&gt;Checklist 1 goes here&lt;/p&gt; &lt;p&gt;Checklist 2 goes here &lt;/p&gt; &lt;/div&gt; &lt;table class="noPrint"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td align="center"&gt;&lt;br&gt; &lt;input class="button" type="submit" name="save" value="Save"&gt; - &lt;input class="button" type="submit" name="cancel" value="Cancel" onclick="bCancel = true;"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;div&gt;&lt;/div&gt; &lt;/form&gt;</pre> <p><br /></p>
P粉832212776
P粉832212776

全部回复(1)
P粉764836448

如评论中所提到的,当对话框显示时,您需要阻止表单提交,因为对话框不会阻塞UI。除非您停止它,否则它将继续提交。在您按下对话框中的按钮后,您可以真正提交表单。

现在的棘手之处在于,当您真正提交表单时,这也会再次触发onsubmit函数!一个好的方法是设置一个标志。请参见下面的伪代码,它应该基本上做到了您想要的。

<form id="orderForm"
      action="/mywebsite/order.htm"
      method="POST"
      onsubmit="return (validateOrderForm(this) && validateDialogForm(this))">
...
let real_form_submit = false;

function validateDialogForm(theForm){
  if(!real_form_submit) {
    $('#checklist_dialog').dialog({
      ...
      buttons: {
        "SAVE": function() {
          $(this).dialog('close');
          real_form_submit = true;
          theForm.submit()
        },
        "CANCEL": function() {
          $(this).dialog('close');
        }
      }
    });
  }

  return real_form_submit;
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号