單擊按鈕時如何在同一頁面上顯示表單

Question

我在頁面上有一個表格，沒有顯示。 在要顯示的表單上單擊按鈕時，我要的頁面上有一個按鈕。

我怎樣才能做到這一點？

 <button type="button"  class="btn btn-primary add-city">اضافه مدينة جديدة +</button>

表單代碼是這個

<div id="forma">
   <div class="form-head">
      <p id="add-city">+اضافة المدينة</p>
      <i class="fa fa-times-circle close" aria-hidden="true"></i>
   </div>
   <form class="">
      <div class="container">
         <div class="row">
            <div class="col-md-6">
               <div class="form-group">
                  <label>الدولة<span>*</span></label>
                  <select class="form-control">
                     <option>اختر الدوله </option>
                  </select>
               </div>
               <div class="form-group">
                  <label>اسم المدينه(عربي)<span>*</span></label>
                  <input type="text" class="form-control" id="email">
               </div>
            </div>
            <div class="col-md-6">
               <div class="form-group ">
                  <label>المحافظة<span>*</span></label>
                  <select class="form-control">
                     <option>اختر المحافظه </option>
                  </select>
               </div>
               <div class="form-group">
                  <label>اسم المدينه(انجليزي)</label>
                  <input type="text" class="form-control" id="email">
               </div>
            </div>
         </div>
      </div>
   </form>
   <div class="form-footer">
      <button type="button" class="btn btn-primary">ارسال</button>
      <button type="button" class="btn btn-secondary">الغاء</button>
   </div>
</div>

我做了一個id為forma的div，以便可以在javascript中調用它。 但是我不知道正確的方法。

Answer 1

您可以向按鈕添加onclick屬性，以將顯示更改為阻止。

onclick="document.getElementById('forma').style.display = 'block'"

Answer 2

只需使用jQuery click屬性和show屬性

$( "#idbutton" ).click(function() { $("#idform").show(); });

Answer 3

如果您使用的是Bootstrap.js，則可以安全地使用jQuery，因為它是必需的。 假設您應該單擊#add-city按鈕以顯示表單，只需將其添加到app.js或<script>標記內

$('#add-city').click(function() {
    $('#forma').show();
});

為了在每次點擊時切換表單（顯示/隱藏），您可以執行以下操作

$('#add-city').click(function() {
    $('#forma').toggleClass('hidden');
});