在html中重置动态创建的表单字段

Question

我有一个 html 表单，其字段是动态填充的。 我想一次清除所有字段。 最好和最简单的方法是什么。 对于普通的静态表单，我使用了 $("#form")[0].reset() 并且它可以工作，但它不适用于动态表单。

Answer 1

reset()将表单字段恢复为其value属性的内容，无论它是定义为静态 HTML 还是动态创建的 DOM 节点：

 $('form').append('<input class="dynamic" value="original dynamic value">'); // note these will behave differently: $('#two').val("Changed by setting .val()"); $('#three').attr("value","Changed by updating value attribute"); $('button').on("click",function() { $('form')[0].reset(); return false; });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <button>reset</button> <input id="one" value="original static value"> <input id="two" value="original static value"> <input id="three" value="original static value"> </form>

如果要清除字段，则需要将它们显式设置为空值：

 $('form').append('<input class="dynamic" value="original dynamic value">'); $('button').on("click",function() { $('form input').val('') return false; });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <button>reset</button> <input class="static" value="original static value"> </form>

Answer 2

以下将使用静态或动态添加的元素重置表单

 button_reset_dynamic_form.addEventListener('click', () => { const FORMS = document.querySelectorAll('form') FORMS.forEach((element) => { element.reset() }) }) button_add_inputs_to_form.addEventListener('click', () => { let label = document.createElement('label') label.innerText = 'Dynamically Added Input' let input = document.createElement('input') input.type = 'text' dynamic_form.appendChild(label) dynamic_form.appendChild(input) })

 .form { display: flex; flex-direction: column; align-items: center; gap: 10px; } .buttons { padding-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: auto; }

 <form id="dynamic_form" class="form"> <div> <label>Static Select List</label> <select> <option value="North America" selected>North America</option> <option value="International">International</option> </select> </div> <div> <label class="">Static Input</label> <input type="text" value="11.11" /> </div> </form> <div class="buttons"> <button id="button_add_inputs_to_form">Dynamically Add Input</button> <button id="button_reset_dynamic_form">Reset Dynamic Form</button> </div>

Answer 3

你可以使用这个document.getElementById("myForm").reset();