时间戳

首页 > 解决方案 > js动态添加新表单

javascript - js动态添加新表单

问题描述

我正在使用 laravel 5.7，我需要一个脚本来在单击加号按钮时添加新表单

我找到了这个脚本，但它只添加输入字段我需要添加整个表单

 $(document).ready(function () {
        var max_fields = 10; //maximum input boxes allowed
        var wrapper = $(".input_fields_wrap"); //Fields wrapper
        var add_button = $(".add_field_button"); //Add button ID

        var x = 1; //initlal text box count
        $(add_button).click(function (e) { //on add input button click
            e.preventDefault();
            if (x < max_fields) { //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div id="post"><input type="text" name="options[]" class="form-control"><input type="text" name="options[]" class="form-control"></div><br>'); //add input box
            }
        });

标签： javascriptlaravel

解决方案

您将需要查看一些 JS 方法...

createElement() - 这将创建一个 html DOM 元素。例如...

let myDiv = document.createElement('div');

一旦你创建了元素，它就会一直存在于以太中，直到你真正把它放到页面上。这就是像 appendChild() 这样的方法发挥作用的地方......

document.querySelector('someElement').appendChild(myDiv);
// This will append the myDiv element you created to your someElement

您还可以使用 createTextNode('your text') 创建文本并以相同的方式附加它。还有一个 setAttribute() 方法，它接受两个参数……第一个是要设置的属性，第二个是要设置的值。

推荐阅读