Mam dwie strony z formularzami HTML. Pierwsza strona zawiera formularz zgłoszeniowy, a druga strona zawiera formularz potwierdzenia. Pierwszy formularz oferuje wybór wielu kontrolek, podczas gdy druga strona ponownie wyświetla dane z formularza zgłoszeniowego z komunikatem potwierdzającym. W tym drugim formularzu wszystkie pola muszą być statyczne.

Z tego, co widzę, niektóre kontrolki formularza mogą być readonlyi wszystkie mogą być disabled, różnica polega na tym, że nadal możesz tabulować pole tylko do odczytu.

Zamiast robić to pole po polu, czy istnieje sposób, aby oznaczyć cały formularz jako tylko do odczytu / wyłączony / statyczny, tak aby użytkownik nie mógł zmienić żadnej z kontrolek?

Zawiń pola wejściowe i inne rzeczy w a <fieldset>i nadaj mu disabled="disabled"atrybut.

Przykład ( 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>

Nie wszystkie elementy formularza można ustawić na readonly, na przykład:

• pola wyboru
• skrzynki radiowe
• Udostępnianie pliku
• ...więcej..

Wtedy rozsądnym rozwiązaniem byłoby ustawienie disabledatrybutów wszystkich elementów formularza na true, ponieważ OP nie określał, że konkretny „zablokowany” formularz powinien zostać wysłany do serwera (na co ten disabledatrybut nie pozwala).

Innym rozwiązaniem, które zostało zaprezentowane na poniższym demo, jest umieszczenie warstwy na wierzchu formelementu, co uniemożliwi jakąkolwiek interakcję ze wszystkimi elementami wewnątrz formelementu, ponieważ ta warstwa ma ustawioną większą z-indexwartość:

PRÓBNY:

var form = document.forms[0], // form element to be "readonly"
    btn1 = document.querySelectorAll('button')[0],
    btn2 = document.querySelectorAll('button')[1]

btn1.addEventListener('click', lockForm)
btn2.addEventListener('click', lockFormByCSS)

function lockForm(){
  btn1.classList.toggle('on');
  [].slice.call( form.elements ).forEach(function(item){
      item.disabled = !item.disabled;
  });
}

function lockFormByCSS(){
  btn2.classList.toggle('on');
  form.classList.toggle('lock');
}

form{ position:relative; } 
form.lock::before{
  content:'';
  position:absolute;
  z-index:999;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

button.on{ color:red; }

<button type='button'>Lock / Unlock Form</button>
<button type='button'>Lock / Unlock Form (with CSS)</button>
<br><br>
<form>
  <fieldset>
    <legend>Some Form</legend>
    <input placeholder='text input'>
    <br><br>
    <input type='file'>
    <br><br>
    <textarea placeholder='textarea'></textarea>
    <br><br>
    <label><input type='checkbox'>Checkbox</label>
    <br><br>
    <label><input type='radio' name='r'>option 1</label>
    <label><input type='radio' name='r' checked>option 2</label>
    <label><input type='radio' name='r'>option 3</label>
    <br><br>
    <select>
      <option>options 1</option>
      <option>options 2</option>
      <option selected>options 3</option>
    </select>
  </fieldset>
</form>

Możesz użyć tej funkcji, aby wyłączyć formularz:

function disableForm(formID){
  $('#' + formID).children(':input').attr('disabled', 'disabled');
}

Zobacz działające demo tutaj

Zauważ, że używa jQuery.

Na stronie potwierdzenia nie umieszczaj zawartości w edytowalnych formantach, po prostu zapisz je na stronie.

Nie ma żadnego wbudowanego sposobu, aby to zrobić, więc będziesz musiał wymyślić niestandardowe rozwiązanie w zależności od tego, jak skomplikowany jest Twój formularz. Powinieneś przeczytać ten post:

Konwertuj formularze HTML na tylko do odczytu ( Aktualizacja : uszkodzony link do posta, zarchiwizowany link )

EDYCJA: Dlaczego w oparciu o aktualizację tak martwisz się, że jest ona tylko do odczytu? Możesz to zrobić po stronie klienta, ale jeśli nie, będziesz musiał dodać wymagany tag do każdej kontrolki lub przekonwertować dane i wyświetlić je jako surowy tekst bez kontrolek. Jeśli próbujesz uczynić go tylko do odczytu, aby następny post był niezmodyfikowany, masz problem, ponieważ każdy może zepsuć post, aby wyprodukować cokolwiek zechce, więc kiedy w końcu otrzymasz dane, lepiej to sprawdź ponownie, aby upewnić się, że jest ważny.

Nie ma w pełni zgodnego, oficjalnego sposobu na HTML, ale trochę javascript może wiele zdziałać. Innym problemem, na który napotkasz, jest to, że wyłączone pola nie pojawiają się w danych POST

Jest to idealne rozwiązanie do wyłączania wszystkich wejść , obszarów tekstowych , zaznaczeń i przycisków w określonym elemencie.

Dla jQuery 1.6 i nowszych :

// To fully disable elements
$('#myForm :input').prop('disabled', true); 

Lub

// To make elements readonly
$('#myForm :input').prop('readonly', true); 

jQuery 1.5 i starsze :

$('#myForm :input').prop('disabled', 'disabled');

I

$('#myForm :input').prop('readonly', 'readonly');

Innym prostym sposobem obsługiwanym przez wszystkie przeglądarki byłoby:

HTML:

<form class="disabled">
  <input type="text" name="name" />
  <input type="radio" name="gender" value="male">
  <input type="radio" name="gender" value="female">
  <input type="checkbox" name="vegetarian">
</form>

CSS:

.disabled {
  pointer-events: none;
  opacity: .4;
}

Należy jednak pamiętać, że tabulacja nadal działa z tym podejściem, a użytkownik może nadal manipulować elementami z fokusem.

Miej ponumerowane wszystkie identyfikatory formularzy i uruchom pętlę for w JS.

 for(id = 0; id<NUM_ELEMENTS; id++)
   document.getElementById(id).disabled = false; 

Wolałbym raczej używać jQuery:

$('#'+formID).find(':input').attr('disabled', 'disabled');

Funkcja find () sięgałaby znacznie głębiej do n-tego zagnieżdżonego dziecka niż children (), która szuka tylko najbliższych dzieci.

Najprostszy sposób

$('#yourform *').prop('readonly', true);

Nad formularzem dodajesz niewidoczną warstwę html. Na przykład

<div class="coverContainer">
<form></form>
</div>

i styl:

.coverContainer{
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0,0,0,0);
    position: absolute;
}

Oczywiście użytkownik może ukryć tę warstwę w przeglądarce internetowej.