Html:折叠按钮充当表单中的表单提交按钮

时间:2017-06-01 13:22:55

标签: javascript html twitter-bootstrap

我有以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


  <link rel="stylesheet" type="text/css" href="flags.min.css">
  <link rel="stylesheet" type="text/css" href="css2.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <link rel="stylesheet" href="build/css/intlTelInput.css">
  <script src="google/jquery-1.11.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>

<body>

  <div class="container" style="padding-right: 6%;padding-left: 6%;margin-right: auto;margin-left: auto;">


    <div class="row" style="padding-bottom: 5%;">


      <div class="col-lg-offset-1 col-lg-4">
      <h3 style="color:#00B0F0;">Choose your phone numbers<h3>
      </div>

    </div>

    <form action="deuxiemeBis.php" method="POST">

          <div class="row">

            <div class="col-lg-offset-1 col-lg-4">

              <div class="form-group phone1">
                    <input type="tel" class="form-control" name ="phone1" id="phone1">
              </div>

              <div class="form-group phone2">
                    <input type="tel" class="form-control" name ="phone2" id="phone2">
              </div>

              <div class="form-group phone3">
                    <input type="tel" class="form-control" name ="phone3" id="phone3">
              </div>

          </div>

        </div>



        <div class="row">
          <br><br>
          <div class="col-lg-offset-1 col-lg-3">
            <button data-toggle="collapse" data-target="#demo" style="background-color: transparent;border:none;color:#00B0F0;">+More infos</button>
          </div>

        </div>


        <div class="row">
          <br>
          <div class="form-group col-lg-offset-1 col-lg-6">
            <div id="demo" class="collapse">
              <textarea rows="3" name="comment" class="form-control" form="usrform"></textarea>
            </div>
          </div>

        </div>


        <div class="col-lg-offset-9 col-lg-3"><br>
          <div class="form-group">
            <button type="submit" class="btn btn-primary" style="width: 50%;background-color: #00B0F0;">Submit</button>
          </div>
        </div>

    </form>

  </div>


</body>

</html>

问题在于,当我点击按钮&#34;更多信息&#34;它提交表单,但我只是想让它显示崩溃div。

所以我的问题是:您如何指定提交按钮才会实际提​​交表单?

1 个答案:

答案 0 :(得分:8)

那是因为您没有为该按钮指定typesubmit是默认类型。设置type='button',它将不再作为提交。