I have a form with two submit buttons.
I want the user to be presented with a confirm window before deleting and if agreeing then submitting the form for deletion
<script>
$(document).ready(function(){
$("#delete").on('click', function (event){
var form = $('form');
event.preventDefault();
if(confirm("You cannot revert this action. Item will be deleted pemanently. Delete anyway?")){
form.submit() //which button will it assume it was used?
}
});
});
</script>
Rather that stopping form from submitting always, you can prevent form only after confirm alert.
<script>
$(document).ready(function(){
$("#delete").on('click', function (event){
var form = $('form');
if(!confirm("You cannot revert this action. Item will be deleted pemanently. Delete anyway?")){
event.preventDefault();
}
});
});
</script>
Related
I have the following code on my login page for Submit.
$("form").submit(function()
{setTimeout(function(){
alert("Thank you for requesting an account. Once your request is reviewed by an administrator, you will receive an email with your login credentials."); location.reload();
submit = true;}, 3000);
});
The issue is I have another Submit button, and this message pops up on clicking that button as well. How can i fix this?
I want one submit to show this popup and the other submit button to login to the application without showing this popup.
Instead of doing the alert on the submit of the form do it on the click of buttons and then call submit.
$( "#firstButton" ).click(function() {
alert('whatever');
$( "#form_id" ).submit();
});
$( "#secondButton" ).click(function() {
$( "#form_id" ).submit();
});
Also, to prevent the buttons within your form from automatically submitting change their types from type="submit" to type="button". This way they will not trigger the submit automatically. Instead you will only trigger the submit explicitly inside your click functions.
use separate button IDs and call a function to submit the from. also provide unique ID for the form because using the form tag will trigger the submit function of all form elements
$('#buttonid').click(function(e){
e.preventDefault();
submitFunction(); }); // the function to submit the from with id #formID
function submitFunction(){
$("#formID").submit(function()
{setTimeout(function(){
alert("Thank you for requesting an account. Once your request is reviewed by an administrator, you will receive an email with your login credentials."); location.reload();
submit = true;}, 3000);
});
}
You must not use $("form") because it will match all form elements.
You should assign an ID or class attribute to your forms so that you would match only those specific elements.
$("#form-id").submit(function() ...
^^^^^^^^
And your HTML form:
<form id="form-id">
I'm trying to submit a form to Campaign Monitor. They offer this code example to POST via Ajax.
This is my code for my multi-step modal.
var next_step = false;
var final_step = false;
$('.next').on('click', function(e){
e.preventDefault();
if (next_step) {
$('#step-1').slideUp(function(){
$('#step-2').slideDown();
$('.next').html('Submit');// Change button text to submit
final_step = true;
});
}
next_step = true;
if (final_step) {
$('#myform').submit(function (e){
alert('submit started'); //This never fires unless I remove the preventDefault();
e.preventDefault();//But if I remove this, the page will refresh
$.getJSON(
this.action + "?callback=?",
$(this).serialize(),
function (data) {
if (data.Status === 400) {
alert('error');
} else {
alert('success');
}
})
});
}
});
On the last step of the form, I check whether final_step is true, if so, go ahead and submit the form via ajax.
The problem is that it just doesn't do anything? But if I remove the e.preventDefault(); from the $('#myform') it will post the form as normal and re-direct you to the form URL.
How can I fix this?
What you are doing currently is wiring up an onsubmit handler. Not invoking submit.
$('#myform').submit(function (e){ });
...is the same thing as...
<form action="#" method="post" onsubmit="return someFunction()">
... which is the same as ...
$('#myForm').on('submit', function(e){});
You are never submitting the form.
What you are looking for is to use Ajax to post the data to the server and not submit the form.
You can do that like this:
$.ajax({
type: "POST",
url: "SomeUrl.aspx",
data: dataString,
success: function() {
//display message back to user here
}
});
dataString would be replaced with the values you posting.
$('#myform').submit(function (e){
just registers an event handler and attaches it to the "submit" event of "myform", it doesn't actually cause a submit. It means you're saying you'd like this function to be run every time the form is submitted. This handler function should be outside your $('.next').on('click', function(e){ block. Just below it will do.
If, within the $('.next').on('click', function(e){ block you wish to cause the form to be submitted, write:
$('#myform').submit();
This will actually trigger the form submission.
See https://api.jquery.com/submit/ for more info on what the different method signatures of "submit" actually do.
This line: $('#myform').submit(function (e) { registers the function you pass as an argument as a handler to the submit event of the form, and does not invoke a submit action. I'm not sure whether or not this is the problem, though I would recommend preventDefault() outside of the wizard flow
(e.g.
$(document).ready(function() {
$("#form").submit(function(e) {
e.preventDefault();
}
});
)
Then inside the if(final_step) just do the post without worrying about the form.
Also, you'd do good in not setting a submit button inside the form if you do not wish to use it's functionality. Just create an element with a click event that sends the data rather than registering to the submit event of the form.
I'm not sure but I always do $('#form').submit() after click in element and catch this event (e.g. by $('#form').on('submit', function () { .. });) in other place.
I have a js-code:
$(document).on('click', '#form #submitForm', function(e){
$('#form').submit();
return false;
});
$(document).on('submit', '#form', function(e){
// ajax request on submit form
return false;
});
where #form is the id of form, #submitForm is the id of submit-button inside this form.
I use .on() because of fact that my form is dynamically generated by ajax requests on submit.
Some people with Google Chrome on Win7 complaints about this isn't working and by pressing #submitForm just redirect to "form action"-url occurs.
I have Google Chrome on Win7 and it's working perfectly.
Want do I missing or did wrong?
When you submit a form, this will redirect to the url action. If you dont want to redirect, you have to create an ajax that "submit " the form
What you need is to stop the default behaviour of form when submit button is pressed.
Change your code to this:
$(document).on('submit', '#form', function(e){
// ajax request on submit form
e.preventDefault();
e.stopPropogation();
return false;
});
I have modified this script http://jsfiddle.net/mblase75/xtPhk/1/ to submit a form.
The goal is to disable submit button until all form fields have been validated.
This works fine the first time but since, my form does not have a action jquery handles the submit as well.
So after I submit the form, the submit button does not get disabled. I have to refresh the page in order for it to get disabled.
What I am trying to do is, after every post.. the submit button should get disabled, without refreshing the page.
Is this possible ?
It does work if my form has a action page. but I dont want that
Form Submit:
$(document).ready(function() {
$("#paForm").submit(sendForm)
});
function sendForm() {
$.post('pa_submit.cfm',$("#paForm").serialize(),function(data,status){
$("#result").html(data)
});// end of submit
$( '#paForm' ).each(function(){
this.reset(); // end of reset
});
return false
}
Disable Submit Button until all fields have been validated
$(document).ready(function() {
$form = $('#paForm'); // cache
$form.find(':input[type="submit"]').prop('disabled', true); // disable submit btn
$form.find(':input').change(function() { // monitor all inputs for changes
var disable = false;
$form.find(':input').not('[type="submit"]').each(function(i, el) { // test all inputs for values
if ($.trim(el.value) === '') {
disable = true; // disable submit if any of them are still blank
}
});
$form.find(':input[type="submit"]').prop('disabled',disable);
});
});
I am using a jquery function to post my values to a database. My form does not have a action.
http://jsfiddle.net/bC6GF/
Here is the jsfiddle page, which shows my issue.
Why not disable the button after submit?
You already have the submission function in place:
function sendForm() {
$.post('pa_submit.cfm',$("#paForm").serialize(),function(data,status){
$("#result").html(data)
});// end of submit
$( '#paForm' ).each(function(){
this.reset(); // end of reset
});
return false;
}
Extend with a call to the submit button to disable it:
function sendForm() {
$.post('pa_submit.cfm',$("#paForm").serialize(),function(data,status){
$("#result").html(data)
});// end of submit
$( '#paForm' ).each(function(){
this.reset(); // end of reset
});
$("#paForm").find(':input[type="submit"]').prop('disabled', true);
return false;
}
That should disable the button after each submit.
Unrelated but something you may want to look into are the jQuery JavaScript Style Guides and cleanup some of your code.
I would like to insert <div><p>Test</p></div> in another DIV at the top. So I try
$(document).ready(function(){
$('form').live('submit', function(){
var aform = $(this);
$('#w').append('<div><p>Test</p></div>');
});
});
HTML looks like
<div id="w">
<div><p>Test</p></div>
</div>
When I do that, it gets inserted, but goes away right after.
Try click on the Save button in this example.
http://jsfiddle.net/Rv2w7/
Use prepend() and cancel the submit:
$(document).ready(function(){
$('form').live('submit', function(){
var aform = $(this);
$('#w').prepend('<div><p>Test</p></div>');
return false; //cancel `real` submit
});
});
The page gets reloaded on submit. That's why the dynamically inserted tag disappears.
You need to cancel the default action to prevent the form from submitting:
$(document).ready(function() {
$('form').live('submit', function() {
var aform = $(this);
$('#w').append('<div><p>Test</p></div>');
return false;
});
});
Updated example: http://jsfiddle.net/Rv2w7/2/
return false; or event.preventDefault() is required to prevent the default action with live().
Because your form gets submitted each time, you need to prevent the default action:
$(document).ready(function(){
$('form').live('submit', function(event){
var aform = $(this);
$('#w').append('<div><p>Test</p></div>');
event.preventDefault();
});
});
After you click the save button the page submits, that's why its 'going away'. That happens because modifications on the current HTML only last until the page changes or refreshes, because a new GET will be issued to the server and the unchanged version of the HTML will be retrieved, overwriting your changes.
To save something permanently to your HTML you will need to use a server-side programming language; make your program retrieve previously saved strings to a cookie or session; make your program load data from a database, etc.