jQuery отображать ввод текста на странице - PullRequest
Новая
       1

jQuery отображать ввод текста на странице

0 голосов
/ 29 апреля 2018

У меня есть форма с полем ввода текста и кнопкой. Я пытаюсь добиться того, чтобы после того, как пользователь что-то набрал в поле ввода текста и нажал кнопку, текст, введенный им в поле, будет отображаться в области под формой. По какой-то причине это не работает, и я пытаюсь понять, почему.

Мой 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 голосов
/ 29 апреля 2018

Ваша кнопка отправляет форму, поэтому страница обновляется. Просто установите тип кнопки как type="button"

>  <button id="submitButton" type="button" class="btn btn-primary">Submit</button>
0 голосов
/ 29 апреля 2018

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 )
    })
});
0 голосов
/ 29 апреля 2018

Вам понадобится 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...