如何禁用div（popup）内部通过Ajax响应接收的提交按钮？

Question

我有一个按钮，单击该按钮会触发AJAX请求，并打开一个包含Ajax响应的弹出div。 该弹出窗口基本上是带有一些文本框和一个提交按钮的表单。 我一直在尝试对它进行一些javascript验证，但似乎没有任何效果，因为它是Ajax响应。 我的代码是

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

<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>

我对任何形式的输入验证都很满意。 但我什至无法禁用edit_details.php中的“提交”按钮。 任何帮助表示赞赏

Answer 1

最简单的方法是使用onclick事件将div的提交按钮替换为div ，然后将其样式onclick按钮。

在div的onclick中放置一个javascript函数，该函数将禁用yhe div，然后找到该表单，然后在进行大量的ifs和case验证之后，

.Submit(); 

如果一切通过，否则，通知查看者字段无效

编辑：

$(document).on("submit","#myForm",function (){
//code goes here 

});

这使用jQuery将事件侦听器附加到文件记录器，以在每次提交ID为#myForm的任何表单时触发。 将与动态创建的元素一起使用。

Answer 2

为“提交”按钮设置禁用属性。

<input type="submit" id="submitBtn" disabled="true" class="classname" value="Update" />

您可以使用$('#submitBtn').removeAttr('disabled');删除此属性$('#submitBtn').removeAttr('disabled');

还是不使用jquery- document.getElementById('submitBtn').removeAttribute('disabled');

Answer 3

有两种方法可以做到这一点，最简单的方法是在页面中编写一些javascript函数，以验证空白字段。

例如

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;

}

现在，当所有字段均为空时，请禁用您的提交按钮。 并像上面那样调用上面的方法

<input type="text" name="email" value="" onchange="checkField(this.value)">

希望这可以帮助

Answer 4

我假设您是从弹出窗口中的某个位置从edit_details.php加载的，我们异步说＃p1_id，现在，您无法启动已附加到提交按钮的任何事件的原因之一是因为它本身没有当您将事件附加到DOM后，它就不存在了，所以我建议先检查表单的存在性

比方说：

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

    }); 

希望能有所帮助，加油！