CODEWITHSUNDEEP
javascriptjqueryhtmlforms
300
300

Reputation: 1031

How to conditionally submit a form?

I am using following form and submit button in my dynamic html page.

<form method=\"post\" class=\"my-form\" >

and

<input type=\"submit\" name=\"submitButton\" value=\"Submit\" id=\"button1\" />

What I am trying to do is when a particular input is provided by user, then display an alert box asking if user wants to submit the change or just stay on the same page without submitting the change.

I can display the alert box (with help from stackoverflow members) but along with window.alert what I should add to JavaScript so the form is not submitted if user clicks "cancel" on window.confirm and the form is submitted if user clicks "ok" on window.confirm?

JavaScript example is at fiddle

$(document).on('input', '.my-input', function(){
    $(this).closest('form').addClass('changed');
});

$(document).on('submit', '.my-form', function(e){
    if($(this).hasClass('changed')){
     var x=window.confirm("You have set a unique threshold for one or more states below. Are you sure you want to reset them all?")
    if (x)
        window.alert("Thresholds changed!")
    else
        window.alert("Thresholds not changed!")
    } 
    $(this).removeClass('changed');
    e.preventDefault();
});

Upvotes: 1

Views: 2220

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You just need to change your logic so that preventDefault() is only called when the user declines the confirm box. Try this:

$(document).on('submit', '.my-form', function (e) {
    if ($(this).hasClass('changed')) {
        var allowSubmit = window.confirm("You have set a unique threshold for one or more states below. Are you sure you want to reset them all?")
        if (!allowSubmit) 
            e.preventDefault()
    }
});

Example fiddle

If you click 'OK' you'll see that the form is submit (and a warning from jsFiddle to use a POST request - but that's normal), whereas clicking 'Cancel' does nothing.

Upvotes: 5

avenet
avenet

Reputation: 3043

You can also return false in your submit function handler, it should work. Check this question for an example.

Upvotes: 0

Related Questions