![](/img/trans.png)
[英]After form Validation enable submit button and if click submit button open modal popup using jQuery?
[英]Open modal upon submit button after validation
如果用户输入了一些值,我想在单击提交按钮时打开一个模态,否则就不需要打开模态。
目前,当单击sumbit按钮时,模态打开而未验证所需的字段
这是表格
<form action=" " method="POST">
<label> Employee ID </label>
<input type="text" name="id" placeholder="Enter Employee ID" required><br><br><br>
<input type="submit" onclick="mdl1()" value="Update">
<button type="submit" onclick="mdl2()" style="margin-left:100px;"> Delete</button><br>
</form>
更新方式
<div id="Modal_update" class="modal">
<div class="modal-content">
<span class="close" onclick="close_mdl1()">×</span>
<div class="container">
<form action="home.php" method="POST">
<label><b>Employee ID</b></label>
<input type="text" placeholder="Enter User ID" name="id" value="<?php echo $_SESSION['ID'] ?>" required>
<label><b>Name</b></label>
<input type="text" placeholder="Enter Name" name="name" value="<?php echo $_SESSION['Name'] ?>" required>
<label><b>Employee Type</b></label>
<input type="text" placeholder="Temporary/Permanent" name="emp_type" value="<?php echo $_SESSION['Emp_type'] ?>" required>
<button type="submit" class="modalbutton" name="update">Update</button><br>
</form>
</div>
</div>
</div>
mdl1()的代码
function mdl1() {
document.getElementById('Modal_update').style.display = "block";
}
function close_mdl1() {
document.getElementById('Modal_update').style.display = "none";
}
window.onclick = function(event) {
if (event.target == document.getElementById('Modal_update')) {
document.getElementById('Modal_update').style.display = "none";
}
}
提前致谢。!
为表单标签提供id
属性,例如- <form action=" " method="POST" id="form_id">
,并且在调用模式模式时可以使用-
if($("#form-id").valid())
{
//call your modal
//if you are using latest version of js, you could this syntax
$("#Modal_update").modal('show');
}
确保在代码中添加jquery.validate.js
。
尝试这个:
function mdl1() {
var id = document.getElementsByName("id")[0].value;
if(id != ''){
document.getElementById('Modal_update').style.display = "block";
}else{
alert('Employee ID can not be empty.');
}
}
注意:请确保您没有相同的名字。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.