How to disable a submit button after submission in PHP?
I browsed through the other questions on this issue but couldn’t find a satisfactory answer. I have a quiz website where the user selects an option from four options and then clicks submit. I want to disable the submit button after it has been clicked once. Is there any way to do this with PHP? If not, is there a way to do this with minimal JS.
8 Answers 8
Available Solutions
Since you tagged the question jQuery, here are some simple jQuery solutions you can use:
To disable it when it is clicked, you can simply:
$('input[type="submit"]').click(function() < this.disabled = true; >; You can do even better though, and disable it only once the form is submitted:
Solution Demo
Here’s a simple demo of the above logic, in a jsFiddle: http://jsfiddle.net/zb8CZ/
(Note that in that implementation I didn’t use jQuery, but rather, plain JS; for portability across browsers however, as well as access to the many other methods jQuery provides (plus the syntactic sugar!) I recommend the jQuery methods.
Good to note.
Note that attempting to implement JS event handling inline in your HTML (using the onsubmit=». » or onclick=». » attributes) is considered bad practice, since it muddles your functionality with your layout/display layer. You also lose any syntax highlighting and/or error-checking your editor might provide, as well as just generally making it harder to develop and maintain your application, since there is no logical order to your code.
the solutions seems to be working in the fiddle demo. I am, however a naive in jQuery or Javascript and do not know where to insert the Javascript in my code. Please help..
Given the nature of the question I think it’s safe to assume that «submission in PHP» suggests a nice retro 1990’s style form processing script whereby the back-end code does what it needs to in-line and also includes the same form in the output — which would make this solution pretty much useless as it stands. The form still needs to submit and unless you specify otherwise the resultant output/page will have no knowledge of this.
For disable write like this, after once click it will be disable.
Try this. You might want to pass the value of each answer to a PHP file that performs backend work via AJAX.
More info about jQuery’s AJAX call here.
very easy javascript only method
Common practice these days would be to use AJAX but this doesn’t answer the question, nor would any Javascript solution without any assistance from the back-end. Say you have a form, for example:
When submitting to your PHP file for processing you will be accessing your form data either via $_GET or $_POST and doing whatever you need to do with it. At this point you will be able to deduce whether or not the form has been submitted or is successful — based on this you can simply flag either input or button elements with the disabled attribute, here’s a basic example:
\n"; // do something useful. // if variable is not an empty string, ie. it has been submitted, // set $disabled which can then be output in-line with your HTML $disabled = ($myVariable != '') ? 'disabled' : ''; ?> This would then output your new form with the button disabled based on your conditions. I should also note that depending on your doctype you may need to give the attribute a value for it to be considered valid markup, but generally speaking:
Some related StackOverflow reading:
POST values of disabled form elements
I have a form in which I need to disable an array of checkboxes and a few fields so that the user cannot change/alter their values. When I submit the form though, the POST values of the disabled elements are missing/null. How can I manage what I’m trying to do without this problem? Right now I’m disabling the fields by disabling the container div like this:
4 Answers 4
Well, there are 3 solutions I can think of:
- Make them readonly by adding the readonly property to the element.
- disable them in CSS/JavaScript. Color it like it’s disabled, and don’t allow editing with JavaScript,
- Leave it disabled, and remove the disabled on submit.
I wrote a small script that loops through all form elements and enables them when form is submitted. Thanks!
you could use readonly instead of disabled wich is almost the same for the user (can’t be editet) but the values of readonly -elements get submitted while the disabled ones don’t.
note that there are some other differences between readonly and disabled wich might lead to other problems for you:
- Values for disabled form elements are not passed to the processor method. The W3C calls this a successful element.(This works similar to form check boxes that are not checked.)
- Some browsers may override or provide default styling for disabled form elements. (Gray out or emboss text) Internet Explorer 5.5 is particularly nasty about this.
- Disabled form elements do not receive focus.
- Disabled form elements are skipped in tabbing navigation.
- Not all form elements have a readonly attribute. Most notable, the , , and elements do not have readonly attributes (although thy both have disabled attributes)
- Browsers provide no default overridden visual feedback that the form element is read only. (This can be a problem… see below.)
- Form elements with the readonly attribute set will get passed to the form processor.
- Read only form elements can receive the focus
- Read only form elements are included in tabbed navigation.
Post a disabled select field PHP
I found this answer to this question https://stackoverflow.com/a/7244888/1473523, but in my situation am I not able to put a hidden field, so is there no way to do post a disabled select field in PHP?
I dont want to enabled it, because it have to be blank but I want the server should recognize it when I submit it and post even its null, but sometimes can it be enabled and then I dont want to submit the form if the value is null
Do you have any ECMA(JS) scripting available? Is POST request processed by PHP? If so, can you just test for isset($_POST[$fieldName]])
Possibly because the answer you linked to already answers your question. No, there is no way to do this. That’s the whole point of disabling the field.
6 Answers 6
No, that’s what disabling the field does: Prevents the value from being posted back to the server. If you’re disabling the field, you should know its value as it can’t be changed. You shouldn’t need the value to be posted back.
If the value is changing based on some other input, you should capture that input server-side and use it to calculate the value that would have been posted back, the same way you calculated which value to select client-side. Relying on the client-side calculated value to be accurate is a serious security flaw.
Your options are to somehow enable the field before the form is posted, or add a hidden field.
Try to remove attribute disabled with javascript just before submiting your form.
From the question that you posted, this is how a disable field is created:
You can make it hidden as well:
Disabled form inputs do not appear in the request
I have some disabled inputs in a form and I want to send them to a server, but Chrome excludes them from the request. Is there any workaround for this without adding a hidden field?
@Liam it is very strange attempt to close in favor to less attended question with lower quality answers.
An older less attended question. Technically this question should of been closed as a duplicate when it was asked. I’ve flagged it with a mod for potential merging, may or may not happen. It’s up to them.
@Liam in fact the questions are different even some answers looks similar. I ask about how to make «disabled» field to submit values, and another question asks about «reasons»
13 Answers 13
Elements with the disabled attribute are not submitted or you can say their values are not posted (see the second bullet point under Step 3 in the HTML 5 spec for building the form data set).
FYI, per 17.12.1 in the HTML 4 spec:
- Disabled controls do not receive focus.
- Disabled controls are skipped in tabbing navigation.
- Disabled controls cannot be successfully posted.
You can use readonly attribute in your case, by doing this you will be able to post your field’s data.
FYI, per 17.12.2 in the HTML 4 spec:
- Read-only elements receive focus but cannot be modified by the user.
- Read-only elements are included in tabbing navigation.
- Read-only elements are successfully posted.
To answer my own question: No, readony only works for form control of type=’text’ and type=’password’ and for . What readonly does is preventing the user from changing the controls value. Preventing the user from changing value of a checkbox (or input of type radio) does not make much sense.
@danielson317 You can keep the select element «disabled» but also add another hidden input with the same value.
Do you ever find something out and think, «What in the heck made them think this would be obvious?» If I go to the trouble of including an input field that may or may not be disabled, that means I don’t want the user to change it, not that it should effectively act as if it was never declared at all!
@NickBedford, especially when you think «Ooh, I can deal with this quickly and safely by adding the disabled attribute.»
Using Jquery and sending the data with ajax, you can solve your problem:
+1 the good thing about this solution is that you can still using the red disable icon when user over the input =)
Note, this solution doesn’t work if Javascript is turned off. It is better to use the «readonly» feature which is native HTML.
To post values from disabled inputs in addition to enabled inputs, you can simply re-enable all of the form’s inputs as it is being submitted.
For ASP.NET MVC C# Razor, you add the submit handler like this:
using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post, // Re-enable all input elements on submit so they are all posted, even if currently disabled. new < onsubmit = "this.querySelectorAll('input').forEach(i =>i.disabled = false)" > )) < > If you absolutely have to have the field disabled and pass the data you could use a javascript to input the same data into a hidden field (or just set the hidden field too). This would allow you to have it disabled but still post the data even though you’d be posting to another page.
This solution is what Ive been using too — but as I just learned — the readonly property is a far better solution
I’m updating this answer since is very useful. Just add readonly to the input.
Semantically this feels like the correct behaviour
I’d be asking myself «Why do I need to submit this value?«
If you have a disabled input on a form, then presumably you do not want the user changing the value directly
Any value that is displayed in a disabled input should either be
- output from a value on the server that produced the form, or
- if the form is dynamic, be calculable from the other inputs on the form
Assuming that the server processing the form is the same as the server serving it, all the information to reproduce the values of the disabled inputs should be available at processing
In fact, to preserve data integrity — even if the value of the disabled input was sent to the processing server, you should really be validating it. This validation would require the same level of information as you would need to reproduce the values anyway!
I’d almost argue that read-only inputs shouldn’t be sent in the request either
Happy to be corrected, but all the use cases I can think of where read-only/disabled inputs need to be submitted are really just styling issues in disguise