javascript - jQuery 在页面上显示输入的文本-6ren

javascript - jQuery 在页面上显示输入的文本

转载作者：行者123 更新时间：2023-11-28 17:32:04

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

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

最佳答案

您将需要 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>

关于javascript - jQuery 在页面上显示输入的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50085161/

文章推荐： javascript - 如何在 JavaScript 中编辑

首页

博学

6Ren·AI

商城

javascript - jQuery 在页面上显示输入的文本