0

Надо чтобы в созданные при помощи 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'тов.

5
  • уникальный id может быть только 1, а у вас, судя по всему, каждый раз при вызове addInput() , создается новый элемент с id=del.
    – Arbery
    15 фев 2020 в 15:03
  • Есть ли возможность призваения различный id? просто я пробовал через class, но js на отрез отказывается, ссылаясь что функции getElementByClassName не существует
    – Ghost
    15 фев 2020 в 15:07
  • getElementsByClassName
    – user176262
    15 фев 2020 в 15:08
  • Выдает ту же ошибку
    – Ghost
    15 фев 2020 в 15:09
  • Нет, не выдает.
    – user176262
    15 фев 2020 в 15:13

2 ответа 2

3

Вместо 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>

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

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

7
  • В js скрипте у меня есть функция, отвечающая за удаление, и удалаяются элементы имеющие id=del, есть ли возможность генерировать разные id в процессе создания input'ов? т.к. я пробовал еще через getElementByClassName, но js выдает ошибку, якобы данной функции не существеут
    – Ghost
    15 фев 2020 в 15:09
  • @Ghost getElementsByClassName
    – user176262
    15 фев 2020 в 15:13
  • Тогда setAttribute отказывается работать, и удаление элементов не просиходит.
    – Ghost
    15 фев 2020 в 15:17
  • add.js:14 Uncaught TypeError: form.setAttribute is not a function at addInput (add.js:14) at HTMLButtonElement.onclick (addProduct.php:94)
    – Ghost
    15 фев 2020 в 15:17
  • add.js:21 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. at removeInput (add.js:21) at HTMLButtonElement.onclick (addProduct.php:95)
    – Ghost
    15 фев 2020 в 15:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.