[英]how to show form in the same page when click button on it
我在页面上有一个表格,没有显示。 在要显示的表单上单击按钮时,我要的页面上有一个按钮。
我怎样才能做到这一点?
<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中调用它。 但是我不知道正确的方法。
您可以向按钮添加onclick属性,以将显示更改为阻止。
onclick="document.getElementById('forma').style.display = 'block'"
只需使用jQuery click属性和show属性
$( "#idbutton" ).click(function() { $("#idform").show(); });
如果您使用的是Bootstrap.js,则可以安全地使用jQuery,因为它是必需的。 假设您应该单击#add-city
按钮以显示表单,只需将其添加到app.js或<script>
标记内
$('#add-city').click(function() {
$('#forma').show();
});
为了在每次点击时切换表单(显示/隐藏),您可以执行以下操作
$('#add-city').click(function() {
$('#forma').toggleClass('hidden');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.