Disable submit button on click but after submission jQuery / PHP - php

At the moment I'm working on a project that requires the submission of a form for 'voting' for specific posts. At the moment clicking on the submit button works as it should, although if the button is clicked more than once, it does exactly that - submits the POST variables more than once causing them to be able to 'vote' for the item multiple times in one set of clicks.
I've looked at every jQuery code example I can find to solve this but nothing works. It works to disable the button, but after that the redirection page that grabs the data and runs the queries returns an error as nothing has been submitted. In short, it seems to disable the button but at the same time disable the information from being submitted.
Here's my jQuery code:
$('#vote').submit(function(){
$(this).children($btn).attr('disabled', true);
return true;
});
Any help would be great.
Thanks.

Use jquery .one
Description: Attach a handler to an event for the elements. The handler is executed at most once per element.
$(document).one("click","#vote",function(){
$(this).children($btn).attr('disabled', true);
return true;
});

Probably your best option is to only allow a single submission and adjust the button appearance some other way:
var submitted = false;
$('#vote').submit(function(){
if(submitted) {
// cancel additional submits
return false;
}
submitted = true;
$(this).children($btn).val('Please wait...');
});

you could add an click event. Instead of using submit button use a button click event.
the code might look like this
$($button).click(function(){
$(this).attr("disabled","disabled");
$($form).submit();
});

Jquery's on and off can be used here.
for example after submission,you can completely disable the click by
$('#vote').off('click');
and then switch it back if you want by
$('#vote').on('click');

Related

Submitting form through Ajax

My issue is simple -
I am submitting form using jquery and ajax . When the button is clicked the data is submitted to database .
Question - If the user clicks the submit twice there are two entries in the database . how can I solve this ?
I cannot use .one() because the submit button invokes validation function if the errors happen the data will not be submitted .So , user has to call the same function again .
Obviously I can do that with a variable on .success .but what is the best solution to this issue .
Thanks for the help.
Overlaying to prevent click is one way.
If you want something plug and play blockUI.js is good. All you need is
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
or you can just use .ajaxstart() and .ajaxstop() to overlay an element yourself to enable and disable the submit button.
You can disable the submit button once you have submitted the form. Any form can be submitted only using the Submit button. So:
$(form).submit(function () {
$(this).find("input:submit").prop("disabled", true);
// You can enable it back once the AJAX request is successful.
$.ajaxSuccess(function () {
$(form).find("input:submit").prop("disabled", false);
});
});

Remove content of textarea when iframe is done?

So currently my website works like this; you post an update and through iframe your update gets added to the database and then shown in a list below. But the problem is that when you clicked "Submit" the text you wrote is still shown in the textarea because the website doesn't update completely. I have tried to have "onsubmit" and "onclick" but both remove the content of the textarea before it gets added to the database so it displays an empty message.
What should I do in order to delay it just a second or how do I make it wait for the iframe to "send" data to my PHP-script?
Give your textarea an id and supposing that iframe is an element of the page that contains the textarea you have done the following in the iframe page:
<?php
//code should be done after db add
?>
<script>
o = parent.document.getElementById('textareaID');
o.value = '';
</script>
<?php
//the end of code or something else
?>
You are able to see those demos on jsbin:
http://jsbin.com/ulOyiVo/1 The page with iframe. Supply the textarea with any text and then click on simulate submit link
http://jsbin.com/EyuBeLo/1/ The iframe page
If your only problem is to have a delayed response, you could trigger a setTimeout function to your onClick, with the given setTimeout:
setTimeout(
function() {
alert('hello');
},1250 //in milliseconds
);
You can define a click or a submit event using jQuery and send a request to your server. You can handle the event when the server responded using a callback. In that callback you need to do whatever it is needed to do. Using setTimeout in this case is an unnecessary hack. You will either set up a big time to wait harming the user experience or in case the page responds later than the specified time your page will work unexpectedly. So, instead of that try defining an event.

How to disable the submit button on a registration page?

I am building a registration page for my website and i want to disable the submit button till all the fields have been validated using jQuery and AJAX (I found a way to do this at http://youhack.me/2010/05/04/username-availability-check-in-registration-form-using-jqueryphp/)... Now how do i use this to perform multiple checks and keep the submit button disabled until all the checks have passed?
You would execute the validation code every time a user applies focus to an input, so use something like:
$('input').focus(function(){ /* Validation Code Here */ });
And then if it passes:
$('input[type=submit]').attr('disabled','false');
var $submitButton = $(this, "input[type='submit']");
$submitButton.attr("disabled", "true");
validate();
$submitButton.attr("disabled", "false");
however I think this was bugged in IE ..
to disable
$('#submit_postcode').attr('disabled', 'disabled');
to re-enable
$('#submit_postcode').removeAttr('disabled');
Setting the attribute to any value causes it to be disabled, even .attr('disabled', 'false'), so it has to be removed

JS script running for every element, rather than simple clicked element

using jQuery, I am trying to get an action assigned to a button on a form. I have 50 of these forms on a page, but every time I click one link, the form action is run 50 time!!
I ran this to check, and it comes to exactly 50
`i=1
$('.thumbs').click(function(){
console.log(i,"Click Count");
i++;
)};
this has the unhelpful effect of running the AJAX fifty times!!
am I using selectors wrong?
EDIT: full script here
EDIT: Example of one element - There are 50 of these inside a container div.
Are you adding the listener to a submit button? Make sure to return true or false if the form should be submitted or not.
it sounds like it could be one of there two:
1) you've added 50 click listners to one button:
you could try this by adding:
$('.thumbs').unbind();
before you assign a new handler.
If this is the case, you should try to find out why and make sure you only add one.
2) the button default action is the problem:
stop default behavior:
$('.thumbs').click(function(event){
event.preventDefault();

Disabling submit button stops form from being submitted PHP / Javascript

I think I got a classic problem but I was not able to find a working solution so far.
I have got a form , the user clicks "Send" and everything works fine using a PRG pattern and doing both client-side and server-side validation.
The problem arises when any user (let's assume he entered valid inputs) clicks more then once quickly before the server script ends its execution...
I do not get any duplicated entry because I took care of that but the browser does not go to my "thanks for submitting page".
Instead it re-submits the same page with the same values and what I get are the custom errors I set to warn the user he is trying to enter details already stored in the database. The details sent in the first place are all in the database but the user has no chance to know that.
I tried to disable the submit button on a submit event using jQuery but in that case the data are not submitted.
HTML
<div id="send-button-container">
<input id="send-emails" type="submit" name="send_emails" value="Send"/>
</div>
jQuery
$(document).ready(function(){
$('#mail-form').submit(function(){
$('#send-emails').attr('disabled','disabled');
});
});
I am wondering if I can force a submission using Javascript after disabling the button and also how to deal with UAs with Javascript disabled
Thanks in advance
Depending on server-side language, the submit button being disabled could cause problems. This is because disabled elements are not POSTed to the server. Languages like ASP.NET require the button value to be submitted so it knows what event handler to fire. What I usually do is hide the submit button, and insert a disabled dummy button after it, which appears identical to the user. Then in your onsubmit handler, you can return false and submit the form programmatically...
$('#mail-form').submit(function(){
var btn = $('#send-emails');
var disBtn = $("<input type='button'/>").val(btn.val()).attr("disabled", "disabled");
btn.hide().after(disBtn);
this.submit();
return false;
});
Contradictory to the other up-voted answers, please note that you do not need to explicitly return true from your submit handler for natural form submission: http://jsfiddle.net/XcS5L/3/
I assume this means you are depending on the value of the submit button to service the request? That is you are checking
$_REQUEST['send_emails'] == 'Send';
This is not good practice. You should never depend on the value of the submit button because that is the just what is displayed to the user. Instead, you should add a hidden input that contains the event you want to fire. After the form is submitted, you don't need to care what the value of the submit button is and you can disable it. All other non-disabled data in the form is still submitted.
You can indeed force the submission after disabling the button.
$(function () {
$("#mail-form").submit(function () {
$("#send-emails").attr('disabled', 'disabled');
window.location = '?' + $("#mail-form").serialize() + '&send_mails=Send';
return false;
});
});
Server side set a $_SESSION variable that keeps track of the last time they made a submission and block submissions within a certain time.
<?php
session_start();
if (isset($_REQUEST['send_emails'])) {
if (isset($_SESSION['mail_sent'])
&& strtotime($_SESSION['mail_sent']) < strtotime('5 seconds ago')
) {
redirect_to_thanks();
}
do_post();
}
function do_post() {
if (do_validate()) {
$_SESSION['mail_sent'] = time();
redirect_to_thanks();
}
else {
yell_at_user_a_lot();
}
}
?>
You have to return true; You could try this if u want a simple button to submit the form.
$(function(){
$('#submitID').one('click',function(){
$('#formTobeSubmitted').submit();
$(this).attr('disabled','disabled');
})
});
On server side, generate a random number into each form, store the number when the form is submitted, and discard the submit if that number has already been stored earlier. When the user has disabled javascript, this is the best you can do. (Concurrency issues can be tricky as the two identical requests are handled at the same time - make sure you use some sort of locking mechanism, such as a table with a unique field or the flock() command in PHP.)
On browser side, just set a flag when the form is submitted, and discard all later submits:
$('#mail-form').submit(function() {
if ($(this).data('submitted') {
return false;
} else {
$(this).data('submitted', true).addClass('submitted');
}
});
You can use the submitted class to make the buttons gray or something. This has a few advantages to simply disabling them; Josh already said one. Another is that Firefox likes to remember disabled states when you hit refresh, which can cause your users getting stuck in certain situations.

Categories