Forms 引导表单动态添加字段_Forms_Twitter Bootstrap_Dynamic_Field

Forms 引导表单动态添加字段

forms twitter-bootstrap dynamic

Forms 引导表单动态添加字段,forms,twitter-bootstrap,dynamic,field,Forms,Twitter Bootstrap,Dynamic,Field,我已经创建了一个引导表单，我想在按下提交按钮之前动态添加字段。例如，当用户单击1个孩子时，另一个div应询问孩子的姓名和年龄，如果用户选择了2个孩子，则应在用户到达提交按钮之前询问这两个孩子。就像hotels.com和expedia.com在预订时询问儿童年龄一样：到目前为止，我的代码是： <!DOCTYPE html> <html> <head> <title>Check</title> <meta

我已经创建了一个引导表单，我想在按下提交按钮之前动态添加字段。例如，当用户单击1个孩子时，另一个div应询问孩子的姓名和年龄，如果用户选择了2个孩子，则应在用户到达提交按钮之前询问这两个孩子。就像hotels.com和expedia.com在预订时询问儿童年龄一样：到目前为止，我的代码是：

<!DOCTYPE html>
<html>
  <head>
      <title>Check</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/styles.css" rel="stylesheet">
  </head>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
     <div class="container">
        <div class="workarea">
          <center>Let us know your situation <br><br>
          <form class="form-inline">
          <div class="form-group">
          <label for="age">I am </label>
          <input type="number" name="age" min=0 max=99 class="form-control" placeholder="Age" /> years old <br>
          <select class="selectpicker form-control" required name="maritalStatus">
            <option value="married">Married</option>
            <option value="single">Single</option>
          </select>
          <label for="kids">with <label>
          <input type="number" name="kids" min=0 max=5 class="form-control" placeholder="kids"/>

        </center><br>
          <center><input type="submit" value="Get me started" class="btn btn-lg btn-info" name="firstpage"/></center>
          </form>
        </div>
     </div>
</body>
</html>


检查
让我们了解您的情况


我是
岁

已婚的
单身
具有

Javascript/JQuery就可以了。类似于

$（“.forminline”）.append（“”）可能会工作…append的问题是需要单击append（）或after（）的按钮不存在。。。您可以使用任意选择器（在文档加载、字段填写、焦点等情况下）。。。