h5 页面点击添加添加input框

前段时间有个需求，页面要能点击添加按钮控制input框的个数，当时感觉有点难，就没做，这两个又遇到了，没办法写了个简单的

效果图，加号增加，减号减少

h5 页面点击添加添加input框

直接上代码，用来bootstrap的组件

div部分

<div class="container col-md-8" style="margin:100px">

    <form id="mom" class="form-horizontal">

        <div class="form-group">

            <label class="col-sm-2 control-label">url</label>

            <div class="col-sm-10">

                <input id="url" type="text" class="form-control" name="url">

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-2 control-label">url1</label>

            <div class="col-sm-10">

                <input id="url1" type="text" class="form-control" name="url1">

            </div>

        </div>

        <div id="1" class="form-group">

            <label class="col-sm-2 control-label"> 字段1 </label>

            <div class="col-sm-10">

                <input type="text" id="key0" value="">

                <input type="text" id="val0" value="">

                <input id="add" type="button" value="+">

                <input id="pop" type="button" value="-">

            </div>

        </div>

    </form>

    <button id="send_mm" class="btn btn-default" style="margin-left:150px">Button</button>

</div>

js 部分

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>

    var num = 0;

    var data1 = {};

    $("input[id='add']").click(add);

    $("input[id='pop']").click(pop);

    $("button[id='send_mm']").click(send_urll);

    var momEle = document.getElementById("mom");

    function add() {

        num++;

        console.log(num);

        var divEle = document.createElement("div");

        divEle.setAttribute("class", "form-group");

        divEle.setAttribute("id", `${num}`);

        var inner = `<label  class="col-sm-2 control-label"> 字段 ${num} </label> <div   class="col-sm-10">  <input type="text" value="" id="key${num}">  <input type="text" value="" id="val${num}" </div>`;

        divEle.innerHTML = inner;

        alert(divEle.innerHTML);

        momEle.appendChild(divEle);

    }

    function pop() {

        if (num != 0) {

            var current_dom = document.getElementById(`${num}`);

            momEle.removeChild(current_dom);

            num--

        } else {

            alert('最少有一个字段')

        }

    }

    function send_urll() {

        for (i = 0; i <= num; i++) {

            var k = "key" + i;

            var v = "val" + i;

            var key = document.getElementById(`${k}`).value;

            var val = document.getElementById(`${v}`).value;

            // console.log(document.getElementById(`${k}`).value,document.getElementById(`${v}`).value);

            data1[key] = val

        }

        console.log(data1);

        var url = document.getElementById('url').value;

        var url1 = document.getElementById('url1').value;

        $.ajax({

            url: "/get_url/",

            type: "POST",

            data: {"url": url, "url1": url1, "data1":JSON.stringify(data1)},

            success: function (data) {

                alert(JSON.parse(data));

                data1 = {}

            }

        })

    }

</script>

就是简单的dom操作，添加时增加div标签，难点在于每个input要有自己的key，当时还遇到一个坑

h5 页面点击添加添加input框

就是拼接的时候要用（`）,不能用(')("), 这是es6的新语法

附上大佬博客的链接

https://www.cnblogs.com/liwenzhou/p/9249932.html#autoid-2-2-1

秒客网

h5 页面点击添加添加input框

h5 页面点击添加添加input框

相关文章