在同一页面上显示提交的表单数据

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); 
    }); 
});