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.
Related
I try to make a confirm popup that going to jump when user click on a button of form.
If the user click on ok in the popup, the form goting to submit.
Its must to be dynamic becuse i have a lot of forms in one page and all form must to get the confirm popup.
I replaced the submit button with a normal button and when the user click on the button the confirm jumping.
<input type='button' name='submitButton' onclick="openPopup(this);">
Its work amazing but when the user into a text input and press on eneter its not submit the form.
What can i do?
Use following JS:
<input type='submit' name='submitButton' onclick="openPopup(this);">
If you can't use a submit button in your form you just need to handle this in the keydown event in your form inputs to check if Enter key is pressed and click your button dynamically:
$("#formID").find('input[type=text]').on('keydown', function (e) {
if (e.keyCode == 13) {
$('[name="submitButton"]').click();
}
});
Note:
I used formID as id of your form you just need to replace it with your form id.
$(document).ready(function() {
$('input').keypress(function(data) {
if (data.keyCode == 13)
data.target.form.submitButton.click();
});
});
When you accept confirmation then fire this event
$('[name="submitButton"]').click();
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.
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.
I have a form that uses jQuery Validate. You click the Submit button, form gets validated and submitted via ajax. I want to add a step to this process.
I want to check for the presence of a value, say x. If x is NOT in the form I want to go ahead and submit it as I already do. If it IS in the form I want to open a modal window that requests further info THEN submits the form with that extra info added into the request.
Currently I can get the modal to trigger but then the form just continues with the submission. How do I get the form submission to pause while the modal is dealt with by the user?
jQuery Validate has a "success" option that is called after successful validation (which is when I want to check for triggering the modal) but that still doesn't pause execution.
In a nutshell: How do I validate a submitted form, check if the value x is present, if it is not present submit the form but if it is present pause the submission, pop up a modal window, let the user fill in some more data (and presumably click a "done" or "cancel" button of some sort), add that to the collected form data and then submit the lot? The pausing submission part has me stumped.
Use submit() on the first form...
$('#form1').submit(function() {
// The below validation goes in here
});
Validate it...
$("#form1").validate({
// Whatever rules you want to validate by
});
Check if the form is valid...
if($('#form1').valid()) {
// Branching on x, example below, will go in here
} else {
// It's not valid, stop the submission
return false;
}
Branch on x. If present, open the modal, if not return true to submit the form as is
if (x !== undefined) {
// Here is where you also need to pass the other form data to the modal
// append hidden text fields to the form and populate with the values
// Open your modal window, then stop the default submit process
$('#themodalwindow').openModal();
return false;
} else {
// No x so submit the form as is
return true;
}
Now you have to submit the form in the modal...
$('#form2').submit(function() {
return true;
});
If you appended the data collected in form1 to form2 then submitting the form will include everything you need. BTW, you can cache some stuff in that but this is the gist of it.
You can't pause a form submit, but you can cancel it if you return false on the form's onsubmit event. After you get your additional data from the modal window, simply add the data to the form and resubmit it via javascript.
Hook onto the form's submit function:
$('form').submit(function() {
if (x !== undefined) {
$('#dialog').show();
return false;
}
});
Quick question: How do i check if a submit button is clicked in a function.
explained question:
ok, so I have a validate script for my sign-up page. The validate function is run onblur of every input (after the submit button has been clicked first).
However, the validate script not only gives the inputs a red background if the correct information hasn't been entered, but it also displays an alert message.
My problem is: I only want to display the alert message if the submit button is clicked, otherwise i just want to do change the background color. So how do I check if a submit buttons is clicked, in a function.
I could just have two different functions, one to be run for all the inputs. and one to be run for the submit button.
Register the submit event to your form to validate before it is submitted.
Added: You should register the function in document ready event.
$(function(){
$("#myformid").submit(function()
{ if(!highlightNshowError())//your function to validate the form, return false if validation failed
return false; //stop submitting the form
else
return true;
});
});
or simply
$(function(){
$("#myformid").submit(function()
{
return highlightNshowError();
});
});