how to show form in the same page when click button on it

Question

I have a form on the page and displayed it as none. And there is a button in the page I want when clicking on the button the form to display.

How can I do that?

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

and form code is this

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

I made a div with an id called forma so that I can call it in javascript. But I don't know the right way.

Answer 1

您可以向按钮添加onclick属性，以将显示更改为阻止。

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

Answer 2

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

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

Answer 3

If you are using Bootstrap.js, you can safely use jQuery because it's required. Assuming you should click #add-city button to display the form, simply add to your app.js or inside your <script> tags

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

In order to toggle the form (show/hide) on every click, you could do something like

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