Добавление пользовательского ввода с помощью jQuery - PullRequest
Новая
       2

Добавление пользовательского ввода с помощью jQuery

0 голосов
/ 09 июня 2018

У меня есть следующая структура HTML, которую нельзя изменить.

Мне нужно добавить введенную пользователем информацию в список <ul> с помощью jQuery.Я пробовал использовать следующий код, но id ничего не делает.Каков будет правильный способ сделать это?

$(document).ready(function() {
  $(".btn btn-outline-primary").click(function() {
    let toAdd = $("input[#title]").val();
    $("<li>" + toAdd + "</li>").appendTo("<ul>");
  });
});
<body>
  <div class="container">
    <div class="row">
      <div class="col-6">
        <h2>Add Show</h2>
        <form>
          <div class="form-group">
            <label for="title">Show Title</label>
            <input type="text" class="form-control" id="title" placeholder="enter title" />
          </div>
          <div class="form-group">
            <label for="rating">Show rating </label>
            <input type="number" min="0" max="10" value="5" class="form-control" id="rating" />
          </div>
          <button type="submit" class="btn btn-outline-primary">Add show</button>
        </form>
      </div>
      <div class="col-6">
        <h2> Show List</h2>
        <ul>
        </ul>
        <button class="btn btn-outline-secondary"> Delete List</button>
      </div>
    </div>
  </div>
</body>

</html>

Ответы [ 3 ]

0 голосов
/ 09 июня 2018 
$(document).ready(function(){
  $('form').submit(function(e) {
    e.preventDefault();    
    let toAdd = $("#title").val();
    $("<li>" +toAdd+ "</li>").appendTo(jQuery("ul"));
  });
});
  1. Сначала переопределите отправку.
  2. Значение должно быть выбрано правильно.используя #title
  3. Добавить к соответствующему элементу
0 голосов
/ 09 июня 2018

У вас неправильные селекторы в вашем коде (для btn и title), плюс я бы также изменил код добавления.Кроме того, у вас есть кнопка отправки внутри формы, нажатие на которую приведет к отправке.

Попробуйте: 

$(document).ready(function(){
    $("form").submit(function(e){
        //prevent form submit;
        e.preventDefault();

        //append input text value to UL
        $("ul").append("<li>" + $("#title").val() + "</li>");
    });
});

Нажмите здесь, чтобы проверить, есть ли в JsFiddle

0 голосов
/ 09 июня 2018

Исправлено множество ошибок:

  • Разделение селекторов пробелом означает, что в документе выполняется поиск первого селектора с потомком второго селектора - вы этого не хотитездесь, держите имена классов вместе (или просто выберите btn-outline-primary в одиночку, поскольку есть только одно из них)

  • Вам необходимо preventDefault(), чтобы форма не отправлялась и не заменяласьстраница

  • Необходимо выбрать существующий ul в HTML, если вы хотите добавить к нему - '<ul>' не является допустимым селектором.

  • #title следует просто выбрать как #title (в конце концов, id s не может быть повторено в HTML): 

$(".btn-outline-primary").click(function(e) {
  e.preventDefault();
  let toAdd = $("#title").val();
  $("<li>" + toAdd + "</li>").appendTo("ul");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-6">
      <h2>Add Show</h2>
      <form>
        <div class="form-group">
          <label for="title">Show Title</label>
          <input type="text" class="form-control" id="title" placeholder="enter title" />
        </div>
        <div class="form-group">
          <label for="rating">Show rating </label>
          <input type="number" min="0" max="10" value="5" class="form-control" id="rating" />
        </div>
        <button class="btn btn-outline-primary">Add show</button>
      </form>
    </div>
    <div class="col-6">
      <h2> Show List</h2>
      <ul>
      </ul>
      <button class="btn btn-outline-secondary"> Delete List</button>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...