javascript - 如何使用 Javascript 填充输入文本字段

标签 javascript jquery html json

在匹配结果后,我尝试从 JSON 中收集数据以填写相关的输入文本字段,但它不起作用。

如何从 JSON 填充输入文本字段?

JS 代码

$(document).ready(function(){
var filter = document.getElementById('zipcode');
var JSONtbl = [
		{"zipcode":01702,"address":"334 CONCORD ST","County":"MIDDLESEX"},
		{"zipcode":02482,"address":"27 Atwood St","County":"NORFOLK"},
		{"zipcode":02459,"address":"189 Cypress St","County":"MIDDLESEX"}
	     ];
filter.onkeyup = function() {
    var zipcodeToSearch = filter.value;
    var n = zipcodeToSearch.length;
    if (n < 5) {
    	document.getElementById("address").innerHTML = "";
    	document.getElementById("County").innerHTML = "";
    } else {
        for (var i = 0; i < JSONtbl.length; i++) {
        	if (JSONtbl[i].zipcode == zipcodeToSearch) {
        		document.getElementById("address").innerHTML = JSONtbl[i].address;
        		document.getElementById("County").innerHTML = JSONtbl[i].County;
             }
        }
        if (document.getElementById("address").innerHTML == "") {
            alert("ZipCode Out Of Area")
        }
    }
};
});
div {
    padding: 2px 5px;
}
<form method="post">
<div><input type="text" id="zipcode"/></div>
<div><input type="text" id="address" disabled="disabled"></div>
<div><input type="text" id="County" disabled="disabled"></div>
</form>

最佳答案

您的代码中有两个错误。

第一: Input 没有 innerHTML 但有值。 第二 您正在将整数分配给从零开始的邮政编码。相反,您需要一个字符串类型,因为输入返回的值将是一个字符串。

使用此代码

var filter = document.getElementById('zipcode');
var JSONtbl = [
		{"zipcode":"01702","address":"334 CONCORD ST","County":"MIDDLESEX"},
		{"zipcode":"02482","address":"27 Atwood St","County":"NORFOLK"},
		{"zipcode":"02459","address":"189 Cypress St","County":"MIDDLESEX"}
	     ];
filter.onkeyup = function() {
    var zipcodeToSearch = filter.value;
    var n = zipcodeToSearch.length;
    if (n < 5) {
    	document.getElementById("address").value = "";
    	document.getElementById("County").value = "";
    } else {
        for (var i = 0; i < JSONtbl.length; i++) {
            
        	if (JSONtbl[i].zipcode == zipcodeToSearch) {
           
        		document.getElementById("address").value = JSONtbl[i].address;
        		document.getElementById("County").value = JSONtbl[i].County;
             }
        }
        if (document.getElementById("address").value == "") {
            alert("ZipCode Out Of Area")
        }
    }
};
div {
    padding: 2px 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<div><input type="text" id="zipcode"/></div>
<div><input type="text" id="address" disabled="disabled"></div>
<div><input type="text" id="County" disabled="disabled"></div>
</form>

关于javascript - 如何使用 Javascript 填充输入文本字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36752258/

相关文章:

javascript - "Property json does not exist on type {}" typescript

javascript - Opera Mobile 无法使用 Javascript 聚焦文本输入

javascript - 使用 JQuery 单击元素

javascript - 如何让多次点击按钮做不同的事情

javascript - 我有一个视频背景 Bootstrap 页面。如何制作透明叠加层?

html - CSS 页脚宽度 :100% causes horizontal scroll

javascript - 从 JSON 数据按组显示嵌套的 JS 数组到 HTML

javascript - 如何使用 jQuery 将列表项存储在数组中

javascript - 使用 jQuery 选择器,即使我可以在屏幕上看到它并且选择器是正确的,也无法拾取元素

javascript - 如何使用 Azure SQL 数据库中的存储过程一次获取查询的所有批处理?