[英]How do I disable a submit button which is received via an Ajax response inside a div(popup)?
I have a button which when clicked triggers an AJAX request and a popup div is opened which contains the Ajax response. 我有一个按钮,单击该按钮会触发AJAX请求,并打开一个包含Ajax响应的弹出div。 This popup is basically a form with some text boxes and a submit button.
该弹出窗口基本上是带有一些文本框和一个提交按钮的表单。 I have been trying to put some javascript validations on it but none seem to work as it is an Ajax response.
我一直在尝试对它进行一些javascript验证,但似乎没有任何效果,因为它是Ajax响应。 My code is
我的代码是
Index.php Index.php
<script>
function showDiv1(id)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('pop2').style.display = "block";
document.getElementById("p1_id").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","edit_details.php?id="+id,true);
xmlhttp.send();
}
</script>
<a href='#pop2' onclick="showDiv1(<?php echo $row['sr_no']; ?>)" class="classname">Edit</a>
<div id="pop2" class="pop-up1" style="display:none">
<div class="popBox1">
<div class="popScroll1">
<h2></h2>
<p id="p1_id"></p>
</div>
<a href="#links" class="close"><span>Close</span></span></a>
</div>
<a href="#links" class="lightbox">Back to links</a>
</div>
edit_details.php edit_details.php
<form action="update.php" method="post">
<table>
<tr>
<td>Customer Name</td>
<td><input type="text" readonly="readonly" name="ccode" value="<?php echo $row['cust_code']; ?>" /></td>
<td>Contact Id</td>
<td><input type="text" readonly="readonly" name="cid" value="<?php echo $row['sr_no']; ?>" /></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" id="first_name" name="fname" value="<?php echo $row['first_name']; ?>" /></td>
<td>Last Name</td>
<td><input type="text" id="second_name" name="lname" value="<?php echo $row['last_name']; ?>" /></td>
</tr>
<tr>
<td>Designation</td>
<td><input type="text" name="desig" value="<?php echo $row['designation']; ?>" /></td>
<td>Department</td>
<td><input type="text" name="dep" value="<?php echo $row['department']; ?>" /></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" name="phone" value="<?php echo $row['phone']; ?>" /></td>
<td>Extn.</td>
<td><input type="text" name="extn" value="<?php echo $row['extension']; ?>" /></td>
</tr>
<tr>
<td>Mobile</td>
<td><input type="text" name="mob" value="<?php echo $row['mobile']; ?>" /></td>
<td>Email</td>
<td><input type="text" name="email" value="<?php echo $row['email']; } ?>" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="submit" class="classname" value="Update" /></td>
</tr>
</table>
</form>
I am comfortable with any sort of input validations. 我对任何形式的输入验证都很满意。 but I m not even able to disable the submit button in edit_details.php.
但我什至无法禁用edit_details.php中的“提交”按钮。 Any help is appreciated
任何帮助表示赞赏
Easiest would be to replace the submit button with a div
with an onclick
event and style it like a button. 最简单的方法是使用
onclick
事件将div
的提交按钮替换为div
,然后将其样式onclick
按钮。
In the onclick of the div put a javascript function that will disable yhe div and then locates the form and then after lots of ifs and cases validations, does 在div的onclick中放置一个javascript函数,该函数将禁用yhe div,然后找到该表单,然后在进行大量的ifs和case验证之后,
.Submit();
If everything passes and if not, inform viewer of invalidity of fields 如果一切通过,否则,通知查看者字段无效
EDIT: 编辑:
$(document).on("submit","#myForm",function (){
//code goes here
});
This uses jQuery to attach an event listener to the documer to fire every time any form with id #myForm is submitted. 这使用jQuery将事件侦听器附加到文件记录器,以在每次提交ID为#myForm的任何表单时触发。 Will work with dynamically created elements.
将与动态创建的元素一起使用。
set a disable attribute to the submit button. 为“提交”按钮设置禁用属性。
<input type="submit" id="submitBtn" disabled="true" class="classname" value="Update" />
You can remove this attribute with $('#submitBtn').removeAttr('disabled');
您可以使用
$('#submitBtn').removeAttr('disabled');
删除此属性$('#submitBtn').removeAttr('disabled');
Or without jquery use - document.getElementById('submitBtn').removeAttribute('disabled');
还是不使用jquery-
document.getElementById('submitBtn').removeAttribute('disabled');
there are couple of ways to do that simplest one is write some javascript function within your page that could validate the empty fields. 有两种方法可以做到这一点,最简单的方法是在页面中编写一些javascript函数,以验证空白字段。
eg 例如
function checkField(val){
//validate all of your fields if they have value and return it.
//e.g
if(val != ''){
return;
}
//else case
//enable button here;
}
now for the first time when all the fields are empty, disable your submit button. 现在,当所有字段均为空时,请禁用您的提交按钮。 and call the above method like
并像上面那样调用上面的方法
<input type="text" name="email" value="" onchange="checkField(this.value)">
Hope this helps 希望这可以帮助
I'm assuming that your loading the from your edit_details.php somewhere in your popup let's say #p1_id asynchronously, now one of the reasons you can't can't fireup any event you have attached to your submit button is because the itself doesn't exists in DOM when you have attached an event to it, so I suggest check the existance of the form first 我假设您是从弹出窗口中的某个位置从edit_details.php加载的,我们异步说#p1_id,现在,您无法启动已附加到提交按钮的任何事件的原因之一是因为它本身没有当您将事件附加到DOM后,它就不存在了,所以我建议先检查表单的存在性
let's say: 比方说:
$(document).ready(function(){
$(#popup).show(function(){
//$.ajax call here
//@inside success callback {
setTimeout(function(){
if($('#p1_id form').length > 0 || $('#p1_id').find('form') == true){
//the form is loaded
$('#p1_id form').find('submit').removeAttr('disabled')
}
},1000); //put a delay to it first to give it enough time to load in your DOM
//} success callback closure
});
});
Hope it helps, cheers! 希望能有所帮助,加油!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.