How to Make an Entire HTML Form "Readonly"

How can I make an entire HTML form readonly ?

Wrap the input fields and other stuff into a <fieldset> and give it the disabled="disabled" attribute.

Example (http://jsfiddle.net/7qGHN/):

<form>    <fieldset disabled="disabled">        <input type="text" name="something" placeholder="enter some text" />        <select>            <option value="0" disabled="disabled" selected="selected">select somethihng</option>            <option value="1">woot</option>            <option value="2">is</option>            <option value="3">this</option>        </select>    </fieldset></form>

How to make entire form readonly /disabled but when a button clicked it should be enabled

You need to set disabled property to the value disabled I know it is confusing,

  $('.toggleInputs input,.toggleInputs select,.toggleInputs textarea')
       .prop("disabled","disabled");

and to enable them back, you just remove the property disabled.

  $('.toggleInputs input,.toggleInputs select,.toggleInputs textarea')
       .removeProp("disabled");

Don't rely on setting the property to true/false because different browsers don't support it that way.

$(document).ready(function(){  $('.toggleInputs input,.toggleInputs select,.toggleInputs textarea').prop("disabled","disabled");    $('#btnEdit').click(function(){$('.toggleInputs input,.toggleInputs select,.toggleInputs textarea').removeProp("disabled");});  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><form class="toggleInputs" method="post" action="">  <div class="form-group row">    <label class="col-md-3 col-form-label">NIS</label>    <div class="col-md-2">      <input value="<?php echo $nis;?>" name="nisn" placeholder="NIS" class="form-control" required="required" type="text">    </div>    <div class="col-md-2">      <button id="btnEdit" class="btn btn-danger">UBAH</button>    </div>  </div>  <div class="form-group row">    <label class="col-md-3 col-form-label">NAMA LENGKAP</label>    <div class="col-md-5">      <input id="inputSiswa" value="<?php echo $nama_siswa;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text">    </div>  </div>  <div class="form-group row">    <label class="col-md-3 col-form-label">TEMPAT LAHIR</label>    <div class="col-md-3">      <input value="<?php echo $tempatLahir;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text">    </div>    <label class="col-md-2 col-form-label">TANGGAL LAHIR</label>    <div class="col-md-3">      <input value="<?php echo $tanggalLahir;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text">    </div>  </div>  <div class="form-group row">    <label class="col-md-3 col-form-label">JENIS KELAMIN</label>    <div class="col-md-4">      <select name="jenisKelamin" class="form-control">        <option class="form-control" selected>Laki-laki</option>        <option class="form-control">Perempuan</option>      </select>    </div>  </div>  <div class="form-group row">    <label class="col-md-3 col-form-label" readonly>ALAMAT</label>    <div class="col-md-5">      <textarea name="infoguru" cols="40" rows="4" class="form-control"><?php echo $alamatSiswa;?></textarea>    </div>  </div>
</form>

Making Readonly all fields in a form

This should work:

$(':input').attr('readonly','readonly');

Or if you have a specific form...

$('#myFormID :input').attr('readonly','readonly');

If you are using just plain JavaScript, you'll want to do this.

var f = document.forms['myFormNAME'];
for(var i=0,fLen=f.length;i<fLen;i++){
  f.elements[i].readOnly = true;//As @oldergod noted, the "O" must be upper case
}

One side note... although you can "set" the readonly flag on checkbox and hidden input fields... it won't actually make them readonly.

HTML form readonly SELECT tag/input

You should keep the select element disabled but also add another hidden input with the same name and value.

If you reenable your SELECT, you should copy its value to the hidden input in an onchange event and disable (or remove) the hidden input.

Here is a demo:

$('#mainform').submit(function() {    $('#formdata_container').show();    $('#formdata').html($(this).serialize());    return false;});
$('#enableselect').click(function() {    $('#mainform input[name=animal]')        .attr("disabled", true);        $('#animal-select')        .attr('disabled', false)     .attr('name', 'animal');        $('#enableselect').hide();    return false;});

#formdata_container {    padding: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div>    <form id="mainform">        <select id="animal-select" disabled="true">            <option value="cat" selected>Cat</option>            <option value="dog">Dog</option>            <option value="hamster">Hamster</option>        </select>        <input type="hidden" name="animal" value="cat"/>        <button id="enableselect">Enable</button>                <select name="color">            <option value="blue" selected>Blue</option>            <option value="green">Green</option>            <option value="red">Red</option>        </select>
        <input type="submit"/>    </form></div>
<div id="formdata_container" style="display:none">    <div>Submitted data:</div>    <div id="formdata">    </div></div>

How can I make an input field read only but still have it send data back to a form?

Adding a hidden field with the same name will sends the data when the form is submitted.

<input type="hidden" name="my_name" value="blablabla" />
<input type="text" name="my_name" value="blablabla" disabled="disabled" />

How to make a input field readonly with JavaScript?

You can get the input element and then set its readOnly property to true as follows:

document.getElementById('InputFieldID').readOnly = true;

Specifically, this is what you want:

<script type="text/javascript">
  function onLoadBody() {
    document.getElementById('control_EMAIL').readOnly = true;
  } 
</script>

Call this onLoadBody() function on body tag like:

<body onload="onLoadBody">

View Demo: jsfiddle.

Adding readonly attribute to all form elements

Try this:

$('#form1 input').attr('readonly', 'readonly');

You may want to include more elements #form1 input, #form1 textarea, #form1 select
In jQuery, you usually don't need to iterate over the collection. attr would work for a collection same as for a single element.
In your case, #form1 matched just the <form> element, and each was triggered once, for that element. To find all elements (input or not), you can write #form1 *.