Question

我正在尝试一些事情，我想知道你是否可以使用JQuery将字符串/文本从输入传递到h2内的span元素。

HTML：

<section class="row">
    <div class="small-6 columns small-centered name">
        <input name="name" type="text" id="name-text" placeholder="What's your name?" autocomplete="off" class="text-center">
    </div>
</section>
<section class="row">
    <div class="small-6 columns small-centered name">
        <input name="submit-button" id="submit-button" type="submit" placeholder="button">
    </div>
</section>
<h2 class="third">Hi <span id="name-value"></span></h2>

JQuery：

<script>
    var nameValue = $("name-text").val();
    $("#submit-button").submit(function () {
        $("#name-value").text(nameValue);
    });
</script>

任何人都知道我做错了什么？提前谢谢！

编辑：只是想说对不起已经添加了。如果是这样，我无法找到它。

Answer 1

您在jQuery代码中错过了HTML id的标识符

var nameValue = $("name-text").val();

应该是

var nameValue = $("#name-text").val();
           /*      ^^missed */

<强>更新

您正在submit而不是input type上尝试form，请尝试使用click处理程序并将其包装在该事件中：

$("#submit-button").click(function () {
    $("#name-value").text(nameValue);
    var nameValue = $("#name-text").val();
    alert(nameValue);

});

fiddle demo

Answer 2

你忘记了脚本中的＃字符。

    var nameValue = $("#name-text").val();
    $("#submit-button").submit(function () {
        $("#name-value").text(nameValue);
    });

演示：JSFiddle

Answer 3

您需要在提交表单时读取输入字段的值。因为如果将输入值分配给submit函数之外的nameValue变量，则将开头设置的值分配给变量而不是当前值。

但是只有在输入字段和提交按钮周围有表单元素时，提交事件才会起作用。

$("#submit-button").submit(function () {
    var nameValue = $("#name-text").val();
    $("#name-value").text(nameValue);
});

从输入到跨度加载字符串

3 个答案: