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

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

du8794
du8794 jsfiddle.net/crustyashish/rew3P这是你想要的吗?
接近 7 年之前 回复
dongshuanggu4333
我在西湖1 你需要比这更清楚。将您尝试过的代码发布给我们
接近 7 年之前 回复

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

doxqszx09742
doxqszx09742 尝试替换document.getElementById('citytextbox')。value = res; with document.getElementById('citytextbox')。innerHTML = res;
接近 7 年之前 回复
dourang8305
dourang8305 请指定更多,因为你有2个文本框所以请写简要并在控制台中检查错误,让我也知道错误如果你正在处理我的答案,请接受答案,我帮助你谢谢
接近 7 年之前 回复
drp935159
drp935159 在文本框中,我在onblur条件后放置值默认值选择列表中的ajax值不会在文本框中返回<input type =“text”id =“cityname”name =“cityname”onKeydown =“javascript:if(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“;}? >';}“/> plz帮我解决这个问题
接近 7 年之前 回复
doulai6469
doulai6469 如果你卡在某个地方随意问我会很乐意帮助:)
接近 7 年之前 回复
dongyoufo5672
dongyoufo5672 谢谢,现在我明白了
接近 7 年之前 回复
drnrxv9383
drnrxv9383 我编辑了答案并放置了代码,您可以复制它并进行最小的更改。
接近 7 年之前 回复
doubeng1278
doubeng1278 plz建议我这样做的例子
接近 7 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐