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

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

您需要串联表单值。现在，您只将name添加到display var。

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

需要更改为

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

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

显示在表格上输入的值您可以使用以下内容：

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

Answer 4

我相信您的问题是因为您仅在显示变量中添加$（"＃name"）。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>