2017-06-01 133 views
0

我有以下代碼:HTML:摺疊按鈕充當表單的形式提交按鈕

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

的問題是,當我點擊按鈕「更多相關信息」所提交的形式,但我只是希望它顯示崩潰div。

所以我的問題是:你如何指定只有提交按鈕實際上將提交表單?

回答

4

這是因爲您沒有爲該按鈕指定type,並且submit是默認類型。設置type='button',它將不再作爲提交。