Как добавить атрибут form в тег input через js

Question

Надо чтобы в созданные при помощи js input'ы вставлялся атрибут form.

function addInput(){
    var div = document.getElementById('img');
    var input = document.createElement('input');


    input.id = 'del';
    input.type = 'text';
    input.name = 'link_img[]';
    input.placeholder = 'Ссылка на дополнительное изображение для слайдера';

    div.appendChild(input);

    var form = document.getElementById('del');
    form.setAttribute('form','add_img');

}

function removeInput(){
    var div = document.getElementById('img');
    var input = document.getElementById('del');
    div.removeChild(input);

}

Часть

var form = document.getElementById('del');
        form.setAttribute('form','add_img');

присваивает атрибут form только первому созданному элементу и это логично, но если пользователь при помощи кнопки которая вызывают функцию создаст более 1 такого input'а.

<div id="Изображения" class="tabContent">
        <div class="form">
          <div class="input" id="addImg">
            <label>Ссылка на превью товара<input form="add" type="text" name="link_demo" placeholder="Ссылка на превью товара"></label><hr><br>
            <div class="buttons">
                <button type="submit" id="plus_img" onclick = "addInput();"><i class="fa fa-plus"></i></button>
                <button type="submit" id="remove_img" onclick = "removeInput();"><i class="fa fa-trash"></i></button>
              </div>
            <label id="img">Ссылка на доп изображение<input form="add_img" type="text" name="link_img[]" placeholder="Ссылка на дополнительное изображение для слайдера"></label>

            <!-- Для проверки значений попадающих в массив -->
            <div class="buttons">
              <button form="add_img" type="submit" name="post_img"><i class="fa fa-save"></i></button>
            </div>
            <?php
              $array = array();
              if(isset($_POST['post_img'])){
                foreach ($_POST['link_img'] as $value) {
                  $array[] = $value;
                }
              }
              print_r($array);
            ?>
          </div>
        </div>
      </div>

Форму add_img создал для проверки, записываются ли данные в массив.

Сама форма находится в другом месте, если даже ее перенести к input'ам, то в массиве хранится только значение из input'а, который там находится изначально, если в html вручную написать еще несколько таких input'ов, то в массив идут данные со всех input'тов.

Answer 1

var input = document.createElement('input');
input.setAttribute('form','add_img');

Не создавайте больше одного элемента с одним и тем же id.

Answer 2

Вместо id лучше добавить класс и работать с ним.
Вот работающий пример:

    function addInput(){
        var div = document.getElementById('img');
        var input = document.createElement('input');


        input.id = 'del';
        input.type = 'text';
        input.name = 'link_img[]';
        input.className = 'linksZ';
        input.placeholder = 'Ссылка на дополнительное изображение для слайдера';

        div.appendChild(input);

        var form = document.getElementsByClassName('linksZ');
        console.log(form.length);
        for(let i=0;i<form.length;i++){
            form[i].setAttribute('form','add_img');
        }

    }

    function removeInput(){
        var div = document.getElementById('img');
        var input = document.getElementById('del');
        div.removeChild(input);

    }

<div id="Изображения" class="tabContent">
    <div class="form">
        <div class="input" id="addImg">
            <label>Ссылка на превью товара<input form="add" type="text" name="link_demo" placeholder="Ссылка на превью товара"></label><hr><br>
            <div class="buttons">
                <button type="submit" id="plus_img" onclick = "addInput();">123<i class="fa fa-plus"></i></button>
                <button type="submit" id="remove_img" onclick = "removeInput();"><i class="fa fa-trash"></i></button>
            </div>
            <label id="img">Ссылка на доп изображение<input form="add_img" type="text" name="link_img[]" placeholder="Ссылка на дополнительное изображение для слайдера"></label>

            <!-- Для проверки значений попадающих в массив -->
            <div class="buttons">
                <button form="add_img" type="submit" name="post_img"><i class="fa fa-save"></i></button>
            </div>
            <?php
            $array = array();
            if(isset($_POST['post_img'])){
                foreach ($_POST['link_img'] as $value) {
                    $array[] = $value;
                }
            }
            print_r($array);
            ?>
        </div>
    </div>
</div>

БЛОГ НА HUSL

Как добавить атрибут form в тег input через js

Ответы (2 шт):