Question

我有一个按钮，当点击它时会触发一个AJAX请求，并打开一个包含Ajax响应的弹出窗口。这个弹出窗口基本上是一个包含一些文本框和提交按钮的表单。我一直试图对它进行一些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

最简单的方法是使用div替换onclick事件并将其设置为按钮。

在div的onclick中放了一个javascript函数，它会禁用你的div然后找到表单然后经过大量的ifs和case验证后呢？

.Submit();

如果一切都过去了，如果没有，请告知观众字段无效

编辑：

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

});

每次提交id为#myForm的任何表单时，都会使用jQuery将事件侦听器附加到documentmer。将使用动态创建的元素。

Answer 2

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

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

您可以使用$('#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时，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
      });

    });

希望它有所帮助，欢呼！

如何禁用通过div（弹出窗口）内的Ajax响应接收的提交按钮？

4 个答案: