jQuery Confirm Before Submit

Question

<form action ="/submit-page/" method='post' class="editable">
    <fieldset>
    <select name="status" id='status'>
        <option value="Submitted">Submitted</option>
        <option value="Canceled">Canceled</option>
              <option value="Application">Application</option>
    </select>
          <input type="submit" name="submit" value="SAVE">

</form>

I have a form above: When I click on the drop down value "Canceled" and hit the Save button I want to give alert box with a warning message with a Yes and No button.

If the user cicks on Yes, take him to the submit-page as desired in the form action parameter. if the user clicks No, stay on the same form page without refreshing the page. Can this be done in jQuery?

Answer 1

Hmm... theres is a problem with the other answers on here: they don't work against your HTML.

There's a bug in jQuery (I assume it's a bug), where if an element on your form has a name of submit , then triggering the submit event of the form will not work.

You will need to remove the name attribute from your input type="submit" button or simply give it a name other than "submit".

HTML

<form action ="/submit-page/" method='post' class="editable">
  <fieldset>
    <select name="status" id='status'>
      <option value="Submitted">Submitted</option>
      <option value="Canceled">Canceled</option>
      <option value="Application">Application</option>
    </select>
    <input type="submit" value="SAVE" name="submit-button"/>
  </fieldset>
</form>​

jQuery

$('#status').on('change', function() {

    var $this = $(this),
        val = $this.val();

    if (val === 'Canceled' && confirm("are you sure?")) {
        $this.closest('form').submit();
    }
});​

PHP

$submitted = !empty($_POST['submit-button']);

if($submitted)
{
    // Submit button was pressed.
}
else
{
    // Form was submitted via alternate trigger.
}

Example

Working: http://jsfiddle.net/xixonia/KW5jp/

Not Working: http://jsfiddle.net/xixonia/KW5jp/1/

Edit

You have since updated your question, and this answer is no longer a valid solution for what you are looking for. Instead, look at Chris Platt's answer .

Edit Again

This is a modified version of Chris Platt's answer . It simply waits until the DOM is ready (elements are loaded) before it executes the logic contained within the first $(...) .

$(function() { // this first jQuery object ensures that...

    /// ... the code inside executes *after* the DOM is ready.

    $('form.editable').submit(function(){
        if ($('#status').val()=='Canceled') {
            if (!confirm('Warning message here. Continue?')) {
                return false;
            }
        }
    });

});

Answer 2

$('form.editable').submit(function(){
    if ($('#status').val()=='Canceled') {
        if (!confirm('Warning message here. Continue?')) {
            return false;
        }
    }
});

Answer 3

yes, it can be done:

$('#status').change(function(){
   var val = $(this).val();
   if( val == 'Submitted' ) {
     $('.editable').submit();
     return false;
   } else if (val == 'Canceled')
   {
      var answer = confirm('are you sure');
      return false;
   } else {
    ... 
   }
});

This, as opposed to Chris Pratts solution will do it, as soon as you change the selected value in the dropdown box. His will do it, once you click the submit button.

Answer 4

The most direct method to intercept the form submission in jQuery is like this:

$("form.editable").submit(function(){
    if(confirm("Really submit the form?")) {
        return true;
    } else {
        return false; //form will not be sumitted and page will not reload
    }
});

See http://jqapi.com/#p=submit for more detail.