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

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>

- Kash55

---

只需要一点点谷歌搜索，你就能找到这里。请查看https://dev59.com/oGUp5IYBdhLWcg3wLlVV。 - Nicholas

Answer 1

你需要将表单值连接起来。目前，你只是将name添加到你的display变量中。

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

需要更改为

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

- edwarddamato

Answer 2

我相信你的问题是因为你只将 $ (“#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>

- Brad

Answer 3

控制台没有抛出错误，你缺少插件。

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

- jagdish.narkar

---

OP并不是在询问验证插件，而是为什么显示变量没有获取到所有3个值。 - Brad

我甚至没有看过那个基础代码，我认为他应该知道这些基础知识。但我同意你的观点，Brad。 - jagdish.narkar

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

- aprabaldi

---

这很有帮助，需要连接这些值。 - Kash55