ユーザーが送信を入力した後、同じページにフォームフィールド値を印刷するにはどうすればよいですか？

Question

提出したフォームの下に情報を表示しようとしています。これを理解するのを助けてください。送信ボタンには何も表示されません。誰か説明していただけますか？ここ は私のHTMLコードです：

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

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

Answer 1

を試してみてください。

ここ

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

は私のJavaScriptコードがありますform;セレクタ付き.querySelectorAll()を"input:not([type=submit]), select"に接続してformに接続してform要素を選択してください。また、あなたのマークアップを共有.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

内select要素、inputでname属性を含める試しこの

<?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>