Remove Submit Button if the form is validated - javascript

I am using Magento and created a custom form, and basically what I want to do is prevent a submit button to be click more than once (whether that is a double click, or if the user just gets impatient and clicks the button again after a few seconds).
The form is using the Magento Javascript validation method to validate the fields and IF the fields are all validated then what I would like to do is to remove the submit button on the first click and replace it with a "In process..." message. This way there is no way that a user can double click or multiple click the button.
If the fields are not all validated then move the submit button down and just above it display a message that may read "Please fill out all required fields and submit form again".
Below is the form with just validation, but I would really like to know how to apply the what I mentioned above.
Any help would be SO appreciated!!! Thanks in advance.
<form name="<em><strong>my-custom-form</strong>" id="my-custom-form" action="" method="post">
<label for="firstname">< ?php echo $this->__('First name') ?> <span class="required">*</span></label><br />
<input id="firstname" name="firstname" class="<em/><strong>input-text required-entry</strong>" />
<label for="lastname">< ?php echo $this->__('Last name') ?> <span class="required">*</span></label><br />
<input id="lastname" name="lastname" class="<em/><strong>input-text required-entry</strong>" />
<label for="useremail">< ?php echo $this->__('Email') ?> <span class="required">*</span></label><br />
<input type="text" name="useremail" id="useremail" class="<em/><strong>input-text required-entry validate-email</strong>" />
<input type="submit" name="submit" value="<?php echo $this-/>__('Submit') ?>" />
</form>< ?php /* END OF my-custom-form */?>
<script type="text/javascript">
//< ![CDATA[
var customForm = new VarienForm('<em><strong>my-custom-form</strong>');
//]]>
</script>

Not sure how Magento might fit in because I'm not overly familiar with it, but the process typically works like this:
$('#my-custom-form').submit(function(){
$('input[type=submit]', this).attr('disabled', true);
// validate form
if (valid) {
return true;
} else {
$('input[type=submit]', this).attr('disabled', false);
return false;
}
});

You could look into UI blocking as one possible solution. I use this one.
If you're not using jQuery already, you could try just hiding the submit button, rather than removing it completely. Removing the button can cause issues with event binding, depending on how you set them up.
This is probably the most help you're going to get without a little more code/information.

I don't see your validate code above, but if we assume that it's a boolean function you can just:
if (validatation()) {
$('#my-custom-form').submit(function(){
$('input[type=submit]', this).attr('enabled', 'enabled');
$('input[type=submit]', this).val('In process...');
});
} else {
$('#my-custom-form').submit(function(){
$('input[type=submit]', this).attr('disabled', 'disabled');
});
}
I would suggest two things:
1) Drop the "In process..." thing, it just makes things harder for the user the 2nd time unless you keep doing validation() on every change and setting the text back.
2) Add a double-click prevention:
$('my-custom-form').submit(function(){
$('input[type=submit]', this).attr('disabled', 'disabled');
$('select', this).attr('disabled', 'disabled');
$('input[type=text]', this).attr('readonly', 'readonly');
$('textarea', this).attr('readonly', 'readonly');
});

Related

Replace/Hide Input Button If Form Is Validated (Using jquery.validate.js)

I have this normal form:
<form class="vform" action='http://example.com/someaction.php' method='post' id='myid' >
<input type="email" name="email" id="email" class="required email " placeholder="Enter Your Email" >
<input id="#before" type='submit' value="Submit">
</form>
I am using the jquery.validate.js plugin to validate the form, which is working fine. (Link)
WHAT IS REQUIRED:
Before the user is redirected upon successful validation of the form, there is this 'pause' (while its redirecting)... during this time, users are repeatedly hitting the submit button.
How can I hide/replace (maybe with a loading gif or something) the submit button IF the form is validated.
Meaning, disable or replace the input button with something else IF the form is validated.
THE VALIDATION CODE:
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script>
<script>
$(document).ready(function() {
$(".vform").validate();
});
</script>
I tried adding some replacement/disable code after the validate function like this:
$(this).children('input[type=submit]').attr('disabled', 'disabled');
or
$('#before').replaceWith($('#after'));
But confused as to how to actually go about it.
Can anyone offer some insight?
EDIT: The input button shouldn't be replaced/disabled if the form validation is false
You can submitHandler of jQuery validate.
<script>
$(document).ready(function() {
$(".vform").validate({
submitHandler: function(form) { // <- pass 'form' argument in
$("#before").attr("disabled", true);
form.submit(); // <- use 'form' argument here.
}
});
});
</script>

PHP doesn't process the form

I'm having a little problem here.
I have a form with a jQuery that disables the submit input when the form is submited.The problem is: I use PHP to process the data when the input submit is clicked. But apparently the button is being disabled first, then PHP can not perform the processing. I need to find a way to prevent this, take a look in the code snippets:
<form class='send' action='{$_SERVER['PHP_SELF']}' method='post'>
<!--Form data-->
<input type='submit' name='finish' value='Send'/>
</form>
jQuery function to disable:
$('.send').on('submit', function()
{
$(this).find('input[type="submit"]').prop("disabled", true);
});
And then the PHP code to process:
if(isset($_POST['finish']))
{
//Do things
}
As I said, the PHP don't process the form because JS disabled the button to prevent multiple submitions. How to process PHP before disable the button? Thanks!
Since you are disabling the submit button it will not get send over to to server in the $_POST variable so your code doesn't work, as you have said.
Another way to do what you are looking for is to create a hidden HTML input
<input type="hidden" name="form">
Then when you check if the form is send, you will use
if(isset($_POST['form']))
{
//Do things
}
You can solve it easily changing your submit button by a simple button:
<form class='send' action='{$_SERVER['PHP_SELF']}' method='post'>
<!--Form data-->
<input type='button' name='finish' value='Send'/>
</form>
$('input[name="finish"]', '.send').on('click', function(){
$(this).prop('disabled', true);
$('.send').submit();
});

Stop double-clicking of submit button with Javascript

Here's my situation. I have a submit button. When clicked, some backend/database validation takes place and if everything's good, submit the form and disable the button so the form can't be submitted twice. If it does not pass validation, submittal cannot take place and the button stays active, so the user can resubmit the form. It sounds simple but I can't make it work. This is a C# web application.
I have tried to add the code to the button on page load. When the submit button is clicked and if validation fails, remove the code that disables the button. But here is my problem. Since the "disable" code is removed and the user fixes any error and resubmit, the button can be clicked more than one as the code is no longer there.
I do not want to use Ajax for this because the backend check is very complicated. Is there another way to do it? I've tried to add the "disable" code on "load" but it does not work on post back when the validation fails.
if (window.addEventListener)
window.addEventListener("load", lockSubmit, false);
else if (window.attachEvent)
window.attachEvent("onload", lockSubmit);
else window.onload = lockSubmit;
Any help is appreciated.
Try the snippet below
window.onload = function(){
// Insert the following function somewhere in your .js file / section
(function prevent_over_submitting(){
var form = document.forms.theform;
if(form || form.nodeName == 'FORM'){
form.onsubmit = function(){
form.submit.value = 'Proccesing...';
form.submit.disabled = true;
};
}
})();
};
While your form should look something like this one
<form id="theform" method="post" action="">
<input type="text" name="firsname" value="" />
<input type="text" name="lastname" value="" />
<input type="submit" name="submit" value="submit" />
</form>
Here is a working jsBin so you can play around.
Update:
The logic behind the snippet above
// server-side code (rather in pseudo-code this time)
if(form_has_been_submitted){ // check if the form has been submitted
errors[] = validate_data(post_data); // call the method to validate data
if(errors_array_is_empty){ // if everything is fine
submit_data(); // submit data
redirect_or_do_something; // (maybe) do other things
} // otherwise don't do anything
}
// validation method
validate_data(post){ // the only argument here represents all your form data
error = array;
if(post['firstname'] == wrong){ // check for error
error['firstname'] = 'Check your firsname'; // if you found one, push it to the error array
}
if(post['lastname'] == wrong){ // the same as in previous case
error['lastname'] = 'Check your lastname'; // the same as in previous case
}
return error; // return that array, it might be full or empty
}
// client-side code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyApplication</title>
<script type="text/javascript">
// the JavaScript snippet from above
</script>
</head>
<body>
<form id="theform" method="post" action="">
<input type="text" name="firsname" value="" />
<!-- show the error if you found one, otherwise show an empty string -->
<span><% (error['firstname'] ? error['firstname'] : "") %></span>
<input type="text" name="lastname" value="" />
<!-- same as in the previous case -->
<span><% (error['lastname'] ? error['lastname'] : "") %></span>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
As you can see, the JavaScript snippet above only disables the submit button onclick to prevent over-submitting; it will be enabled once the page is loaded again. This isn't my favorite way of validation but I followed your logic.
you can add this code in the onclick function:
First, add a global javascript variable, say var click = false;
and add this condition before validation occurs:
if(click){
return false
} else {
your normal validation code
}
if your page reloads each time you submit, then there is no need to add anything further, but if doesn't then add setInterval method which will reset the click variable for next use if validation fails.
The state of the click variable will remain true after first click and will further stop multiple clicks, unless page reloads or we reset the variable manually through code.

How to submit a form on a link click using jquery?

I'm working on a web search form which will return images and web results when they click on the link on top of the form.
So I tried to trigger the form on a link click. Example: If they click image then am trying to submit the form with the image as an option. On the link click I am able to create the hidden input, but the submit itself is not triggered.
Without hidden input I also tried the jQuery("#web_form").submit(); which is not trigerring.
HTML & FORM
<span class="web">Web</span><span class="image">Image</span>
<form method="post" id="web_form" action="<?php echo $_SERVER['PHP_SELF'];?>">
<input type="submit" value="Search" name="submit"/>
<?php
if (isset($_POST['submit']))
{
$option = $_POST['searchoption'];
//perfoming statement based on option
}
?>
</form>
jQuery
jQuery(document).ready(function(){
jQuery('.web').click(function () {
var option = jQuery("<input type='hidden' name='searchoption'/>");
option.val(jQuery(this).attr("class"));
jQuery("#web_form").append(option).submit();
return false;
});
});
What is wrong in here?
NOTE: Am trying this in wordpress does that make any sense?
EDIT after question posted
jQuery(document).ready(function(){
jQuery('.web').click(function () {
var option = jQuery("<input type='hidden' name='searchoption'/>");
option.val(jQuery(this).attr("class"));
jQuery("#web_form").append(option).submit();
return false;
});
$( "#web_form" ).submit(function( event ) {
alert( "Handler for .submit() called." );
});
});
I tried the above to make sure whether the form is submitted or not, when i click the link i'm getting the Handler for .submit() called. alert message. It seems to work the submit event but it is not submitting to external url in action field as well <?php echo $_SERVER['PHP_SELF'];?> in action.
What is going on here? Any idea would be helpful.
If you change the name of the submit input to something other than "submit" it should work (tested in Chrome):
<input type="submit" value="Search" name="mysubmit"/>

Disable submit button on click after form validation

I have a form, which has a jquery form validation.. what i need is the submit button should get disabled when i submit the form once the validation is done..
<form action="#" method="post" id="myform" name="myform">
Location: <input name="location" type="text" />
Site: <input name="site" type="text" />
Age: <input name="age" type="text" />
Gender <input name="gender" type="text" />
<input name="button" type="submit" class="myButton" id="button" value="Submit" />
</form>
here is my form JsFiddle
Not sure why you want to disable the submit button but using jQuery you could do
$('input[type="submit"]').prop('disabled',true);
Typically you either wouldnt have a submit button, or else submit the form and the page will reload!
UPDATE
To stop people from reposting the values by refreshing the page as you wrote in comments, redirect the user to the page without the values posted!
header('/same_page.php');
you want to do the action on form.submit. Not sure if you need to add form.valid() there as a check, but I always do it like that. Afterwards you can return true or false.
True: The browser proceeds with the link and action specified in the form
False: The browser stops (when you have validation errors)
Here the code:
$('#myform').submit(function() {
if (!$('#myform').valid()) return false;
$('#myform input[type=submit]').attr("disabled", "disabled");
return true;
});
I've also updated your fiddle with that code, so you can try it out
after you validate the form, use:
$( "#button" ).click(function(event) {
if($('#myform').valid()) {
$(event.target).attr("disabled", "disabled");
}
});
If you want to disable once the form which you want to validate is valid, then you can disable the submit button like this
$("#myForm").validate({
submitHandler: function(form) {
// do other stuff for a valid form
$('#myform input[type=submit]').attr("disabled", "disabled");
form.submit();
}
});

Categories