I am using jQuery to add a "disabled" attribute to my submit button once it is clicked.
$('#submit-button').click(function () {
setTimeout(function () {
$('#submit-button').attr('disabled', 'disabled')
}, 50);
})
I am using gravity forms and am using AJAX to produce a spinner image when it's clicked, that's why I have the setTimeout function.
This works the first time the submit button is clicked. If the entry passes validation then it's no problem, the disabled attribute is loaded and then goes to the confirmation page.
The issue is when the validation fails, the page refreshes and shows the errors (e.g. this was not filled out correctly) and then click the submit button does not fire the jQuery click function to add the disabled attribute
Gravity forms gform_page_loaded works - https://docs.gravityforms.com/gform_page_loaded/
I put the code in a function and used
jQuery(document).on('gform_page_loaded', function(event, form_id, current_page){
myFunction()
});
So now the function runs after the AJAX call
Related
I'm relying on another plugins javascript that has code for a specific submit event that submits the form after some validation.
I'm not able to change that validation without hacking into that code.
Therefore I've came up with a hack without hacking into that plugin's code.
I'm changing the input type from submit to button type so I can do my own validation without having to take in account for action that is triggered upon submit.
There are two radiobuttons with class .give-gateway. Basically I'm doing this.
HTML (element in form):
<input type="submit" class="give-submit give-btn" id="give-purchase-button"
name="give-purchase" value="Donate Now" data-before-validation-label="Donate
Now">
jQuery:
$('body').on('click', '.give-gateway', check_gateway);
function check_gateway(id) {
//Value from which radiobutton is selected
if (current_gateway == 'swish') {
alert('changing button from ORIGINAL to new. NOW IT SHOULD BE
TYPE BUTTON!!!');
$('#give-purchase-button').prop('id', 'give-purchase-button-
new').prop('type','button');
$('body').on('click touchend', '#give-purchase-button-new', function
(e) {
alert('NEW give purchase button clicked');
//some code...
});
}
else {
alert('changing button from NEW to original. NOW IT SHOULD BE TYPE
SUBMIT!!!');
$('#give-purchase-button-new').attr('id', 'give-purchase-
button').prop('type','submit');
}
}
This works the first time:
From Submit to button
From Button to Submit
From Submit to Button
Step 3 (NOT WORKING (first click on swish gateway work but second time it does not change from submit to button)!? **Why?) **
I've also tried to programmatically add onsubmit to form but the issue there is that other plugins jquery code has a listener for click event on the actual submit - button which means that that code are executed first anyway. I don't want that to happen.
I've figured it out why now. When I click on another gateway the form is loaded with other content. When I go from swish to paypal. It loads content that is dependent of paypal stuff and creates a new submit - button. If I just change from type submit to button it does not affect anything because that change is made before the actual content is loaded (through ajax) and therefore creates a new submit button.
My contact form is not working correctly. When I enter wrong data, all is working as it should, but when data is correct the input fields are not showing. I need to click them with mouse and then they start showing.
This is what I have tried so far:
$('#submit_btn').click(function() {
if($('#register').find('.wpcf7-mail-sent-ok').length > 0){
$('#name-152').val('Full Name').show('slow');
$('#email-152').val('Email').show('slow');
$('#phone-152').val('Phone Number').show('slow');
}
});
please note that class .wpcf7-mail-sent-okappears only when form is filled submitted and correctly. What confuses me the most is that .find cannot find the descendant .wpcf7-mail-sent-ok, and it is one of the descendants.. I have tested it with console.log(); and alert();
This is Wordpress plugin - Contact Form 7
Any ideas?
The "Contact Form 7" plug-in acts on the submission event to do its magic, like manipulating styles and replacing the standard form submission behaviour by an AJAX-style submission.
As this might happen after the button's click event, and probably on the form's submit event, your code runs too soon.
One way to get around this, is to delay the execution of your code with setTimeout:
$('#submit_btn').click(function() {
setTimeout(function () {
if ($('#register').find('.wpcf7-mail-sent-ok').length) {
$('#name-152').val('Full Name').show('slow');
$('#email-152').val('Email').show('slow');
$('#phone-152').val('Phone Number').show('slow');
}
}, 100);
});
Please pardon me if it is a basic thing, because I am a new learner of Javascript/jQuery. I have been trying to disable submit button to disable multiple submits. I have come across multiple solutions here as well, but all those used specific form name. But I wanted to apply a global solution for all forms on all pages so I dont have to write code on each page, so I put this in footer, so all pages have:
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
This code works on all the forms in all pages as I wanted, but if there are HTML5 required fields in form and form is submitted without them, of course notifications are popped but button still gets disabled. So, I tried with this:
$('input:submit').click(function(){
if ($(this).valid()) {
$('input:submit').attr("disabled", true);
$('.button').hide();
});
});
But this does not work. Kindly help me so that jQuery only disables when all HTML5 validation is done. Thanks
Try this and let me know:
$('input:submit').click(function(){
if ($(this).closest("form").checkValidity()) {
$('input:submit').attr("disabled", true);
$('.button').hide();
});
});
Ruprit, thank you for the tip. Your example did not work for me (in Firefox), but it helped me a lot.
Here is my working solution:
$(document).on("click", ".disable-after-click", function() {
var $this = $(this);
if ($this.closest("form")[0].checkValidity()) {
$this.attr("disabled", true);
$this.text("Saving...");
}
});
Since checkValidity() is not a jQuery function but a JavaScript function, you need to access the JavaScript element, not the jQuery object. That's the reason why there has to be [0] behind $this.closest("form").
With this code you only need to add a class="disable-after-click" to the button, input, link or whatever you need...
It is better to attach a handler to the submit event rather than a click event, because the submit event is only fired after validation is successful. (This saves you from having to check validity yourself.)
But note that if a submit button is disabled then any value they may hold is NOT submitted to the server. So we need to disable the inputs after form submission.
The question is compounded by the new HTML5 attribute form which allows associated inputs to be anywhere on the page as long as their form attribute matches a form ID.
This is the JQuery snippet that I use:
$(document).ready( function() {
$("form").on("submit", function(event) {
var $target = $(event.target);
var formId = $target.attr("id");
// let the submit values get submitted before we disable them
window.setTimeout(function() {
// disable all submits inside the form
$target.find("[type=submit]").prop("disabled", true);
// disable all HTML5 submits outside the form
$("[form=" + formId + "][type=submit]").prop("disabled", true);
}, 2); // 2ms
});
});
---[ WARNING ]---
While disabling submit buttons prevents multiple form submissions, the buttons have the unfortunate side effect of staying disabled should the user click the [Back] button.
Think about this scenario, the user edits some text, clicks submit (and get redirected to different page to view the edits), clicks back to edit some more, ... and ... they can't re-submit!
The solution is to (re-)enable the submit button on page load:
// re-enable the submit buttons should the user click back after a "Save & View"
$(document).ready( function() {
$("form").each(function() {
var $target = $(this);
var formId = $target.attr("id");
// enable all submits inside the form
$target.find("[type=submit]").prop("disabled", false);
// enable all HTML5 submits outside the form
$("[form=" + formId + "][type=submit]").prop("disabled", false);
});
});
Try this
`jQuery('input[type=submit]').click(function(){ return true;jQuery(this).prop('disabled','disabled');})`
run this code on successful validation of the form
The custom CSS class .btn-loading disables the button and sets its text to loading state:
$(document).on('click', '.btn-loading', function() {
var btn = $(this);
btn.button('loading');
// Fail-safe for buttons that get stuck in the loading state sometimes.
setTimeout(function() {
Rollbar.error("Button stuck");
btn.button('reset');
}, 10000);
});
// Be sure to remove any loading state on page refresh
$(document).on('ready page:load', function() {
$('.btn-loading').button('reset');
});
Example button
button type="submit" class="btn btn-primary btn-loading" data-loading-text="Processing..." Continue
When the button is pressed, text is changed to 'Processing...' and the button is disabled preventing multiple submits.
However, sometimes in development and production, the button gets stuck in the loading state and for some reason does not cause the submit and/or rendering of the new page. The setTimeout is firing multiple times a day on the production server. We are having hard times producing the problem on the development consistently.. it happens randomly now and then.
Rollbar's statistics shows that it's not browser specific nor a single button+action that's causing it. So the cause is not a slow server response either.
Any idea what might be causing this and how to fix it?
I faced similar problem some time back and solved the same with a different approach. Try to follow the below steps to solve your problem.
HTML:
Change your button type from “Submit” to “Button”. This will give you full control to execute your scripts.
<button type="button" class="btn btn-default" id=”SubmitButton”>Submit</button>
JQUERY:
On Button Click, you need to disable the button. This will immediately stop users to click again. Then you can change the button text to "Processing". Below script will guide you make it happen.
$(function () {
$('#SubmitButton').click(function (e) {
e.preventDefault();
//Disable Button to avoid multiple clicks
$(this).attr("disabled", true);
// Change the button text to “Processing”
$(this).text(‘Processing’);
// Write Your Validation Scripts
// If Validation Fails - $(this).text(‘Submit’); $(this).attr("disabled", '');
// Else Submit Form
//Submit the Form
$("#targetForm").submit();
})
})
To prevent multiple submit you can use $.one() function also. and add remaining logic.
When the button is pressed, text is changed to 'Processing...' and the
button is disabled preventing multiple submits.
-- Note that there's not part in your code snippet that disables the button.
// Fail-safe for buttons that get stuck in the loading state sometimes.
setTimeout(function() {
// if(stuck){
Rollbar.error("Button stuck");
btn.button('reset');
// } // end-if
}, 10000);
-- It looks like your fallback will always be executed. Shouldn't be executed when the button is stuck?
The setTimeout is firing multiple times a day on the production
server.
-- Because your button is never disabled, and because there is no condition restricting it from firing on being clicked.
Moreover, there's no jQuery method like button(). It looks like you're using jQueryUI, which you should have mentioned as well. But jQueryUI + Bootstrap seem like a weird combination, to me.
I am using a jQuery validation engine by position absolute. The function gets triggered on submit and the function is called when dom is ready.
Position Absolute Function trigger
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#formID").validationEngine();
});
The above function is a basic initialization of the function. When the dom is ready, the function is triggered and when the form with FormID is submitted it will validate the form.
But i want to make it validate the fields by clicking a button instead of a submit button.
<input type="button" value="validate" id="next" name="next">
The reason why i want to do is because am using validation in a wizard, the submit button will be in the last step of the form. but there will be next buttons in every field to go to the next page of the form wizard. I want to validate the fields in the first page when the next button in the first page is clicked.
Please tell me how can i do it ?
Position Absolute validation engine
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
Would do it this way:
function ValidateForm()
{
return $('#formID').validationEngine({ returnIsValid: true });
}
and then add the following in the click event for button:
if (ValidateForm()==false) return false;
Try this:
jQuery( '#next' ).click(function(){
return $( '#formID' ).validationEngine( 'validate' );
});