I have a form that pop up inside a layer, and I need to make everything inside that form read only regarding what type of input it is. Anyway to do so?
16 Answers
With HTML5 it's possible to disable all inputs contained using the <fieldset disabled />
attribute.
disabled:
If this Boolean attribute is set, the form controls that are its descendants, except descendants of its first optional element, are disabled, i.e., not editable. They won't received any browsing events, like mouse clicks or focus-related ones. Often browsers display such controls as gray.
Reference: MDC: fieldset
-
This works in html5. Also if you have any js that alters fields you will need to disable that js. I placed my fieldset as the wrapper element of my form and used this js to exclude any js process from altering field data:
if($('#formID').parent().prop("disabled")==true) { return false; }
– Chris OCommented Mar 22, 2017 at 19:21 -
15I wish this attribute was defined on
<form>
as well so we can disable forms that don't use<fieldset>
.– DaiCommented Mar 21, 2019 at 4:59 -
1The most elegant solution. I do not have to change million tags but just one.– suchossCommented Sep 26, 2019 at 7:52
This is quite simple in plain JavaScript and will work efficiently in all browsers that support read-only form inputs (which is pretty much all browsers released in the last decade):
var form = document.getElementById("your_form_id");
var elements = form.elements;
for (var i = 0, len = elements.length; i < len; ++i) {
elements[i].readOnly = true;
}
-
So user can still submit the form by clicking the submit button? Commented Jun 21, 2016 at 13:53
-
4
-
1@CoryRobinson:
disabled
is different toreadOnly
. stackoverflow.com/questions/7730695/…– Tim DownCommented Nov 29, 2018 at 10:55
You can use the :input
selector, and do this:
$("#myForm :input").prop('readonly', true);
:input
selects all <input>
, <select>
, <textarea>
and <button>
elements. Also the attribute is readonly
, if you use disabled
to the elements they won't be posted to the server, so choose which property you want based on that.
-
1
button
s,input[type=submit]
, andinput[type=button]
don't support thereadonly
property. See jsfiddle.net/z4hoh443 for an example and developer.mozilla.org/en-US/docs/Web/HTML/Element/input for the source docs.– philfreoCommented Mar 23, 2016 at 0:09 -
Even though they show grayed, checkboxes and ratio buttons are still able to change their values.– DN2048Commented Feb 8, 2017 at 14:37
Its Pure Javascript :
var fields = document.getElementById("YOURDIVID").getElementsByTagName('*');
for(var i = 0; i < fields.length; i++)
{
fields[i].disabled = true;
}
Old question, but nobody mentioned using css:
pointer-events: none;
Whole form becomes immune from click but also hovers.
To make it not possible to tab through, add tabindex="-1"
to the input elements.
-
2This works like a charm. Perfect answer. I defined a form.disabled selector in my css and apply the css class to the form. Can also be used for styling or unhiding elements (like "form is submitting" message or anything else. This reduces the needed javascript to an absolute minimum. Commented Apr 3, 2022 at 11:30
-
8Only disables pointer events, obviously, so users can still access using keyboard (e.g. TAB key).– kubicleCommented Dec 18, 2022 at 5:26
You can do this the easiest way by using jQuery. It will do this for all input, select and textarea elements (even if there are more than one in numbers of these types).
$("input, select, option, textarea", "#formid").prop('disabled',true);
or you can do this as well but this will disable all elements (only those elements on which it can be applied).
$("*", "#formid").prop('disabled',true);
disabled property can applies to following elements:
- button
- fieldset
- input
- optgroup
- option
- select
- textarea
But its upto you that what do you prefer to use.
Old question, but right now you can do it easily in pure javascript with an array method:
form = document.querySelector('form-selector');
Array.from(form.elements).forEach(formElement => formElement.disabled = true);
1) form.elements
returns a collection with all the form controls (inputs, buttons, fieldsets, etc.) as an HTMLFormControlsCollection.
2) Array.from()
turns the collection into an array object.
3) This allows us to use the array.forEach()
method to iterate through all the items in the array...
4) ...and disable them with formElement.disabled = true
.
Here is another pure JavaScript example that I used. Works fine without Array.from() as a NodeList has it's own forEach method.
document.querySelectorAll('#formID input, #formID select, #formID button, #formID textarea').forEach(elem => elem.disabled = true);
$("#formid input, #formid select").attr('disabled',true);
or to make it read-only:
$("#formid input, #formid select").attr('readonly',true);
-
2
I like this method but with the 'disabled' property:
$("#myForm :input").prop('disabled', true);
That way all form fields, radios, checkboxes, text fields, text areas - and including hidden form fields - are all disabled at once.
This is very handy if you are switching between forms.
You could do something like:
const form = document.querySelector("form");
const allFormChildren = form.querySelectorAll("*");
allFormChildren.forEach(c => {
if ("disabled" in c) c.disabled = true;
})
This would disable all form elements that can be disabled.
// get the reference to your form
// you may need to modify the following block of code, if you are not using ASP.NET forms
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
// this code disables all form elements
var elements = theForm.elements;
for (var i = 0, len = elements.length; i < len; ++i) {
elements[i].disabled = true;
}
This one has never failed me and I did not see this approach on the other answers.
//disable inputs
$.each($("#yourForm").find("input, button, textarea, select"), function(index, value) {
$(value).prop("disabled",true);
});
Javascript : Disable all form fields :
function disabledForm(){
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = true;
}
var selects = document.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) {
selects[i].disabled = true;
}
var textareas = document.getElementsByTagName("textarea");
for (var i = 0; i < textareas.length; i++) {
textareas[i].disabled = true;
}
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].disabled = true;
}
}
To Enabled all fields of form see below code
function enableForm(){
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = false;
}
var selects = document.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) {
selects[i].disabled = false;
}
var textareas = document.getElementsByTagName("textarea");
for (var i = 0; i < textareas.length; i++) {
textareas[i].disabled = false;
}
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].disabled = false;
}
}
Based on the answer by Tim Down, I suggest a slight modification:
const FORM_ELEMENTS = document.getElementById('idelementhere').elements;
for (i = 0; i < FORM_ELEMENTS.length; i++) {
FORM_ELEMENTS[i].disabled = true;
}
This will disable all elements inside a form.
for what it is worth, knowing that this post is VERY old... This is NOT a read-only approach, but works for me. I use form.hidden = true.
-
2Hi and Welcome to StackOverFlow, It doesn't matter how old the question is, Your knowledge is always valuable and appreciated. Please provide more detail about why and how your answer work. Good Luck. Commented Jun 18, 2020 at 17:32
-
var form = document.getElementById("your_form_id"); var elements = form.elements; for (var i = 0, len = elements.length; i < len; ++i) { elements[i].readOnly = true; } Commented Jun 19, 2020 at 15:21