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

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

Answer 3

错误不是扔在控制台中，你丢失了插件。

＆＃13;

$(function() {

        $("#signup").validate();

        $("#signup").submit(function(e) {
            e.preventDefault();

            var display = 

            $("#name").val();
            $("#theage").val();
            $("#theemail").val();           


            $("#result").html(display);

        });

    });

＆＃13;

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

＆＃13;

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

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

4 个答案: