如何禁用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
      });

    }); 

希望能有所幫助，加油！