页面

时间:2018-04-29 09:31:09

标签: javascript jquery html forms input

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

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

3 个答案:

答案 0 :(得分:1)

您需要Event.preventDefault();

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

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

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