Javascript Html:collapse按钮充当表单中的表单提交按钮_Javascript_Html_Twitter Bootstrap

Javascript Html:collapse按钮充当表单中的表单提交按钮

javascript html twitter-bootstrap

Javascript Html:collapse按钮充当表单中的表单提交按钮,javascript,html,twitter-bootstrap,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" h

我有以下代码：

<!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>


引导示例
选择你的电话号码



+更多信息




提交

问题是，当我点击“MoreInfos”按钮时，它会提交表单，但我只希望它显示折叠div

所以我的问题是：您如何指定只有提交按钮才会实际提交表单
这是因为您没有为该按钮指定
类型
，而
提交
是默认类型。设置
type='button'
，它将不再作为提交