Develop Reference

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

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.

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

Hitting button outside a form to call submit on Submit button in a form

Lets say I have a form with hidden submit button, and I input values in it, then I hit one button and dialog appears with Confirmation message and Confirm button. When I click on Confirm button, I click also on a hidden submit button from a form. Is that possible and how can I achieve it in JQuery?

In your jQuery use code like this:
$("#confirmationButton").on("click" , function () {
$("#submitButton").trigger("click");
});
or
$("#confirmationButton").on("click" , function () {
$("#form").submit();
});
Rememer that you have to set ids to your form and/or formSubmitButton.

Two button confirmations - Jquery

Currently I have a submit button that pops up a confirmation that allows the form data to be processed or not.
I need my other button on my form page called "Cancel" to have the same action. How could I expand this code to add a second confirmation to the same form?
these are my buttons on the form :
And this is my current code that works :
</script>
<script>
$(document).on('submit', "#signinform", function(e)
{
if (!confirm("By clicking 'OK' you will be placed in queue! Please take a seat."))
{
e.preventDefault();
return;
}
});
</script>
just to add on :
The submit is a submit BUTTON. the Cancel is just a href with a border around it.
also again
This works at the moment for just the submit button.
I need my other button on the form called "Cancel" to do the samething, as in if you hit Ok your submission data will be deleted, and then you will be returned back to the form. If you hit cancel then you will remain on the page.

I guess you simply need something like
$(document).on('click', "#cancelButtonID", function(e)
{
if (!confirm("By clicking 'OK' you cancel the submission and the form is cleared."))
{
e.preventDefault();
return;
}
else {
//Clear the form or perform whatever actions are needed
}
});
I think however that you may want to replace your cancel link with a proper <input type="reset"> button, as that will clear the form automatically when you let the default action happen. Then you should be able to get rid of the else section above.

Disabled form not submitting its fields

I am trying to disable the form on my site when the user click the submit button to stop duplicate submissions. Due to there being an input type file on the form the upload can take a while. So far I have tried this
$("#uploadForm").submit(function () {
$(":input", this).attr('disabled', 'disabled');
});
The trouble is that this stops the form sending any data to the web server. Is there some way to disable the form and still have it post the data.

Let it do the submit before disabling:
$("#uploadForm").submit(function () {
setTimeout(function(){$("#uploadForm :input").attr('disabled','disabled');}, 10);
return true;
});

I wouldn't disable the input button, this is confusing for the user. I would just overlay the form with a "Uploading.." message. See jQuery BlockUI plugin.

how about using a progress bar when submit is clicked..
http://plugins.jquery.com/project/loading

Disable the submit button not the form

What about just disabling the submit button?

How can I show a confirmation thickbox with the selection after user presses submit?

How can I show a confirmation modal dialog with the information from the form so that user can confirm what they selected in the form and it submits only if the user says so?
confirm.$("#submit-button").click( function(){
if (validator.form()==true) {
tb_show("Countdown", "are_you_sure.html?height=100&width=200&modal=true", "");
//some check here maybe?
}
return false;
});

tb_show can display a hidden DIV, so perhaps the best way is to fill that div with the stuff you want the user to confirm and then simply show that. The DIV could hold a YES button that when clicked performs the actual submit
<script>
$('#confirmDiv').html("Are you sure you want to...");
tb_show("Countdown", "#TB_inline?height=100&width=200&inlineId=confirmDiv");
...
<body>
...
<div id='confirmDiv' style='display:none'></div>