在同一頁面上顯示提交的表單數據

Question

我試圖在同一頁面上顯示在我的表單中鍵入和提交的內容。我得到了第一個輸入「名稱」來顯示，但無法讓剩下的顯示出來。我正在使用JQuery驗證器。我覺得這是我在這裏想念的簡單東西。謝謝！

腳本：

$(function() { 
    $("#signup").validate(); 

    $("#signup").submit(function(e) { 
     e.preventDefault(); 

     var display = 

     $("#name").val(); 
     $("#theage").val(); 
     $("#theemail").val();   


     $("#result").html(display); 
    }); 
}); 

HTML：。

<div> 
    <form id="signup"> 
     <label for="name" class="label">Enter your name</label> 
     <input type="text" name="name" id="name" title="Required" class="required">&nbsp; 

     <label for="theage" class="label">Enter your age</label> 
     <input type="text" name="theage" id="theage" title="Required" class="required digits">&nbsp; 

     <label for="theemail" class="label">Enter your email</label> 
     <input type="text" name="theemail" id="theemail" title="Please enter a valid email address" class="required email">&nbsp; 

     <input type='submit' value='Submit' name="submit" id='submitme'> 
    </form> 

    <p> Your name: </p> 
    <p> Age: </p> 
    <p> Email: </p> 
    <p id="result"></p> 
</div> 

Answer 1

我相信你的問題是，因爲你只添加$（ 「＃名字」）VAL（）來顯示變量，你需要連接它們。

var display = $("#name").val() + " " + 
       $("#theage").val() + " " + 
       $("#theemail").val(); 

下面是一個例子：

var result = 
 
      "Hello "; // semi colon ends the assignment 
 
      "world"; // this is doing nothing 
 

 
$('#result1').html(result); 
 

 

 
var result2 = 
 
      "Hello " + 
 
      "world"; 
 

 
$('#result2').html(result2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
1: 
 
<div id="result1"></div> 
 
<br> 2: 
 
<div id="result2"></div>

Answer 2

該錯誤不控制檯扔，你缺失的插件。

$(function() { 
 

 
     $("#signup").validate(); 
 

 
     $("#signup").submit(function(e) { 
 
      e.preventDefault(); 
 

 
      var display = 
 

 
      $("#name").val(); 
 
      $("#theage").val(); 
 
      $("#theemail").val();   
 

 

 
      $("#result").html(display); 
 

 
     }); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> 
 
<div> 
 
    <form id="signup"> 
 

 
     <label for="name" class="label">Enter your name</label> 
 
     <input type="text" name="name" id="name" title="Required" class="required">&nbsp; 
 

 

 

 
     <label for="theage" class="label">Enter your age</label> 
 
     <input type="text" name="theage" id="theage" title="Required" class="required digits">&nbsp; 
 

 

 

 
     <label for="theemail" class="label">Enter your email</label> 
 
     <input type="text" name="theemail" id="theemail" title="Please enter a valid email address" class="required email">&nbsp; 
 

 
     <input type='submit' value='Submit' name="submit" id='submitme'> 
 

 
    </form> 
 
    <p> Your name: </p> 
 
    <p> Age: </p> 
 
    <p> Email: </p> 
 
    <p id="result"></p> 
 

 
</div>

Answer 3

您需要連接形式值。現在，您只需將name添加到您的display變種中。

var display = 
    $("#name").val(); // statement ends here because of semicolon 
    $("#theage").val(); 
    $("#theemail").val(); 

需要改變，以

var display = 
    $("#name").val() + " " + 
    $("#theage").val() + " " + 
    $("#theemail").val(); 

Answer 4

要顯示你可以使用下面的表單中輸入的值：

$(function() { 
    $("#signup").validate(); 

    $("#signup").submit(function(e) { 
     e.preventDefault(); 

     var display = "<p>Your name: " + $("#name").val() + "</p><p>Your age: " + $("#theage").val() + "</p><p>Your email: " + $("#theemail").val() + "</p>"; 

     $("#result").html(display); 
    }); 
});