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

when you want the button will be disabled? did you check with `return false;` — Mithun Sen, Mar 14 '14 at 06:27
Its a basic input validation. If a textbox is left empty the submit button should not be enabled. The submit button should be enabled as soon as the textboxes contain some text. and I did not get return false thing. Can you explain a bit more? — Professor, Mar 14 '14 at 06:31
You have to try http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation — عثمان غني, Mar 14 '14 at 06:36

score 0 · Answer 1 · edited Mar 14 '14 at 06:45

0

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.

edited Mar 14 '14 at 06:45

Chetan Gawai

2,133
18
34

answered Mar 14 '14 at 06:32

Banana

7,309
3
19
41

This method works if I do it on a normal php page but when I m trying to use just to test whether its getting disabled or not, nothing happens. No styling is working on the Ajax response received. – Professor Mar 14 '14 at 06:34
In that case consider attaching attaching on submit event to document for the form, ill update my answer in a sec – Banana Mar 14 '14 at 06:38

Mithun Sen · Answer 2 · 2014-03-14T07:04:26.183

0

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

edited Mar 14 '14 at 07:04

answered Mar 14 '14 at 06:42

Mithun Sen

551
4
17

include jquery to your page. – Mithun Sen Mar 14 '14 at 07:00
Or use `document.getElementById('submitBtn').removeAttribute('disabled');` – Mithun Sen Mar 14 '14 at 07:03
Even this doesnt disable the submit button. Putting jquery is another thing. First i as checking whether the problem is with disabled attribute or not – Professor Mar 14 '14 at 07:13
do you have css with color or background for this button? If yes then you cannot able to see the button disabled. – Mithun Sen Mar 14 '14 at 07:19
If you using css then add a class for disabled with other background color. and remove that class when you want with javascript. – Mithun Sen Mar 14 '14 at 07:22
Ok thx I managed to disable the submit button. But now I m not able to work around the jquery code to disable or enable it depending on the values in textboxes. Tried many tutorials and included jquery as well. but the button wont change – Professor Mar 14 '14 at 07:28
`.removeAttr('disabled');` or `.removeAttribute('disabled');` is not related with textbox value. Any error in console are you getting? – Mithun Sen Mar 14 '14 at 07:34
I know removeattr is not associated with any text box. I tried a code which checks whether a textbox is blank and if it is then remove attribute. – Professor Mar 14 '14 at 07:37
you have to `.removeAttr('disabled');` or `.removeAttribute('disabled');` when all textfields are filled not blank. – Mithun Sen Mar 14 '14 at 07:42

score 0 · Answer 3 · answered Mar 14 '14 at 07:27

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

e.g

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

score 0 · Accepted Answer · answered Mar 14 '14 at 07:36

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!

I understood wat u meant. I tried using your function but the input box doesnt changes. It remains disabled — Professor, Mar 14 '14 at 08:15
have you tried checking if the form is really loaded? like: `if($('#p1_id form').length > 0 || $('#p1_id').find('form') == true){ //the form is loaded console.log('form loaded'); }else{ console.log('not'); }` — Jerric Calosor, Mar 14 '14 at 08:21
Thx got it working. Though I had to use alert instead of disabling/enabling submit button. Still I got it running now. Thx to u — Professor, Mar 14 '14 at 08:53

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

4 Answers4