How do I disable a submit button which is received via an Ajax response inside a div(popup)?

Question

I have a button which when clicked triggers an AJAX request and a popup div is opened which contains the Ajax response. 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. My code is

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>

I am comfortable with any sort of input validations. but I m not even able to disable the submit button in edit_details.php. Any help is appreciated

Answer 1

Easiest would be to replace the submit button with a div with an onclick event and style it like a button.

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

.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. Will work with dynamically created elements.

Answer 2

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');

Or without jquery use - document.getElementById('submitBtn').removeAttribute('disabled');

Answer 3

there are couple of ways to do that simplest one is write some javascript function within your page that could validate the empty fields.

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

Answer 4

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

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!