我们如何检查在 jQuery UI 对话框中单击了哪个按钮？

Question

我正在尝试使用 jQuery UI 构建一个带有是/否按钮的对话框以供用户确认。 （这是因为我想使UI统一，因为我使用jQuery UI构建了警告对话框。）我的意图是如果在文本框中提交大量（1000或以上），请要求用户确认。到目前为止，我的 JavaScript 代码如下所示：

function checkclick(button1, button2, theForm) {
   var val;
   val = theForm.mybox.value;
   v = parseInt(val) || 0;
   var btns = {};
   btns[button1] = function(){ 
      $(this).dialog('close');
   };
   btns[button2] = function(){ 
      $(this).dialog('close');
   };

   if (v >= 1000) {
      $('#dialog').dialog({
         autoOpen: true,
         modal:true,
         buttons:btns
      }); 
      $('#dialog_link').click(function () {
          $('#dialog').dialog('open');
      });
      return false;
   }
   return true;
}

我的 HTML 看起来像这样：

<div id='dialog' title='Note' style='display:none'>
<p id='dialog_link'>This is a very large number. Are you sure?</p>
</div>

<form name='myForm' action='result.php' method='post' 
 onsubmit="return checkclick('Yes', 'No', this)">
<input type='text' name='mybox'>
<input type='submit'>
</form>

问题是，当用户单击“是”或“否”按钮时，它会返回到同一页面。但是，如果我在“if”部分将“return false”更改为“return true”，一旦单击“提交”按钮，页面将直接转到 result.php，而无需等待用户单击“是”或“否”按钮.有什么办法可以检查用户点击的是哪个按钮，这样点击Yes后页面会进入result.php，点击No后仍然停留在当前页面？

Answer 1

jQuery 对话框有buttons 选项，可用于描述所需按钮及其操作。

function checkclick(button1, button2, theForm) {
   var val;
   val = theForm.mybox.value;
   v = parseInt(val) || 0;

   if (v >= 1000) {
      $('#dialog').dialog({
         autoOpen: true,
         modal:true,
         buttons:{
            "Yes":function() {
               alert('Yes has been clicked'); //Your coding here
            },
            "No": function() {
               $( this ).dialog( "close" );
            }
         }
      }); 
      $('#dialog_link').click(function () {
          $('#dialog').dialog('open');
      });
      return false;
   }
   return true;
}

Answer 2

我没有“声誉”来评论你的跟进，所以我不得不发布作为答案。为违反协议道歉。

如果我正确理解您的目标，您只需有条件地提交表单。如果用户认为表单提交时间过长，我相信您可以通过阻止默认行为来实现这一点。像这样的：

<form id="target" action="destination.html">
  <input type="text" value="string value">
  <input type="submit" value="Submit">
</form>

$( "#target" ).submit(function( event ) {
  if (//result of dialog is false) {
    event.preventDefault();
  } else {
    return;
  }  
});