Develop Reference

How to set Autoclick on all the buttons of a page?

I am using Jquery and Ajax for performing the action, I need after loading complete page, a code click on the every button automatically.
I used the following javascript code for click all the buttons in the end of my page. but it is not working.
<script type='text/javascript'>
document.getElementByClassName('sub').click();
</script>
Structure of my Page code
[JQuery]
[PHP]
[HTML]
[Javascript]
I set all the buttons type as "BUTTON", When I set
type="submit"
The Autoclick code only work on the first button, but with the "button" type it is not working with any of them.
If I click manually on that buttons they are working properly.
Please give any suggestion. Thank You.

Youre using the wrong function. Elements is plural in that method.
document.getElementsByClassName('sub');
Additionally, calling click on this NodeList will not work. You need to loop through and call the event on each index.
Also, you say you're using jQuery. To ensure your call happens after DOM ready, wrap your JS with $().ready().
Last, use the tools you've provided yourself, in this case jQuery, and select your element that way.
$(document).ready(function(){
$(".sub").click()
});

In jQuery you can trigger the click like
$( ".sub" ).trigger( "click" );

Because you retrieve a NodeList(as pointed out in the comments) :
$(document).ready(function () {
var butEl = document.getElementsByClassName('sub'),
count = butEl.length;
for (i = 0; i < count; i++){
butEl[i].click();
}
});
Also is getElementsByClassName

If you're trying to click on multiple different form submit buttons, it makes sense that the browser will POST for only one of them - one page can't simultaneously navigate to multiple different URLs.
Similarly, when you change type to button, none of the forms will be submitted, even though you're clicking on the buttons.
If you know what you're doing, you could always add submit event handlers to all of your forms, and submit them via ajax requests instead - which should allow multiple of them to be processed. Note you may need to work out some extra logic for displaying success/failure for each form to the user since the browser won't navigate you to any of the existing "submitted" pages.
$(document).on('submit', 'form', function() {
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
dataType: 'json',
data: $(this).serialize(),
success: function(data) {
// Add logic here for handling success for each form, if required
},
error: function(xhr, err) {
// Add logic here for handling errors for each form, if required
}
});
return false; // To stop the browser processing this form
});
With this method, your first attempt with type="submit" buttons should work - however I would encourage you to be as specific as possible with your element selectors for both the forms and the buttons you're trying to target.

How to Prevent Users from Submitting a Form Twice

<input type="submit" name="btnADD" id="btnADD" value="ADD"/>
when user click add button twice, from get submitted twice with same data into table.
So Please help me to restrict user to submit from twice.

Once the form is submitted, attach a handler with jQuery that hijacks and "disables" the submit handler:
var $myForm = $("#my_form");
$myForm.submit(function(){
$myForm.submit(function(){
return false;
});
});
Returning "false" from the submit handler will prevent the form from submitting. Disabling buttons can have weird effects on how the form is handled. This approach seems to basically lack side effects and works even on forms that have multiple submit buttons.

try out this code..
<input type="submit" name="btnADD" id="btnADD" value="ADD" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();" />

You can disable the button after clicking or hide it.
<input type="submit" name="btnADD" id="btnADD" value="ADD" onclick="disableButton(this)"/>
js :
function disableButton(button) {
button.disabled = true;
button.value = "submitting...."
button.form.submit();
}

If you are working with java server side scripting and also using struts 2 then you refer this link which talks about on using token.
http://www.xinotes.org/notes/note/369/
A token should be generated and kept in session for the initial page render, when the request is submitted along with the token for the first time , in struts action run a thread with thread name as the token id and run the logic whatever the client has requested for , when client submit again the same request, check whether the thread is still running(thread.getcurrentthread().interrupted) if still running then send a client redirect 503.
And if you are not using any framework and looking for simple workout.
You can take help of the
java.util.UUID.randomUUID();
Just put the random uuid in session and also in hidden form field and at other side(the jsp page where you are handling other work like storing data into database etc.) take out the uuid from session and hidden form field, If form field matches than proceed further, remove uuid from session and if not than it might be possible that the form has been resubmitted.
For your help i am writing some code snippet to give idea about how to achieve the thing.
<%
String formId=(java.util.UUID.randomUUID()).toString();
session.setAttribute(formId,formId);
%>
<input type='hidden' id='formId' name='formId' value='<%=formId%>'>

You could notify the user that he drinks too much coffee but the best is to disabled the button with javascript, for example like so:
$("#btnADD").on('click', function(btn) {
btn.disabled = true;
});

I made a solution based on rogueleaderr's answer:
jQuery('form').submit(function(){
jQuery(this).unbind('submit'); // unbind this submit handler first and ...
jQuery(this).submit(function(){ // added the new submit handler (that does nothing)
return false;
});
console.log('submitting form'); // only for testing purposes
});

My solution for a similar issue was to create a separate, hidden, submit button. It works like so:
You click the first, visible button.
The first button is disabled.
The onclick causes the second submit button to be pressed.
The form is submitted.
<input type="submit" value="Email" onclick="this.disabled=true; this.value='Emailing...'; document.getElementById('submit-button').click();">
<input type="submit" id='submit-button' value="Email" name="btnSubmitSendCertificate" style='display:none;'>
I went this route just for clarity for others working on the code. There are other solutions that may be subjectively better.

You can use JavaScript.
Attach form.submit.disabled = true; to the onsubmit event of the form.
A savvy user can circumvent it, but it should prevent 99% of users from submitting twice.

You can display successful message using a pop up with OK button when click OK redirect to somewhere else

Disable the Submit Button
$('#btnADD').attr('disabled','disabled');
or
$('#btnADD').attr('disabled','true');

When user click on submit button disable that button.
<form onSubmit="disable()"></form>
function disable()
{
document.getElementById('submitBtn').disabled = true;
//SUBMIT HERE
}

Create a class for the form, in my case I used: _submitlock
$(document).ready(function () {
$(document).on('submit', '._submitlock', function (event) {
// Check if the form has already been submitted
if (!$(this).hasClass('_submitted')) {
// Mark the form as submitted
$(this).addClass('_submitted');
// Update the attributes of the submit buttons
$(this).find('[type="submit"]').attr('disabled', 'disabled');
// Add classes required to visually change the state of the button
$(this).find('[type="submit"]').addClass("buttoninactive");
$(this).find('[type="submit"]').removeClass("buttonactive");
} else {
// Prevent the submit from occurring.
event.preventDefault();
}
});});

Put a class on all your buttons type="submit" like for example "button-disable-onsubmit" and use jQuery script like the following:
$(function(){
$(".button-disable-onsubmit").click(function(){
$(this).attr("disabled", "disabled");
$(this).closest("form").submit();
});
});
Remember to keep this code on a generic javascript file so you can use it in many pages. Like this, it becomes an elegant and easy-to-reuse solution.
Additionally you can even add another line to change the text value as well:
$(this).val("Sending, please wait.");

Add a class to the form when submitted, stopping a user double clicking/submitting
$('form[method=post]').each(function(){
$(this).submit(function(form_submission) {
if($(form_submission.target).attr('data-submitted')){
form_submission.preventDefault();
}else{
$(form_submission.target).attr('data-submitted', true);
}
});
});

You can add a class to your form and your submit button and use jquery:
$(function() {
// prevent the submit button to be pressed twice
$(".createForm").submit(function() {
$(this).find('.submit').attr('disabled', true);
$(this).find('.submit').text('Sending, please wait...');
});
})

None of these solutions worked for me as my form is a chat and repeated submits are also required. However I'm surprised this simple solution wasn't offered here which will work in all cases.
var sending = 0;
$('#myForm').submit(function(){
if (sending == 0){
sending++;
// SUBMIT FORM
}else{
return false;
}
setTimeout(function(){sending = 0;},1000); //RESET SENDING TO 0 AFTER ONE SECOND
}
This only allows one submit in any one second interval.

Hiding And Submitting A Form Using jquery

How to Hide a form and submit that form using jquery?
Is this possible?

Yes, it is possible:
On your HTML page:
<form id="my-form">
</form>
Submit
Your script:
$(document).ready(function() {
$("a#submit").click(function() {
$("#my-form").hide();
$("#my-form").submit();
});
});
If your form contains a Submit button and you want the form to be hidden when the Submit button is pressed, instead you can listen to the submit event and handle it like this:
$("#my-form").submit(function() {
$(this).hide();
return true;
});

What are you trying to do? Some scam?
You can place the form in a hidden div and using $(document).ready event, you can autosubmit the form.

Do you mean a field within a form that already has data inserted, eg. hard-coded in by you, the developer?
If this is the case, just set an id to the input field, with the value hard-coded in. Then set it's display to 'none'. Use your Jquery to interpret the data as normal.
You could also just make a variable in your jquery script, and avoid all this.

Since you've added the jquery-ajax tag, I guess you want to submit the form through AJAX. In that case you are probably looking for something like this:
$("#your-form-id").submit(function(){
$.ajax({
type: "POST",
url: "some.php",
data: $(this).serialize(),
success: function(){
$("#your-form-id").hide();
}
});
return false;
});

Prevent submit while jQuery effect is running

I have this issue that when user clicks a button (in this case, a submit button) multiple times, jQuery will keep playing the animation effects until it has completed the count of clicks the user has imputed.
This can get quite overwhelming.
How can jQuery tell if it's currently executing an animation to a particular element, so I can prevent user from submitting while the elements effect is still in play?
Notes: the submit button is in a file. Form handling is relayed via AJAX this jQuery is inside the ajax called file.
Here is the main files code:
$('#login_form').submit(function(e) {
$.post(
"ajax.php",
{ user: $('[name="username"]').val(), pw: $('[name="password"]').val() },
function(resposeText) { $('#login_form_response').html(resposeText); },
"html"
);
e.preventDefault();
});
Here is the code (in ajax'ed' file):
$('#login_form_response').html('Username or Password is inaccurate!')
.slideDown()
.delay(3500)
.slideUp(1500);

You could unbind the event-handler just before starting the animation, and in the callback function of the animation, just bind the handler again.
$('#button').unbind('click');
$('#animated_element').animate({ animation, stuff}, 1000, function(){
$('#button').bind('click', handlerFunc);
});
Note:
This is a way to prevent submitting when you are using a customized button (div, or a link), which has an event handler binded to it. It does not work on pure html <input type="submit" /> - buttons, because after unbinding, the standard-submit is going to take effect.
I prefer to use customized buttons, mainly because of styling (especially for IE7 and such).
If you want to use a pure html-submit button, you'll have to disable the button (and disabling submit over "enter") or set a flag, that prevents submitting, as other users have already stated in their answers!

Disable the submit button until the animation finishes.
$('animatingElementSelector').animate({height: 200px;}, slow, function() { //ENABLE BUTTON HERE });

var isAnimationRunning;
jQuery('#myForm').bind('submit',function(e){
if(isAnimationRunning)
{
e.preventDefault();
}
});
Create a variable isAnimationRunning let it know, animation running or not. If running then ignore submit.
http://jsfiddle.net/praveen_prasad/cfvRf/
On demo click start animation and then try to submit!!
Edit 1
Some ppl have suggested unbinding click of submit button, that wont work. If a submit button is inside a form, clicking it will submit the form, you dont bind click event to submit form, its just pure html, so unbinding wont help in stopping submit event. check this demo
Edit 2
Some ppl have suggested disable the submit button during the animation. That wont always work either, consider a situation where user types something in text box and press enter key, form will be submitted(some browsers will) regardless of submit button being disabled.

Just add disabling button when it clicked :) or hide... or both of this... hide and disable

Try this:
$('#login_form').submit(function(e) {
$('input[type=submit]', this).attr('disabled', 'disabled').attr('style','opacity: 0.5; filter: alpha(opacity = 50); ');
$.post(
"ajax.php",
{ user: $('[name="username"]').val(), pw: $('[name="password"]').val() },
function(resposeText) { $('#login_form_response').html(resposeText); },
"html"
);
e.preventDefault();
});

Disabled form not submitting its fields

I am trying to disable the form on my site when the user click the submit button to stop duplicate submissions. Due to there being an input type file on the form the upload can take a while. So far I have tried this
$("#uploadForm").submit(function () {
$(":input", this).attr('disabled', 'disabled');
});
The trouble is that this stops the form sending any data to the web server. Is there some way to disable the form and still have it post the data.

Let it do the submit before disabling:
$("#uploadForm").submit(function () {
setTimeout(function(){$("#uploadForm :input").attr('disabled','disabled');}, 10);
return true;
});

I wouldn't disable the input button, this is confusing for the user. I would just overlay the form with a "Uploading.." message. See jQuery BlockUI plugin.

how about using a progress bar when submit is clicked..
http://plugins.jquery.com/project/loading

Disable the submit button not the form

What about just disabling the submit button?