javascript - Disable a button in page1 based on a textbox value from page2 (AJAX, PHP,jQuery)

95

I am developing a signup form. And for the 'Username check' feature on username name field I use an AJAX function.

My SIGN UP FORM: page1.php

<form id="user-form" method="post">
<input id="txtusername" name="txtusername" type="text"onblur="getResult2(this.value);">
<div id="showusername" ></div>
<button type="submit" id="butnid" onclick="check()" >Save User</button>
</form>

<script>
 function check(){
 if(getElementById('showusername').innerHTML=="Username available"){
 document.getElementById("user-form").submit();
 }
 }
</script>

Then I use an AJAX function to pass the username entered in the textfield to page2.php, where username check is done.

My AJAX function:

// to check whether a user name already exist or not
function getResult2(uname)
{

    if(window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();

    }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()//callback fn
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {

            document.getElementById("showusername").innerHTML=xmlhttp.responseText;

        }
    }

    xmlhttp.open("GET","page2.php?variable="+uname,true);
    // alert(xmlhttp);
    xmlhttp.send();

}

This works fine & passes the value to page2.php. I want to disable the button in page1 when the value of a variable in page2 is 0.

My page2 code.

<?php
$un=$_GET["variable"];

//php code takes username from database & runs a for loop to check
//suppose $userName[$i] contains all usernames from database
// x is the number of elements in $username[] array.

for($i=0; $i<x;$i++)
{

if( $un ==  $userName[$i])
    {
        echo 'User name already exist';
        $ret_var=0;
        echo '<input type = "hidden" name = "subject1" id="subject1" value="' . $ret_var . '" />';
?>
<script>
// I want to disable the button in page1 if value of $ret_var is 0.

     $(function(){
     var txt = $('#subject1').val();
     if(txt == 0){
     $('#butnid').prop('disabled', true);
                 }
        });

</script>
<?php
        exit();
    }

}
echo 'User name available';

?>

But the button does not get disabled. Any help or suggestions???

252

Answer

Solution:

In your code you are getting values usingvalue .it is not in jquery. instead you have to use like this

$('#subject1').val();
612

Answer

Solution:

page2.php only executes on the server and does not have access to the DOM on page1.php. So send a simple 1 or 0 back to page1.php by way of the AJAX call, then do the DOM manipulation and error reporting in the AJAX response function.

page2.php:

<?php

$un=$_GET["variable"];

//php code takes username from database & runs a for loop to check
//suppose $userName[$i] contains all usernames from database
// x is the number of elements in $username[] array.

for($i=0; $i<$x;$i++)
{

  if( $un ==  $userName[$i] ) {
    echo 0;
    exit;
  }
}
echo 1;

?>

And back in the JS code on page1.php:

 xmlhttp.onreadystatechange=function()//callback fn
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        var username_available = xmlhttp.responseText;
        if ( username_available==0 ) {
          document.getElementById('showusername').innerHTML = 'Username already exists';
          $('#butnid').prop('disabled', true);

        }
        else {
          document.getElementById('showusername').innerHTML = 'Username available';
          $('#butnid').prop('disabled', false);
        }
      }
    }
426

Answer

Solution:

You're coming at this the wrong way.

Put your disable in the callback function. Since it appears you're also using jquery, you can see this as such:

document.getElementById("showusername").innerHTML=xmlhttp.responseText;
if (xmlhttp.responseText == "User name already exist"){
    $('#butnid').attr('disabled', 'disabled');
}
592

Answer

Solution:

Your approach is wrong. You can't control contents in page 1 while being in page 2 directly. You have to check for a value from the session or DB to do such a thing.

Ex: Say you want to turn the background color of page1 while being in the page2:

So you have to have a value in database for that, say iscolor column in color table has this value. Then you update that value from page2 and page1 continuously checks that value at every each 3 seconds. Then after 3 seconds the moment you change the value from page2 will update the page1's background color.

In your case: I think possible simple thing is, have that disabling function inside of the ajax success code block and let your page 2 to output a value for that function to check.

People are also looking for solutions to the problem: php - adding a quotation mark to the beginning and end of a record in an array

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.