I am using Gravity Forms in combination with a custom jquery code.
The jquery code assigns a validation to the form before it is submitted and fires a sweetalert if something is missing.
After clicking the submit button of the form the first time, the jquery validations work and the alert is fired.
Because there are submission errors, gravity forms now shows the validation errors too.
When filling out all required fields and clicking on the same submit button again, the jquery validation is not assigned to the button any more and no alert is fired. Why is that? The id of the button is still the same.
The JS code, it works fine, the only problem is, that its not assigned anymore to the submit button of the gravity form when the form is in the validation erros state.
jQuery( "#gform_submit_button_3" ).on('click', (function() {
//alert ("test");
var jugend = jQuery("#input_3_5").val();
var trainer_vorname = jQuery("#input_3_6_3").val();
Solution:
Prevent the Form to be submitted by the following code:
jQuery(document).on( 'click', '#gform_submit_button_3', function (e) {
e.preventDefault();
//do what you want with jquery/JS with the form
Ok, i found the solution by myself.
With the following JS (added to the wp themes JS section) i can prevent the Gravity Form to be submitted.
jQuery(document).on( 'click', '#gform_submit_button_3', function (e) {
e.preventDefault();
After that, i use JS to do some form validations. If the form is OK, i am sending the form data with a ajax post request to the server.
Keep in mind that the normal submission hooks are not working when preventing the form submission.
Related
I have worked some recapthca into my web form and want to maintain the client side form validation. As the form currently is
<form action="ajax/ajax_repSubTesting.php" method="POST" name="submitform" onSubmit="checkform(this)">
checkform() is a series of if/else statements to inform the user that a data field is either blank or not valid. Problem is that once the submit button is clicked , the checkform is called popping up an error window, and once closed the ajax script is called.
How would I code this so that the form action is dependent on everything in checkform() validated properly?
Returning false from an inline onsubmit event handler will will cancel the form submission. The checkform function should return false (as appropriate) for invalid form data
function checkform () {
if (!valid) { return false; }
// ..
}
and the returned value must be propagated through the inline event handler
<form .. onsubmit="return checkform()">
^^^^^^
See also
How do I cancel form submission in submit button onclick event?
How to prevent form from being submitted?
(Also, 'ajax' is normally called via XHR, not form submission.)
try adding id to the submit button and yhe form itself.
Then at the beginning of the validation method add
event.preventDefault();
Which will cancel the form submition.
Then at the end of the validation method if the form is valid add the next jQuery method:
$('form').submit() it will trigger form submition.
I am submitting a form using JQuery and an event listener bound to a div (not an input field) and I am trying to prevent multiple submits, so the customer does not get overcharged. I am trying to accomplish this by removing the submit-button class of the clicked div, so the next time the user clicks it, JQuery won't listen to the event that is associated with the submit-button preventing multiple submits.
Using the implementation below however, for some reason, does not prevent multiple submits, as intended.
HTML
<div class="submit-button button-style">Submit</div>
JQuery
$(".submit-button").click(function(){
$(this).removeClass("submit-button");
//**submit form**
});
NOTE: I must stick to a solution that uses the html above, so solutions using an input element of type submit, will not be useful.
I appreciate any suggestions on how to make this work. Many thanks in advance!
You can make use of .one() to prevent it from firing multiple times -
$(".submit-button").one('click',function(){
//**submit form**
});
http://api.jquery.com/one/
Edit :
In case of error :
function submitForm(){
//**submit form**
$.post('submit.php').error(function(){
// rebind event on error
$(".submit-button").one('click',submitForm);
});
}
$(".submit-button").one('click',submitForm);
You could use something like:
$('something').one('click', function(){
// submit code
});
Which will only fire once.
A significant portion of users don't bother clicking the submit button to submit a form - there's other more convenient ways, like hitting the enter key when the cursor focus is on a form field.
A more robust approach is to block the form via the forms submit event, and maintain a variable to keep track of the form submission state.
var submitted = false;
$("form#myForm").submit(function(evt){
if (submitted) {
evt.preventDefault();//stops form submission
return;
}
submitted = true;
});
I omitted form validation for this example.
I am trying to debug a javascript problem, but the problem happens when submitting a form. I see a javascript error briefly in the console window, then the form gets submitted.
Is there a way to make the default not to submit the form, so I can see the script error before I get sent to the form submit page?
The code is using jquery with a
$('#form').on('submit', function() {
// validation code with script error somewhere
});
$('#form').on('submit', function(e) {
e.preventDefault();
// validation code with script error somewhere
});
I have a form which uses GET as the method. I want to do some js validation on the form. I bind the event using
document.forms[0].onsubmit = function(){return myObj.myFrm.isFormValid();}.
In Firefox it works the first time I click on submit but after a while if I click it again the form submits even though I've not changed and data.
Any ideas?
Simply adding an event handler doesn't stop it from submitting.
You need to add in preventDefault();
(Documentation)
I have a form loading inside my page and there is a button out side this form its function is to submit this form.
$('#MyForm').submit();
I want a way to write a submit complete function, means to know that the form successfully/completely submitted.
I tried the jquery form plugin, but didn't work, i think because the submit come from a button outside the form.
anyone knows any different ways?
Actually, you can use the jquery form plugin, just use the ajaxSubmit() method.
Documentation for the jQuery form plugin.
// setup the form, and handle the success
$('#myFormId').ajaxForm({
success: function() {
// do what you are looking to do on
// success HERE
}
});
// setup submission on some random button
$('#someButton').click(function() {
// submit the form from a button
$('#myFormId').ajaxSubmit();
});