Javascript 如何根据用户选择设置要显示的表单数量？

如果这个问题措词不当，我道歉。我问这个问题的原因是因为我不知道如何正确地搜索它

基本上，我希望客户端能够指定一个数字（他们可以在文本框中键入数字，也可以在下拉框中键入一系列数字，甚至是单选按钮，我对此非常灵活），以确定表单将显示多少组问题

将其置于上下文中，以便更容易理解：

-这张表格是订票用的

-如果客户在开始时选择了“1”，这将意味着一张票据，因此只有一组问题可见

-如果客户选择2张，则他们希望预订2张票等

我正在寻找一种方法来实现这一点，如果需要的话，可以使用html、css和/或jquery/javascript

---

非常感谢

您可以使用sheepit插件-

---

通过它。它可以帮助你很多

当用户选择座位数时，为每个座位做一个循环，并根据需要重复问题。都是一样的

使用php

for ($question = 0 ; $question < $_POST['SeatNumbers'] ; $question ++) { ... }

for（$question=0；$question<$\u POST['SeatNumbers']；$question++）{…}

然后，您必须循环处理所有问题，我猜您可能会使用SeatNumber输入，在上面的代码中，您将得到$SeatNumber 0、$SeatNumber 1等等。 检查$SeatNumber是否存在，如果存在，则进行处理

---

使用JS，我为选项定义了一个最大值。当用户更改座位号时，我会使用css“display:none”/“display:inline”显示/隐藏每个问题。

如果您想动态处理html内容，则需要使用Javascript

您可以从文本字段或用于提供票证号码的选择器中听到事件

用jQuery试试这个：

$（'your\u field\u selector'）。打开（'change'）或此$（'your\u field\u selector'）。打开（'keyup'））

如果触发该事件，则可以使用名为“val（）”的jQuery方法获取字段的值：

$（'your_field_selector'）.val（）

接下来，在值的函数中插入新的html内容

---

在这里，还有许多jQuery方法可以实现这一点，比如“append（）”、“insertBefore（）”、“insertAfter（）”。。。等

我想这就是你想要的那种东西

表单中的节数由滑块上选择的数字生成，每个动态生成的表单元素都有一个唯一的id，这取决于其对应的票证：票证3的名称id为name3票证14的名称id为name14，依此类推，以允许通过服务器端post正确使用每个输入功能

这是一个正在工作的jsfiddle

请原谅通用表单字段名：）

函数showValue（newValue）
{
document.getElementById（“tAmount”）.value=newValue；
document.getElementById（“tAmountDisplay”）.innerHTML=newValue；
}
$（文档）。在（“单击”上，“#选择”，函数（）{
var formTimes=document.getElementById（“tAmount”）.value；
$（'#forms'）。附加（''）；
对于（变量i=1；i'）；
$（'#forms'）。追加（'Age'+'
'）；
$（'#forms'）.append（'Gender'+'
'）；
$（'#forms'）。附加（''）；
} 
$（'#forms'）。附加（''+''）
}); 
零票

与我们分享您尝试了多少…您希望如何提交这些表格？一起还是分开？我还没有真正尝试过什么，因为我不知道从哪里开始@如果可能的话，我想一起提交表格！创建一个隐藏的基本表单。

<script>function showValue(newValue)
{
    document.getElementById("tAmount").value = newValue;
    document.getElementById("tAmountDisplay").innerHTML = newValue;
}
</script>
<script>
$(document).on("click", '#select', function() { 
    var formTimes = document.getElementById("tAmount").value;
    $('#forms').append('<form id="ticketForm">');
    for(var i = 1; i < formTimes; i++) {

        $('#forms').append(i);
        $('#forms').append('<div id="formPanel">');
        $('#forms').append('<label>Name</label><input id="name' + i +'" type="text"/>'+'<br/>');
        $('#forms').append('<label>Age</label><input id="age' + i +'"type="text"/>'+'<br/>');
        $('#forms').append('<label>Gender</label><input id="gender' + i +'" type="text"/>'+'<br/>');
        $('#forms').append('</div>');
    } 
    $('#forms').append('<input type="button"  id="submit" value="Submit"/>'+'</form>')
}); 
</script>
<span id="tAmountDisplay">0</span> Tickets
<form action="" method="post">
    <input type="range" min="1" max="20" value="1" step="1" width="100px" oninput="showValue(this.value)" />
    <input type="hidden" id="tAmount"  name="tAmount" value=""/>
    <input type="button" id="select" value="Select" />
    <div id="forms">

    </div>
</form>