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

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

• php
• javascript
• jquery

Share Improve this question Follow edited Feb 24, 2012 at 19:47 cwharris 18.1k44 gold badges4545 silver badges6464 bronze badges asked Feb 24, 2012 at 18:38 newbienewbie 1,03311 gold badge2222 silver badges4848 bronze badges 3

• Do you mean a confirm box like mentioned here: w3schools./js/js_popup.asp Or something like: forum.jquery./topic/jquery-confirm-box – Simon Wang Commented Feb 24, 2012 at 18:40
• you should have posted this as the answer :) I was tempted... – mindandmedia Commented Feb 24, 2012 at 18:45
• Tutorial here: Modal Confirmation Dialog on Form Submit. It includes a plain js example. – jk. Commented Feb 24, 2012 at 18:46

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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 aname 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/xixonia/KW5jp/

Not Working: http://jsfiddle/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;
            }
        }
    });

});

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

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.

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./#p=submit for more detail.