ボタンをクリックしたときに同じページにフォームを表示する方法

Question

私はページにフォームがあり、それをnoneとして表示しています。表示するフォームのボタンをクリックすると、ページにボタンがあります。

どうすればいいですか？

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

は私はJavaScriptでそれを呼び出すことができるように、フォーマと呼ばれるIDとDIVとします。しかし、私は正しい道を知らない。

Answer 1

表示をブロックするボタンにonclick属性を追加してブロックすることができます。

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

Answer 2

Bootstrap.jsを使用している場合、jQueryは必要なので安全に使用できます。あなたはすべてのクリックでフォーム（表示/非表示）を切り替えるために、フォームを表示するだけで、あなたのapp.jsに追加したり、<script>タグ

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

内側に#add-cityボタンをクリックする必要があり、あなたのような何かができると仮定すると、 jQurey必要とされていません -

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

Answer 3

ただ、プロパティをクリックして、ただ一つのことが

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