javascript - 当涉及嵌套元素时，如何使用 jQuery 来操作 html 表单？

Question

我有一个空表单，需要根据条件动态填充我想要动态调用的迷你表单。例如，这可以是询问餐馆名称和位置的表单。现在，根据餐馆的数量(假设为“m”)，我想在大表格“m”中添加询问名称和位置的迷你表格。我如何使用 jQuery 创建每个迷你表单，获取餐厅的名称和位置并将它们附加到大表单中。 html 看起来像这样。但我需要根据用户需要的表单数量以及他是否需要任何表单来动态创建此表单。

编辑 - 我了解到我们不能嵌套表单。我已将内部“form”元素重命名为“div”。

<form>

<div id = 1> 
Name: <input type = "text" name = "name"> 
Location: <input type = "text" name ="location>
</div>

<div id = 2> 
Name: <input type = "text" name = "name"> 
Location: <input type = "text" name ="location>
</div>

... 
</form>

Answer 1

首先，您需要查找用户输入餐厅数量的输入的更改:

$('#noofrestaurants').change(function(){

然后您需要循环输入的数字并每次创建新的输入:

var restaurants = $('#noofrestaurants').val();
for (var i = 0; i < restaurants; i++){
$('#miniformcontainer').append('<input type="text" name="rest_name[]"/><input type="text" name="rest_loc[]"/>');
}
});