Question

我正在尝试使用jQuery UI构建一个带有Yes / No按钮的对话框，以便用户确认。（这是因为我想使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'，则单击Submit按钮后，该页面将直接转到result.php，而无需等待用户单击Yes或No按钮。有没有办法检查用户点击了哪个按钮，以便在单击“是”后页面将转到result.php，但在单击“否”后仍保留在当前页面？

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;
  }  
});

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

2 个答案: