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>

我创建了一个名为forma的id的div，以便我可以在javascript中调用它。但我不知道正确的方法。

Answer 1

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

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

Answer 2

只需使用jQuery点击属性并显示属性

即可

$( "#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');
});

如何在单击按钮时在同一页面中显示表单

3 个答案: