Question

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

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

Answer 1

您需要Event.preventDefault();。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

即可

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

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

页面

3 个答案: