CODEWITHSUNDEEP
phpvariablesonchange
Darren Griffin
Darren Griffin

Reputation: 31

Textbox value to php variable on textbox value change

Ok. I have no understanding of jQuery or Javascript but need to do a simple task that may be quite simple.

I have a user registration page and the form code is as follows:

<form method="post" action="check.php">
    Minecraft Username:<input type="text" name="user">
    Password:<input type="password" name="pass">
    Password Again:<input type="password" name="passConfirm">
    <input type="submit" value="Login" id="buttonLogin">
</form>

Ok. So what i want to do is make it so when the 'Minecraft Username' field has changed, it will update a variable. Here is what i need, if someone could write and explain the code.

On the textbox value change, it will set the value to a php variable called $registerUsername and that variable is used in an img...

<img src="https://minotar.net/helm/<?php echo $registerUsername ?>/20.png">

Thanks alot. :D

EDIT: I want it to change in real time, not after a post.

Upvotes: 0

Views: 7446

Answers (2)

Nil&#39;z
Nil&#39;z

Reputation: 7475

You can try the following code:

<form method="post" action="check.php">
    Minecraft Username:<input type="text" name="user" id="user" />
    Password:<input type="password" name="pass" />
    Password Again:<input type="password" name="passConfirm" />
    <input type="submit" value="Login" id="buttonLogin" />
</form>
<img id="minecraft_img" src="" />
<script type="text/javascript">
    $(function(){
       $("#user").on('change', function(){
            $.ajax({
               url      : 'ajax.php',
               data     : {'user' : $("#user").val()},
               type     : 'POST',
               success  : function(resp){
                    $("#minecraft_img").attr('src', resp);
               },
               error    : function(resp){
                    alert('Ajax Error !');
               }
            });
       }); 
    });
</script>

<?php
    if(isset($_POST['user']) && $_POST['user'] != ""){
        $session['minecraftUser']   = $_POST['user'];
        echo 'https://minotar.net/helm/'.$session['minecraftUser'].'/20.png';
    }

?>

Upvotes: 2

InsaneCoder
InsaneCoder

Reputation: 8268

You need to make AJAX call. Following is the explained code ajax_call.php

<html>
<head>
<script type="text/javascript">
//function which is called as soon as a user types a single character
function update()
{   
    //Step 1:create XMLHttpRequest object to make AJAX call.
    try{
        //for firefox,chrome and opera.
        xmlHttp=new XMLHttpRequest();
    }catch(e){
        try{
        //for IE    
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(e2){
        //Otherwise, notify browser doesn't support ajax.
        alert('Sorry ! AJAX not supported');
    }
    }
    //create a handler function to handle the response
    xmlHttp.onreadystatechange=function(){
        //execute the code only when response is successfull
        //readyState=4 denotes success
        //HTTP status=200 denotes OK.
        if(xmlHttp.readyState==4&&xmlHttp.status==200){
            //update the div inside HTML with the respone text received.
            document.getElementById('content').innerHTML=xmlHttp.responseText;
        }
    }
    //make AJAX call
    xmlHttp.open('GET','ajax_reply.php?content='+document.getElementById('search_text').value,true);
    xmlHttp.send(null);
}
</script>
</head>
<body>
<form name='myForm'>
    <input type="text" id="search_text" onkeyup="update()">
</form>
<div id="content"></div>
</body>
</html>

Now the code for ajax_reply.php where you can set the variable or reply the response or do whatever you like.

<?php
if(isset($_GET['content']))
echo $_GET['content'];
//you can set the variable here like:-
//$text = $_GET['content'];
?>

I hope this helps.

Upvotes: 3

Related Questions