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

});