CODEWITHSUNDEEP
javascripthtml
Mazen Anwar
Mazen Anwar

Reputation: 15

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

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.

Upvotes: 0

Views: 7590

Answers (3)

LucaDaniele
LucaDaniele

Reputation: 74

Just use the jQuery click property and show property

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

Upvotes: 1

Vedran Jaic
Vedran Jaic

Reputation: 136

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');
});

Upvotes: -1

Spera
Spera

Reputation: 91

You can add an onclick attribute to the button that changes the display to block.

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

Upvotes: 1

Related Questions