Javascript-Funktion Werte von den Inhalt editierbare Spanne auf eine versteckte Form einfügen

Question

Ich versuche, Werte von editierbaren Spannweiten für versteckte Form einer versteckten Form über diese Javascript zu holen:

<script type="text/javascript"> 
    function fillup() { 
     document.getElementById('fname').value = document.getElementById('nfname').innerHTML; 
     document.getElementById('mname').value = document.getElementById('nmname').innerHTML; 
     document.getElementById('lname').value = document.getElementById('nlname').innerHTML; 
     document.getElementById('email').value = document.getElementById('nemail').innerHTML; 
     document.getElementById('gen').value = document.getElementById('ngen').innerHTML; 
     document.getElementById('dob').value = document.getElementById('ndob').innerHTML; 
     var str = document.getElementById('nloc').innerHTML; 
     var parts = str.split(','); 
     document.getElementById('city').value = parts[0]; 
     document.getElementById('state').value = parts[1]; 
     if(document.getElementById('fname').value == '' || document.getElementById('mname').value == '' || document.getElementById('lname').value == '' || document.getElementById('email').value == '' || document.getElementById('gen').value == '' || document.getElementById('dob').value == '' || document.getElementById('city').value == '' || document.getElementById('state') == ''){ 
      alert('something is empty!'); 
     } 
     else { 
      alert(str); 
     } 
    } 
</script> 

und finden Sie das Formular:

<form method="post" action="{{ path('admin_update') }}"> 
     <div class="hidden"> 
      <input type="text" id="fname" name="fname" /> 
      <input type="text" id="mname" name="mname" /> 
      <input type="text" id="lname" name="lname" /> 
      <input type="email" id="mail" name="email" /> 
      <input type="text" id="gen" name="gen" /> 
      <input type="text" id="dob" name="dob" /> 
      <input type="text" id="city" name="city" /> 
      <input type="text" id="state" name="state" /> 
     </div> 
     <input type="submit" id="btn" value="save changes" onclick="fillup()" /> 
    </form> 

wie vorhin gesagt, mit Ausnahme der Taste einreichen andere Textbereiche in Form deaktiviert sind, die Spannweiten sind:

<div class="row"> 
     <div class="fname"> 
      <span class="fname" id="nfname" contenteditable="true" onchange="appear()">{{ fname }}</span> 
      <hr /> 
      <span class="st">First name</span> 
     </div> 
     <div class="mname"> 
      <span class="mname" id="nmname" contenteditable="true" onchange="appear()">{{ mname }}</span> 
      <hr /> 
      <span class="st">Middle name</span> 
     </div> 
     <div class="lname"> 
      <span class="lname" id="nlname" contenteditable="true" onchange="appear()">{{ lname }}</span> 
      <hr /> 
      <span class="st">Last name</span> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="email"> 
      <span class="email" id="nemail" contenteditable="true">{{ email }}</span> 
      <hr /> 
      <span class="st">Email</span> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="gender"> 
      <span class="gender" id="ngen" contenteditable="true">{{ gen }}</span> 
      <hr /> 
      <span class="st">Gender</span> 
     </div> 
     <div class="DOB"> 
      <span class="DOB" id="ndob" contenteditable="true" id="datepicker">{{ dob|date("m/d/Y") }}</span> 
      <hr /> 
      <span class="st">Date of birth</span> 
     </div> 
     <div class="loc"> 
      <span class="loc" id="nloc" contenteditable="false">{{ loc }}</span> 
      <hr /> 
      <span class="st">Location</span> 
     </div> 

Answer 1

Ich habe den Code in eine plunkr setzen https://plnkr.co/edit/n8m58L7dFiFOPJBKJfvI?p=preview

Für mich sieht es ok - und es funktioniert auf jeden Fall, soweit ich Ihre Anforderung verstehen. Ich würde vorschlagen, den Funktionsaufruf "fillup()" an das OnSubmit-Ereignis des Formulars zu binden.

<form method="post" action="." onSubmit="fillup()"> 

Auch überprüfen Sie bitte für diese Linie in der Funktion:

document.getElementById('email').value = document.getElementById('nemail').innerHTML; 

Die id des Elements ist nicht "E-Mail" - es ist "mail"