Question

我创建了一个引导程序表单，我想在按下提交按钮之前动态添加字段。例如，当用户点击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>

Bootstrap表单动态添加字段

0 个答案: