Wie man sich an ein Formular erinnert, wird verlängert?

Question

Ich habe eine mehrstufige Form in meinem Projekt, deren erster Schritt eine JavaScript extend Feldfunktion hat, wo ein Benutzer zusätzliche Felder hinzufügen kann. Wenn der Benutzer zum nächsten Schritt geht, werden die Daten natürlich in der Sitzung bis zur endgültigen Übermittlung gespeichert. Das erweiterte Formular wird jedoch nicht gespeichert. Wenn der Benutzer von dem nächsten Schritt zurückgeht, werden das zusätzliche Feld und seine Daten nicht angezeigt. Schlimmer noch, wenn die Daten in dem zusätzlichen Feld ungültig sind, wird der Benutzer sie nicht sehen, da die Nachricht unter dem verschwundenen Feld (I verwende CakePHP Standardvalidierung).

Gibt es eine Möglichkeit, wie die Einstellung in Sitzung zu speichern, damit es bleibt?

var counter = 0; 
 
function moreFields(val1, val2, val3) { 
 
\t counter++; 
 
\t var newField = document.getElementById(val1).cloneNode(true); 
 
\t newField.id = ''; 
 
\t newField.style.display = 'block'; 
 
\t var newFields = newField.querySelectorAll('[name], [id], [for], [data-display]'); 
 
\t \t for (var i=0;i<newFields.length;i++) { 
 
\t \t \t var theNames = newFields[i].name 
 
\t \t \t if (theNames) 
 
\t \t \t \t newFields[i].name = "data[" + val3 + "][" + counter + "][" + theNames + "]"; 
 
\t \t \t var theNames2 = newFields[i].id; 
 
\t   if (theNames2) 
 
\t    newFields[i].id = theNames2 + counter; 
 
\t   \t console.log(newFields[i].id); 
 
\t   var theNames3 = newFields[i].htmlFor; 
 
\t   if (theNames3) 
 
\t    newFields[i].htmlFor = theNames3 + counter; 
 
\t   \t //console.log(newFields[i].htmlFor); 
 
    \t \t var theNames4 = newFields[i].dataset.display; 
 
\t   if (theNames4) 
 
\t    newFields[i].dataset.display = theNames4 + counter; 
 
\t   \t console.log(newFields[i].dataset.display); \t 
 
\t \t } \t \t \t 
 
\t var insertHere = document.getElementById(val2); 
 
\t insertHere.parentNode.insertBefore(newField,insertHere); 
 
}

<span id="readroot" style="display: none"> 
 
<div class="row"> 
 
\t <div class="col-lg-6"> 
 
\t \t <div class="form-group required"> 
 
      <label for="Student1Grade">Grade</label> 
 
      <select name="grade" data-display="#display_student_1_grade" class="form-control" id="Student1Grade" required="required"> 
 
       <option value="">Please Select</option> 
 
       <option value="1">Grade 1</option> 
 
       <option value="1">Grade 2</option> 
 
      </select> 
 
     </div> \t \t \t \t \t \t 
 
\t </div> 
 
\t <div class="col-lg-6"> 
 
\t \t <div class="form-group"> 
 
      <label for="Student1Gender">Gender</label>  
 
      <select name="gender" data-display="#display_student_1_gender" class="form-control" id="Student1Gender"> 
 
       <option value="1">Male</option> 
 
       <option value="2">Female</option> 
 
      </select> 
 
     </div> 
 
\t </div> \t 
 
</div> 
 
<input class="btn btn-default" type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br /> 
 
</span> 
 
<span id="writeroot"></span> \t \t 
 
<input class="btn btn-default" type="button" onclick="moreFields('readroot', 'writeroot', 'Student')" value="Add Field" />

Answer 1

Sie müssen entweder session oder localstorage für Ihre Seite implementieren.

localStorage - speichert Daten ohne Verfallsdatum

sessionStorage - speichert Daten für eine Sitzung (Daten verloren gehen, wenn der Browser-Tab geschlossen wird) I

Hier nur, durch die für Ihre Hilfe Beispielcode bin Entsendung Du kannst deine Wunschaufgabe erledigen. Sie müssen nur das logische Konzept von unten Code folgen und in Ihrem Code implementieren.

Es gibt auch ein Beispiel, das nur id enthält, aber Sie können es auf andere Weise implementieren, die Ihre Aufgabe voll erfüllen kann.

click here