jQuery在页面上显示文本输入答案

【问题标题】：jQuery display text input on pagejQuery在页面上显示文本输入
【发布时间】：2018-04-29 09:31:08
【问题描述】：

我有一个带有文本输入字段和按钮的表单。我想要实现的是，在用户在文本输入字段中键入内容并单击按钮后，他在框中键入的文本将显示在表单下方的 span 中。由于某种原因它不起作用，我正在尝试找出原因。

我的 HTML：

             <form>
                <input type="text" id="textInput">
                <button id="submitButton" class="btn btn-primary">Submit</button>
             </form>

                <span id="guests"></span>

我的 JS/jQuery：

$(document).ready(function() {
    $("#submitButton").on("click", function() {
        var input = $("#textInput").val()
        $("#guests").html(input)

    })
});

我的 JS 代码所在的 JS 文件在头部链接如下：

<head>

<script src="guestList.js"></script>

</head>

【问题讨论】：

你的 js 文件前包含 jquery 吗？

标签： javascript jquery html forms input

【解决方案1】：

您将需要Event.preventDefault();。

每次单击按钮时，页面都会刷新，因此不会显示任何值。 <Button> 的默认操作是提交表单，因此页面被重新加载（提交）。

另一个更简单的选择是设置type = "button"，因此按钮不会充当Submit 按钮。

$(document).ready(function() {
  $("#submitButton").on("click", function(e) {
    e.preventDefault();
    var input = $("#textInput").val()
    $("#guests").html(input)
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="textInput">
  <button id="submitButton" class="btn btn-primary">Submit</button>
</form>

<span id="guests"></span>

【讨论】：

你试过执行 sn-p 吗？我可以看到它工作。你发现控制台有什么错误吗？
没关系，在我删除 Event.preventDefault(); 后它起作用了并使用了 type="button"。
@merkur0 - 你必须输入e.preventDefault()。并且不要错过作为e 传递的事件参数。很高兴它有帮助。

【解决方案2】：

您的按钮提交表单，以便页面刷新。只需将按钮类型设置为type="button"

>  <button id="submitButton" type="button" class="btn btn-primary">Submit</button>

【讨论】：

【解决方案3】：

HTML：

<form>
    <input type="text" id="textInput">
    <input type="submit" value="Submit" id="submitButton">
</form>

<span id="guests"></span>

JQuery:

$( document ).ready( function() {
    $( "form" ).submit( function(e) {
        e.preventDefault();
        var input = $( "#textInput" ).val();
        $( "#guests" ).html( input )
    })
});

【讨论】：