Browser refresh causes multiple form submissions - javascript

I have the below code in my jsp where we enter subject and message and click on a button which causes form submit, when we do a page refresh by clicking F5, it is causing multiple form submissions.
I added the below line $('form').preventDoubleSubmission(); and the function corresponding to it in my jsp but it is still not working. Please assist.
function validateXYZ() {
var frm = document.forms["update-xyz"];
frm.actionType.value=message;
if (message == "submit_new") {
if (frm.subject.value == "" || frm.content.value == "") {
alert ("Please fill in Subj and Msg");
return false;
}
}
$('form').preventDoubleSubmission();
frm.submit();
}
//jQuery plugin to prevent double submission of forms
/*jQuery.fn.preventDoubleSubmission = function() {
$(this).on('submit',function(e){
var $form = $(this);
if ($form.data('submitted') === true) {
// Previously submitted - don't submit again
e.preventDefault();
} else {
// Mark it so that the next submit can be ignored
$form.data('submitted', true);
}
});
Thanks,
Praseel.

Related

Prevent beforeunload function from executing if submit button is clicked

I have the following function that gives a warning to the user if they are exiting the page when the $('.article_div textarea') form field is populated.
$(window).on('beforeunload', function(event) {
var unsaved = "Are you sure you want to exit?";
var text = $('.article_div textarea').val();
if (text.length > 0){
return unsaved;
}
});
However, I would like to prevent this popup from executing when they click the submit button to the actual form.
How can I ammend the function to account for this? The element of the submit button is
$('button.submit_post').
You can create a boolean which gets positive when you click on submit Or remove the event of unload when clicked. The code will be as follows:
var isSubmitClicked = false;
$('button .submit_post').on("click",onClick);
function onClick(e){
isSubmitClicked = true;
}
$(window).on('beforeunload', function(event) {
if(isSubmitClicked){
isSubmitClicked = false;
return;
}
// Rest of your method.
}
How about binding a event handler to the submit event instead of the submit button element?
Maybe like this:
var submitted = false;
$('form').on("submit", function() {
submitted = true;
console.log('submitted');
});
$(window).on('beforeunload', function(event) {
if(submitted){
submitted = false;
console.log('aborted because of submit');
return;
}
console.log('rest of code');
// Rest of your method.
});

Make sure that submit function is firing on certain button

I have a submit function:
jQ("webform-client-form-' . $form['#node']->nid . '").submit(function(event)
var curElement = document.activeElement;
console.log(curElement);
var $btn = curElement.attr("class");
$webform = $btn.split(\' \')[0];
console.log($webform);
if($webform == "webform-submit") {
console.log("yeahah");
}
var $form = jQ(this);
if ($form.find("[data-stripe=\"token\"]").attr("value") == "") {
$form.find("button").prop("disabled", true)
Stripe.card.createToken($form, stripeResponseHandler);
return false;
}
else {
return true;
}
});
and try do fire that function only on pressing a certain button. Problem is that when pressing the button, document.activeElement is the <html> tag and not the button I pressed. Does anyone know if I did something wrong?
Thanks

javascript form validation - reloading of page

I have a form with some fields on. I am still learning Javascript. When my is submitted it triggers my JS which checks if the fields was submitted and then displays the errors in a which is done through innerhtml. Problem is it only display's the div for a few seconds and then finishes reloading the page and the div is not displayed anymore.
function checkradio() {
chosen = ""
len = document.cv.Radio1.length
for (i = 0; (i<2); i++) {
if (document.cv.Radio1[i].checked) {
chosen = document.cv.Radio1[i].value
}
}
if (chosen == "") {
document.getElementById('error-1').innerHTML = "Please choose a type";
document.getElementById("Radio1").focus();
}
}
You need to add
e.preventDefault();
for avoiding the default behavior.
Hence, if validation fails, the form won't be submitted.
please check whether your using normal HTML input element or ASP.NET server element. If your using Server element like then page will send back to server(reloaded) when click on button. the details you gave above is not enough.
you need to prevent the default behaviour if validation fails
you most likely do the validation on submit sth like:
$('form').submit(function(e){
check = checkradio() // let your function return true or false
if(!check){
e.preventDefault(); // add this to not submit the form
}
});
so the form will not submit if the validation fails
your tweaked validate function could look like this :
function checkradio() {
chosen = ""
len = document.cv.Radio1.length
for (i = 0; (i<2); i++) {
if (document.cv.Radio1[i].checked) {
chosen = document.cv.Radio1[i].value
}
}
if (chosen == "") {
document.getElementById('error-1').innerHTML = "Please choose a type";
document.getElementById("Radio1").focus();
return false;
}else {
return true;
}
}

jQuery Stop submitting form by checking error variable

I have a simple form with some form fields. Some of them are required some are not. The required field are required by adding the class 'required'.
When I submit I check the #contact-form fields and on the basis of there I give the empty field error classes and submit the form yes or no.
Adding the error classes to the fields is not a problem, but checking the "error" variable is. Because I don't know where I can check the error variable.
This is my jQuery code:
$('#contact-form').submit(function (event) {
var errors = false;
$(this).find('.required').each(function () {
if ($(this).val().length < 1) {
$(this).addClass('error');
errors = true;
}
});
if (errors == true) {
event.preventDefault();
}
});
JsFiddle
The following code should do what you want, just give your contact form submit button the id of #contact-form-button.
$('#contact-form-button').click(function(e) { // using click function
// on contact form submit button
e.preventDefault(); // stop form from submitting right away
var error = false;
$(this).find('.required').each(function () {
if ($(this).val().length < 1) {
$(this).addClass('error');
error = true;
}
});
if (!error) { // if not any errors
$('#contact-form').submit(); // you submit form
}
});
$('#contact-form').submit(function (event) {
var errors = false;
$(this).find('.required').each(function () {
if ($(this).val().length < 1) {
$(this).addClass('error');
errors = true;
}
});
if (errors == true) {
event.preventDefault();
return false;
}
return true;
})
if validation cross successfully then it return true for submit the form
I found out that my code just works. The reason I thought it was not working, is because I was still using PHP handling my real website where I made 1 field required and in my jQuery not. This made the confusion.
So the following code works:
$('#contact-form').submit(function (event) {
var errors = false;
$(this).find('.required').each(function () {
if ($(this).val().length < 1) {
$(this).addClass('error');
errors = true;
}
});
if (errors == true) {
event.preventDefault();
}
});

How to catch the forms auto-completion events with Javascript?

I am actually processing the validation of a fieldset each time a user press a key:
uname = document.getElementById('user_name');
upass = document.getElementById('password');
btn_submit = document.getElementById('btn_submit');
function verif_champs() {
if(uname.value != "" && upass.value != "")
btn_submit.disabled = false;
else
btn_submit.disabled = true;
}
document.getElementById('fieldset').onkeyup = function() {
verif_champs();
}
The problem is that my form is automatically filled when using Chrome, so my submit button stays disabled even if the content of the fields is not empty. How should I arrange that? I tried the onchange event of the fieldset but it doesn't seem to be thrown by the Chrome's auto completion.
Add an onchange Event for auto complete data.
document.getElementById('fieldset').onchange = function() {
verif_champs();
}

Categories

Resources