How to Populate Input Text Field with Javascript

Question

I tried to collect data from JSON to fill out related Input Text Field after matching results, but it's not working.

How can I get populate the input text field from the JSON?

JS Code

$(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>

Use value instead of innerHTML

ayushgp
– ayushgp

2016-04-20 18:33:05 +00:00
Commented Apr 20, 2016 at 18:33 — ayushgp
– ayushgp, Commented Apr 20, 2016 at 18:33
thanks for helping

hbbz040
– hbbz040

2016-04-20 19:28:41 +00:00
Commented Apr 20, 2016 at 19:28 — hbbz040
– hbbz040, Commented Apr 20, 2016 at 19:28
If you found the answer helpful, please upvote it.

ayushgp
– ayushgp

2016-04-21 02:32:16 +00:00
Commented Apr 21, 2016 at 2:32 — ayushgp
– ayushgp, Commented Apr 21, 2016 at 2:32

Shubham Khatri · Accepted Answer · 2016-04-20 18:46:13Z

Two mistakes in your code.

First: Input does't have innerHTML but value. Second You are assigning integer to zipcode starting with zero. Rather you need a string type because value returned by input will be a string.

use this code

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>

ayushgp · Accepted Answer · 2016-04-20 18:35:10Z

0

Input elements do not have a inner html property. Rather they have a value property. So this:

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

should be :

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

answered Apr 20, 2016 at 18:35

ayushgp

5,12110 gold badges46 silver badges81 bronze badges

Comments

Rafael Mota · Accepted Answer · 2016-04-20 18:50:31Z

0

try this!

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

answered Apr 20, 2016 at 18:50

Rafael Mota

1274 bronze badges

1 Comment

Heretic Monkey Over a year ago

Welcome to Stack Overflow! Please add some explanation of why this code helps the OP. This will help provide an answer future viewers can learn from. See How to Answer for more information.

Infem 401 CedupHH · Accepted Answer · 2016-04-20 18:34:37Z

-1

I think that you can do like this:

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

edited Apr 20, 2016 at 18:34

answered Apr 20, 2016 at 18:34

Infem 401 CedupHH

1062 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to Populate Input Text Field with Javascript

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related