it-swarm.com.de

Wie kann ich ein komplettes HTML-Formular "schreibgeschützt" erstellen?

Nochmal bearbeiten: 

Das ist doch Standard? Ich kann das Rad nicht neu erfinden? !! Der Benutzer füllt ein Formular aus und Sie zeigen es ihm (mit PHP, aber das sollte keine Rolle spielen). Sie zeigen es ihm als Bestätigung, also sollte er nicht versuchen können, es noch einmal zu ändern ... 


Siehe verwandte Frage, Wie kann ein Formularlistenfeld schreibgeschützt oder mit einem ausgewählten Index deaktiviert werden? Das Wichtigste daran ist, dass ich eine sehr gewöhnliche Aufgabe erfüllen möchte ...

Es gibt zwei Formulare - ein Übermittlungsformular in HTML und ein Bearbeitungs- und Bestätigungsformular in PHP.

Das erste Formular bietet eine Auswahl in vielen Steuerelementen, das zweite überprüft die Eingabe und zeigt, falls gültig, das Eingabeformular mit einer Bestätigungsmeldung erneut an. In diesem zweiten Formular müssen alle Felder statisch sein.

Soweit ich sehen kann, können einige Formularsteuerelemente readonly sein und alle können disabled sein, mit dem Unterschied, dass Sie immer noch zu einem schreibgeschützten Feld wechseln können.

Anstatt dieses Feld für Feld zu tun, gibt es sowieso die Möglichkeit, die gesamte Form als schreibgeschützt/deaktiviert/statisch zu markieren, sodass der Benutzer keine der Steuerelemente ändern kann.


Edit: danke für alle JS-Lösungen (die ich +1 habe), aber ich bin auf eine serverseitige Lösung beschränkt. Entschuldigung, ich hätte das ursprünglich sagen sollen.


[Update] Dies wird auch sieben Jahre später immer noch beantwortet ;-) Am Ende generierte ich das Formular aus PHP und schreibe für jedes Feld ein readonly- oder disabled-Attribut (je nach Typ) von control), entsprechend einer globalen Variablen auf true oder false gesetzt.

106
Mawg

Wickeln Sie die Eingabefelder und andere Elemente in einen <fieldset> und geben Sie das disabled="disabled"-Attribut an.

Beispiel ( 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>

191
techouse

Nicht alle Formularelemente können auf readonly gesetzt werden. Beispiel:

  • ankreuzfelder 
  • funkboxen 
  • datei-Upload 
  • ...Mehr..

Die sinnvolle Lösung wäre, alle disabled-Attribute der Formularelemente auf true zu setzen, da das OP nicht angegeben hat, dass das bestimmte "gesperrte" Formular an den Server gesendet werden soll (was das disabled-Attribut nicht zulässt).

Eine weitere Lösung, die in der folgenden Demo vorgestellt wird, ist das Platzieren einer Ebene über dem form-Element, das jegliche Interaktion mit allen Elementen innerhalb des form-Elements verhindert, da diese Ebene mit einem größeren z-index-Wert festgelegt ist:

DEMO:

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>

8
vsync

Mit dieser Funktion können Sie das Formular deaktivieren:

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

Sehen Sie die Arbeitsdemo hier

Beachten Sie, dass es jQuery verwendet.

6
Sarfraz

Fügen Sie auf der Bestätigungsseite den Inhalt nicht in bearbeitbare Steuerelemente ein, sondern schreiben Sie sie auf die Seite.

5
Doobi

Es gibt keine eingebaute Methode, von der ich weiß, dass sie dies tun kann. Daher müssen Sie eine benutzerdefinierte Lösung entwickeln, je nachdem, wie kompliziert Ihr Formular ist. Sie sollten diesen Beitrag lesen:

Konvertieren Sie HTML-Formulare in schreibgeschützte

EDIT: Warum sind Sie aufgrund Ihres Updates so besorgt, dass es nur gelesen werden kann? Sie können dies über die Client-Seite tun, andernfalls müssen Sie jedem Steuerelement das erforderliche Tag hinzufügen oder die Daten konvertieren und als Rohtext ohne Steuerelemente anzeigen. Wenn Sie versuchen, es nur lesbar zu machen, so dass der nächste Beitrag nicht geändert wird, dann haben Sie ein Problem, denn jeder kann sich mit dem Beitrag beschäftigen, um zu produzieren, was immer er will um sicherzustellen, dass es gültig ist.

4
Kelsey

Es gibt keine vollständig kompatible, offizielle HTML-Methode, aber ein wenig Javascript kann einen langen Weg gehen ... Ein anderes Problem, dem Sie begegnen, ist, dass deaktivierte Felder nicht in den POST - Daten angezeigt werden

3
Michael Clerx

Einfachster Weg

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

Dies ist eine ideale Lösung zum Deaktivieren aller input, textareas, selects und Tasten in einem angegebenen Element.

Für jQuery 1.6 und höher :

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

Oder

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

jQuery 1.5 und darunter :

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

Und

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

Haben Sie alle Formular-IDs nummeriert und führen Sie eine for-Schleife in JS aus. 

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

Ich würde lieber jQuery verwenden:

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

find () würde bis n-te verschachteltes Kind viel tiefer gehen als children (), was nur nach unmittelbaren Kindern sucht.

1
user163861

Sie fügen eine unsichtbare HTML-Ebene über dem Formular hinzu. Zum Beispiel

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

und Stil:

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

Natürlich kann der Benutzer diese Ebene im Webbrowser ausblenden.

0
Marcin Żurek