javascript - Disabling a submit button while still allowing a PHP script to run when the form is submitted
Get the solution ↓↓↓I have a simple acceptance form that has a single button that the user clicks. On form submit, I have a php script that makes a command line call to a python script that adds records to my database. All works great besides one thing: I don't want the user to be able to click the button more than once.
- If I disable the button using javascript, my if (isset($_POST['submit'])) statement doesn't evaluate to true and then my php doesn't run
- If I call a javascript function within the php script, the user still has an opportunity to click the button multiple times before the php script calls the function to disable the button. This allows them to make multiple records in my db.
My idea was to have my python script, which is the one adding records, first check if a record with the same information already exists in the db and only create a new one if not. My concern is that if the user clicks the submit button multiple times, it could be that multiple php will execute multiple calls and the second one will check if a record is already created before the first call creates a new record.
In other words, maybe the php calls will work at the same time (asyncronously?) and checking the database won't cover for another call creating a record at the same time. Is this a valid concern?
Are there other ideas of how I could disable or hide my button but still have my php script run? Thank you.
For future viewers, the workaround I ended up using is based on what Teemu said in the comments below. Before adding a new record from the form submission to the db, I checked if a record already existed with that information. If not, I added a record, if so the button click did nothing. As Teemu mentioned, this check would be necessary anyway to cover for multiple submissions that could be posted even without the button on the page. This is what I call a "workaround" and not an answer because the user can still click the submit button multiple times but only the first click has an effect. The button then hides itself after the php has finished running.
Answer
Solution:
All you need is that thedisabled
is set after the submission is sent. You can achieve that using asetTimeout
with zero delay:
$('.myForm').submit(function () {
setTimeout(() => {
$(this).find('[type=submit]').prop('disabled', true)
}, 0)
})
Then, the following will happen:
- Form submission event is fired because user clicked the button or pressed Enter
- Browser is calling your
submit
handler - You are "arming" your timeout
- Browser is submitting the form to the server (with the submit button's value)
- Your timeout fires immediately afterwards, disabling the button
Note that I used asubmit
handler on the form instead of aclick
handler on the button because the form may be submitted by pressing Enter while focus is on a form field too, not only by clicking the button. Yet due to how form submission works, disabling the button will also prevent submission by Enter.
Answer
Solution:
I recently had a similar situation where I was getting a double-click 'bounce' sometimes. Here's two ways I dealt with it:
1) Simply disable the button, send the AJAX data to PHP and restore the button on success
$("#save_button").click(function (e) {
e.preventDefault();
$(this).attr("disabled", true);
var settings = $('form').serialize();
console.log("settings are ", settings);
$.post("data/ajax.php", settings, function (data) {
data = JSON.parse(data);
console.log("data back from save is ", data);
$("#save_button").removeAttr("disabled");
})
});
2) create a 'nobounce' function (it does basically the same thing, but on a timer. It is a bit simpler to use as it only requires setting the class 'nobounce' on any button you want to disable, though as it is on a timer, it isn't as accurate to enable the button when the post is done.
$('.nobounce').click(function () {
$(this).attr("disabled", true);
setTimeout(function () {
$('.nobounce').removeAttr("disabled");
}, 3000);
});
These are both jquery methods - keeping the form on the page. From your description it seems maybe you are doing a form submit through PHP (please, if this isn't the answer you need, put up some code you are using so this can be more clear!). If you are submitting through PHP, then some of the comments to the original question are extremely valid.
Hope this helps - again, if not, put up some code and you can get much more direct help.
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: object not found by the @paramconverter annotation.
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.