Получить HTML-массив в Javascript

#javascript #html

#javascript #HTML

Вопрос:

Это ввод HTML-кода:

 <button id="addMore" class="button"> </button>

<div id="fieldList">
    <input type="text" name="gsm[]" placeholder="GSM" required>
</div>

JavaScript:

 $(function() {
  $("#addMore").click(function(e) {
    e.preventDefault();
    
    $("#fieldList").append("<input type='text' name='gsm[]' placeholder='GSM' required>");
    
    });
});

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

У меня есть еще одна кнопка, которая запускает этот скрипт:

 $(function() {
  $("#sendSamtykke").click(function(e) {
    e.preventDefault();
    
    var gsm = document.getElementById("gsm");
    var gsm2 = "";
    
    for (i = 0; i < gsm.length; i  ) {
        gsm2  = gsm[i]   "<br>";
    }
    
    alert(gsm2);
    
    });
});

В предупреждении должно быть напечатано первое входное значение и вторая строка со вторым входным значением, поскольку добавлены два поля, но предупреждение не отображается. Что я делаю не так? Я хочу, чтобы текст в обоих полях ввода отображался, как я могу сделать это правильно?

1. У ваших элементов нет идентификаторов, поэтому не используйте getElementById их. В любом случае, как следует из названия, это возвращает один элемент, а не несколько элементов. Вместо этого используйте getElementsByName or querySelectorAll , которые возвращают несколько элементов.

Ответ №1:

Вы используете getElementByID , но ни у одного элемента нет этого идентификатора, и в любом случае это было бы плохой идеей, поскольку вы не можете повторно использовать идентификаторы.

попробуйте сделать это вместо этого, так как вы используете Jquery:

 $(function() {
  $("#sendSamtykke").click(function(e) {
    e.preventDefault();

    var gsm2 = "";

    $("#fieldList input").each(function() {
      gsm2  = $(this).val()   "n";
    });

    alert(gsm2);

  });


  $("#addMore").click(function(e) {
    e.preventDefault();

    $("#fieldList").append("<input type='text' name='gsm[]' placeholder='GSM' required>");

  });
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addMore" class="button"> </button>

<div id="fieldList">
  <input type="text" name="gsm[]" placeholder="GSM" required>
</div>

<button id="sendSamtykke" class="button">get</button>

Развернуть фрагмент

1. пока true, getElementById ничего не захватывает. это все равно не сработает, потому что селекторы имен не уникальны и <br> не сработают при оповещении. вам нужно использовать n для перевода строк в предупреждении.

2. @Эдвард, я изменил символ новой строки. Однако использование name=’gsm[]` работает просто отлично, и добавление добавочного значения не добавляет ничего лишнего.

Ответ №2:

Прежде всего, я бы посоветовал взглянуть на вашу консоль (cmd option J, если вы используете Chrome на Mac). Бьюсь об заклад, в консоли есть какие-то ошибки.

Далее, каждому входному элементу необходимо присвоить уникальное имя. Каждый раз, когда вы нажимаете на кнопку, создается поле с тем же именем, так что циклу нечего захватывать.

Я создал для вас JSHINT, который, я надеюсь, решит ваши проблемы.

Вот код:

HTML

 <button id="addMore" class="button"> </button>

<div id="fieldList">
    <input type="text" name="gsm[0]" placeholder="GSM" required>
</div>

<button id="sendSamtykke">
send
</button>

     //set field to 0
    var gsm = 0;
  $("#addMore").click(function(e) {
    e.preventDefault();
    //increment on each
        gsm  ;
    $("#fieldList").append("<input type='text' name='gsm[" gsm "]' placeholder='GSM' required>");
    });
    
    //for when you submit 
$("#sendSamtykke").click(function(e) {
    e.preventDefault();
    //empty var  
    var gsm2 = "";
    //loop through each input
    //i is the index of each object in the array
    //obj is each object in the array
    $('input[name^="gsm"]').each(function(i,obj) {  
        var eachGsm = $(this).val();
      console.log(eachGsm);
      gsm2  = eachGsm  "n";
    });
    alert(gsm2);
    });