How can we check which button is clicked in a jQuery UI dialog box?

Question

I am trying to use jQuery UI to build a dialog box with Yes/No button for user confirmation. (This is because I want to make the UI uniform, as I have used jQuery UI to build the warning dialog boxes.) My intention is to ask for user confirmation if a large number (1000 or above) is submitted in the text box. So far my JavaScript code looks like this:

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

And my HTML looks like this:

<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>

The problem is, when the user clicks either of the Yes or No button, it will go back to the same page. However, if I change the 'return false' to 'return true' inside the 'if' part, once the Submit button is clicked, the page will go directly to result.php without waiting for the user to click the Yes or No buttons. Is there any way to check which button is being clicked by the user, so that the page will go to result.php after clicking Yes, but remaining at the current page after clicking No?

Your question is, for the most part, answered here: http://stackoverflow.com/a/3561141/1228942 — JoelPrz, Feb 25 '14 at 14:34
@JoelPrz Thanks, yes the solution solves my question. The only difference is that I need to replace `window.open(...);` with `theForm.submit();` so the form data can be passed. — LaBird, Feb 25 '14 at 15:20

Pugazh · Accepted Answer · 2014-02-25T15:14:28.957

jQuery dialog has the option buttons which can be used to describe the required buttons and it's action.

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

I believe in your above code, the lines involving the `btns` before the `if` can be removed. — LaBird, Feb 25 '14 at 14:51

score 0 · Answer 2 · answered Feb 25 '14 at 17:49

I don't have the "Reputation" to comment on your follow up so I had to post as an answer. Apologies for the breach in protocol.

If I understand your goal correctly, you just need to conditionally submit the form. I believe you can accomplish this by preventing the default behavior if the user decides the form submission is too long. Something like this:

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

I get your meaning here, this solution is to disallow a large number entered by user from being submitted. What I want is to ask for user confirmation, if the user clicks Yes, the large number will still be submitted. Indeed [the solution](http://stackoverflow.com/a/3561141/1228942) included in your comment above is good enough. — LaBird, Feb 25 '14 at 19:16

How can we check which button is clicked in a jQuery UI dialog box?

2 Answers2