Как заполнить текстовое поле ввода с помощью 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, но значение. Second Вы назначаете целое число в zipcode, начиная с нуля. Скорее вам нужен строковый тип, потому что значение, возвращаемое вводом, будет строкой.

использовать этот код

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