javascript - Html: collapse button act as the form submit button in a form

I have the following code:

<!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=".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=".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=".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>

The problem is that when I click on the button "More infos" it submits the form but I just want it to show the collapse div.

So my question is: how do you specify that only the submit button will actually submit the form ?

I have the following code:

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

The problem is that when I click on the button "More infos" it submits the form but I just want it to show the collapse div.

So my question is: how do you specify that only the submit button will actually submit the form ?

Share Improve this question asked Jun 1, 2017 at 13:22 ThisIsMe 3251 gold badge3 silver badges12 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 22

That's because you didn't specify the type for that button and submit is the default type. Set the type='button' and it will no longer act as a submit.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Html: collapse button act as the form submit button in a form - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)