comment prévisualiser les champs de saisie dynamique avec les données utilisateur avant de soumettre en utilisant javascript

Question

Je viens de commencer à apprendre et à implémenter javascript. voici mon code pls aide-moi « comment prévisualiser champs d'entrée dynamique avec des données utilisateur soumettre avant d'utiliser javascript » ici est un exemple de code ..

var counterText = 0; 
 
var counterpasswordfield = 0; 
 
var counterRadioButton = 0; 
 
var counterCheckBox = 0; 
 
var counterTextArea = 0; 
 
var counterButon = 0; 
 
var counterdropdown = 0; 
 
var counterlabel = 0; 
 

 
function addAllInputs(divName, inputType) { 
 
    var newdiv = document.createElement('div'); 
 
    switch (inputType) { 
 
    case 'text': 
 
     var x = prompt("Enter Label Name"); 
 
     if (x != null) { 
 
     newdiv.innerHTML = "<label for='uname'>" + x + "</label>: <input type='" + inputType + "' id='myval' name='myInputs[]'><br>"; 
 
     counterText++; 
 
     } 
 
     break; 
 
    case 'password': 
 
     var x = prompt("Enter Label Name"); 
 
     newdiv.innerHTML = x + ": <input type='password' name='myInputs[]'><br>"; 
 
     counterpasswordfield++; 
 
     break; 
 
    case 'label': 
 
     var x = prompt("Enter Label Name"); 
 
     newdiv.innerHTML = x + "<br>"; 
 
     counterlabel++; 
 
     break; 
 
    case 'email': 
 
     var x = prompt("Enter Label Name"); 
 
     newdiv.innerHTML = x + ": <input type='email' name='myInputs[]'><br>"; 
 
     counterlabel++; 
 
     break; 
 
    case 'radio': 
 
     var x = prompt("Enter Label Name"); 
 
     newdiv.innerHTML = x + ": <input type='radio' name='myRadioButtons[]'><br>"; 
 
     counterRadioButton++; 
 
     break; 
 
    case 'checkbox': 
 
     var x = prompt("Enter Label Name"); 
 
     newdiv.innerHTML = x + ": <input type='checkbox' name='myCheckBoxes[]'><br>"; 
 
     counterCheckBox++; 
 
     break; 
 
    case 'dropdown': 
 
     var x = prompt("Enter Label Name"); 
 
     newdiv.innerHTML = x + ": <Select selected><option>--- Select ---</option><option>Yes</option><option>No</option></select><br>"; 
 
     counterdropdown++; 
 
     break; 
 
    case 'textarea': 
 
     var x = prompt("Enter Label Name"); 
 
     newdiv.innerHTML = x + ": <textarea name='myTextAreas[]'>type here...</textarea>"; 
 
     counterTextArea++; 
 
     break; 
 
    case 'button': 
 
     var x = prompt("Enter Label Name"); 
 
     newdiv.innerHTML = "<button>" + x + "</button>"; 
 
     counterButon++; 
 
     break; 
 
    } 
 
    document.getElementById(divName).appendChild(newdiv); 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <form name="myForm" method="POST"> 
 
     <p> 
 
      <select name="inputSelect" onchange="addAllInputs( 'dynamicInputs', document.myForm.inputSelect.value);"> 
 
\t \t \t <option value="" selected>--- Select ---</option> 
 
\t \t \t <option value="text">Text Field</option> 
 
\t \t \t <option value="label">Label</option> 
 
\t \t \t <option value="password">Password Field</option> 
 
\t \t \t <option value="email">e-Mail Field</option> 
 
\t \t \t <option value="radio">Radio Button</option> 
 
\t \t \t <option value="checkbox">Check Box</option> 
 
\t \t \t <option value="dropdown">Drop Down</option> 
 
\t \t \t <option value="textarea">Text Area</option> 
 
\t \t \t <option value="button">Button</option> 
 
\t \t \t </select><br></p> 
 
     </form> 
 
    </div> 
 
    <div class="col-md-8 bdr"> 
 
     <form name="myform" id="myform" method="POST"> 
 
     <div class="col-md-8 bdr" id="dynamicInputs" /> 
 
     <button id="register" value="Register" onclick="subreg()">Register</button> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Voici le code JQuery qui afficherait la valeurs du champ en cliquant sur le bouton d'enregistrement. Vous pouvez vérifier, jouer avec elle et peut donc ruser pour répondre à vos besoins:

var counterText = 0; 
 
var counterpasswordfield = 0; 
 
var counterRadioButton = 0; 
 
var counterCheckBox = 0; 
 
var counterTextArea = 0; 
 
var counterButon = 0; 
 
var counterdropdown = 0; 
 
var counterlabel = 0; 
 

 
function addAllInputs(divName, inputType) { 
 
    var newdiv = document.createElement('div'); 
 
    switch (inputType) { 
 
    case 'text': 
 
     var x = prompt("Enter Label Name"); 
 
     if (x != null) { 
 
     newdiv.innerHTML = "<label for='uname'>" + x + "</label>: <input type='" + inputType + "' id='myval' name='myInputs[]'><br>"; 
 
     counterText++; 
 
     } 
 
     break; 
 
    case 'password': 
 
     var x = prompt("Enter Label Name"); 
 
     newdiv.innerHTML = x + ": <input type='password' name='myInputs[]'><br>"; 
 
     counterpasswordfield++; 
 
     break; 
 
    case 'label': 
 
     var x = prompt("Enter Label Name"); 
 
     newdiv.innerHTML = x + "<br>"; 
 
     counterlabel++; 
 
     break; 
 
    case 'email': 
 
     var x = prompt("Enter Label Name"); 
 
     newdiv.innerHTML = x + ": <input type='email' name='myInputs[]'><br>"; 
 
     counterlabel++; 
 
     break; 
 
    case 'radio': 
 
     var x = prompt("Enter Label Name"); 
 
     newdiv.innerHTML = x + ": <input type='radio' name='myRadioButtons[]'><br>"; 
 
     counterRadioButton++; 
 
     break; 
 
    case 'checkbox': 
 
     var x = prompt("Enter Label Name"); 
 
     newdiv.innerHTML = x + ": <input type='checkbox' name='myCheckBoxes[]'><br>"; 
 
     counterCheckBox++; 
 
     break; 
 
    case 'dropdown': 
 
     var x = prompt("Enter Label Name"); 
 
     newdiv.innerHTML = x + ": <Select selected><option>--- Select ---</option><option>Yes</option><option>No</option></select><br>"; 
 
     counterdropdown++; 
 
     break; 
 
    case 'textarea': 
 
     var x = prompt("Enter Label Name"); 
 
     newdiv.innerHTML = x + ": <textarea name='myTextAreas[]'>type here...</textarea>"; 
 
     counterTextArea++; 
 
     break; 
 
    case 'button': 
 
     var x = prompt("Enter Label Name"); 
 
     newdiv.innerHTML = "<button>" + x + "</button>"; 
 
     counterButon++; 
 
     break; 
 
    } 
 
    document.getElementById(divName).appendChild(newdiv); 
 
} 
 

 
$("#register").on('click', function() { 
 
    $("#dynamicInputs input").each(function() { 
 
    $("#previewValues").append($(this).val()); 
 
    }); 
 

 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <form name="myForm" method="POST"> 
 
     <p> 
 
      <select name="inputSelect" onchange="addAllInputs( 'dynamicInputs', document.myForm.inputSelect.value);"> 
 
\t \t \t <option value="" selected>--- Select ---</option> 
 
\t \t \t <option value="text">Text Field</option> 
 
\t \t \t <option value="label">Label</option> 
 
\t \t \t <option value="password">Password Field</option> 
 
\t \t \t <option value="email">e-Mail Field</option> 
 
\t \t \t <option value="radio">Radio Button</option> 
 
\t \t \t <option value="checkbox">Check Box</option> 
 
\t \t \t <option value="dropdown">Drop Down</option> 
 
\t \t \t <option value="textarea">Text Area</option> 
 
\t \t \t <option value="button">Button</option> 
 
\t \t \t </select><br></p> 
 
     </form> 
 
    </div> 
 
    <div class="col-md-8 bdr"> 
 
     <form name="myform" id="myform" method="POST"> 
 
     <div class="col-md-8 bdr" id="dynamicInputs" /> 
 
     <button id="register" value="Register">Register</button> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div> 
 
Preview: 
 
<div id="previewValues"></div>