主页 / 问题 / 1083003
Accepted
Ghost
Asked:2020-02-15 22:49:50 +0800 CST2020-02-15 22:49:50 +0800 CST

如何通过js将表单属性添加到输入标签

  • 772

有必要将表单属性插入到使用 js 创建的输入中。

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 个这样的输入。

<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 表单来检查数据是否正在写入数组。

表单本身在不同的地方，即使它被传输到输入，那么只有输入的值存储在数组中，最初位于那里，如果你在html中手动编写更多这样的输入，那么数据从所有输入。

javascript

2 个回答

  1. Best Answer

    相反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>

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

    不要使用相同的id.

    • 2

相关问题