如何使用Javascript填充輸入文本字段

Question

我試圖從JSON收集數據以在匹配結果後填寫相關的輸入文本字段，但它不起作用。

如何從JSON中填充輸入文本字段？

JS代碼

$(document).ready(function(){ 
 
var filter = document.getElementById('zipcode'); 
 
var JSONtbl = [ 
 
\t \t {"zipcode":01702,"address":"334 CONCORD ST","County":"MIDDLESEX"}, 
 
\t \t {"zipcode":02482,"address":"27 Atwood St","County":"NORFOLK"}, 
 
\t \t {"zipcode":02459,"address":"189 Cypress St","County":"MIDDLESEX"} 
 
\t  ]; 
 
filter.onkeyup = function() { 
 
    var zipcodeToSearch = filter.value; 
 
    var n = zipcodeToSearch.length; 
 
    if (n < 5) { 
 
    \t document.getElementById("address").innerHTML = ""; 
 
    \t document.getElementById("County").innerHTML = ""; 
 
    } else { 
 
     for (var i = 0; i < JSONtbl.length; i++) { 
 
     \t if (JSONtbl[i].zipcode == zipcodeToSearch) { 
 
     \t \t document.getElementById("address").innerHTML = JSONtbl[i].address; 
 
     \t \t 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>

Answer 1

兩個錯誤。

第一條：輸入沒有innerHTML，但是有值。 秒您正在將整數分配給從零開始的郵編。相反，您需要一個字符串類型，因爲輸入返回的值將是一個字符串。

使用此代碼

var filter = document.getElementById('zipcode'); 
 
var JSONtbl = [ 
 
\t \t {"zipcode":"01702","address":"334 CONCORD ST","County":"MIDDLESEX"}, 
 
\t \t {"zipcode":"02482","address":"27 Atwood St","County":"NORFOLK"}, 
 
\t \t {"zipcode":"02459","address":"189 Cypress St","County":"MIDDLESEX"} 
 
\t  ]; 
 
filter.onkeyup = function() { 
 
    var zipcodeToSearch = filter.value; 
 
    var n = zipcodeToSearch.length; 
 
    if (n < 5) { 
 
    \t document.getElementById("address").value = ""; 
 
    \t document.getElementById("County").value = ""; 
 
    } else { 
 
     for (var i = 0; i < JSONtbl.length; i++) { 
 
      
 
     \t if (JSONtbl[i].zipcode == zipcodeToSearch) { 
 
      
 
     \t \t document.getElementById("address").value = JSONtbl[i].address; 
 
     \t \t 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>

Answer 2

我認爲你可以這樣做：

$('#Input_id').val(JsonValue); 

Answer 3

輸入元素沒有一個內部HTML屬性。相反，他們有一個value財產。所以這個：

document.getElementById("address").innerHTML = JSONtbl[i].address; 
document.getElementById("County").innerHTML = JSONtbl[i].County; 

應該是：在你的代碼

document.getElementById("address").value = JSONtbl[i].address; 
document.getElementById("County").value = JSONtbl[i].County; 

Answer 4

試試這個！

$(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").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") 
       } 
      } 
     }; 
    });