Wie können die Formularfeldwerte auf derselben Seite ausgedruckt werden, nachdem der Benutzer den Befehl submit eingegeben hat?

Question

Ich versuche, die Informationen unter dem Formular anzuzeigen, nachdem Sie auf "Senden" geklickt haben. Bitte helfen Sie mir, dies herauszufinden. Die Senden-Schaltfläche zeigt nichts an. Kann mir bitte jemand erklären? Hier ist mein HTML-Code:

<form id="myform" role="form"> 
     <label for="Name">Name:</label> 
     <input type="text" class="form-control" id="Name"> 
     <div class="dropdown"> 
     <label for="countries">Country:</label> 
     <select class="form-control" id="countries"> 
      <option value="">Select a Country:</option> 
     </select> 
     <label for="states">State:</label> 
     <select class="form-control" id="states"> 
      <option value="">Select a State</option> 
     </select> 
     <input type="submit" onclick="showInput();"> 
    </form> 
    </div> 
     <label> Your input:</label> 
     <p><span id='display'> 
    </span></p> 

Hier ist mein JavaScript-Code:

function showInput() { 
    var output_info = document.getElementById("myform").value; 

    document.getElementById('display').innerHTML = output_info; 
} 

Answer 1

Versuchen gehören name Attribut bei input, select Elemente innerhalb form; Verwenden Sie .querySelectorAll() mit Selektor "input:not([type=submit]), select" verkettet an form, um form Elemente auszuwählen; for Schleifenelemente durch .querySelectorAll()

<script> 
 
    function showInput(e) { 
 
    e.preventDefault(); 
 
    var output_info = document.getElementById("myform"); 
 
    var display = document.getElementById("display"); 
 
    var data = output_info.querySelectorAll("input:not([type=submit]), select"); 
 
    for (var i = 0; i < data.length; i++) { 
 
     display.innerHTML += "name:" + data[i].name + " value:" + data[i].value + "<br>" 
 
    } 
 
    } 
 
</script> 
 
<form id="myform" role="form"> 
 
    <label for="Name">Name:</label> 
 
    <input type="text" class="form-control" name="Name" id="Name" /> 
 
    <div class="dropdown"> 
 
    <label for="countries">Country:</label> 
 
    <select class="form-control" id="countries" name="countries"> 
 
     <option value="">Select a Country:</option> 
 
     <option value="abc" selected>abc</option> 
 
    </select> 
 
    <label for="states">State:</label> 
 
    <select class="form-control" id="states" name="states"> 
 
     <option value="">Select a State</option> 
 
     <option value="123" selected>123</option> 
 
    </select> 
 
    <input type="submit" onclick="showInput(event);" /> 
 
    </div> 
 
</form> 
 
<label>Your input:</label> 
 
<p><span id='display'> 
 
    </span> 
 
</p>

Answer 2

versuchen diese

<?php 
if(isset($_POST["submit"])) 
{ 

echo $_POST["Name"]; 
echo $_POST["countries"]; 
echo $_POST["states"]; 
} 
?> 
<form id="myform" role="form" action="" method="post"> 
     <label for="Name">Name:</label> 
     <input type="text" class="form-control" name="Name"> 
     <label for="countries">Country:</label> 
     <select class="form-control" name="countries"> 
      <option value="">Select a Country:</option> 
     </select> 
     <label for="states">State:</label> 
     <select class="form-control" name="states"> 
      <option value="">Select a State</option> 
     </select> 
     <input type="submit" name="submit"> 
    </form>