如何使用ajax从一个文本框值自动填充另一个文本框值

Question

Hi I wanted to place search box like just dial site when we type the company name it will automatically fill the city name in the another text box

" onfocus="javascript:this.value='';" onblur="javascript: if(this.value==''){this.value='';}" onKeydown="javascript: if (event.keyCode==13)serachProduct();"/>

                <div class="textCurve1" style="float:left;margin-left:10px;">
                    <div class="selectsSR">
                        <input type="text" id="cityname" name="cityname" onKeydown="javascript: if (event.keyCode==13)serachProduct();" value="<?php if(isset($cityName)){echo ucfirst($cityName);}else{echo"City";} ?>" onfocus="javascript:this.value='';" onblur="javascript: if(this.value==''){this.value='<?php if(isset($cityName)){echo ucfirst($cityName);}else{echo"City";} ?>';}"/>
                    </div>
                </div>

SELECT select_company.company_name,select_city.city FROM select_company LEFT JOIN select_city ON(select_company.city=select_city.id) WHERE select_company.company_name LIKE ".$this->db->escape($company."%")." LIMIT 10"

want to update the city field text box automatically

Answer 1

What you can do is you can fire a ajax call on the keyup, keydown or onblur of the first text box.

Pass the first text box data to ajax php file

Now search your company database and find if the company is there and if there what is the relevant city in the database.

Pick the city name and echo it in the ajax.php file to send response.

When you got the response just replace the innerHtml of the second textbox with the city name you got in the response.

I have given you the base logic try it yourself and you can find examples on web also still if you not able to achieve result please post with the code you tried i wil help you surely.

Below is the ajax function

function loadcity(val) {
    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) {

            var res = xmlhttp.responseText;// The response contain the city name returned from the php file from the query result 
            document.getElementById('citytextbox').value=res;// insert the city name in the city text box
            document.getElementById('loaderdivid').style.display='none';//hide loader when you got the response  
        }
    }
    var url = 'ajax.php'; // Url for the ajax.php file where you will fire query to get the city name 

    //Before response
    //Write the code if you want to add some loder image untill the response comes
    document.getElementById('loaderdivid').style.display='block';// show the loader when the request is made 

    xmlhttp.open("POST", url, true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("data=" + val);
}

Already you have the query write it on the ajax.php file

and pass the first textbox value in the function and rest you can understand by the comments in the code