hbbz040 hbbz040 - 7 months ago 12
Javascript Question

After Saving HTML file, Javascript does not works

Hi, Folks! My goal is create HTML file without external Javascript.

Everything works in https://jsfiddle.net. But, when I open the HTML file the search script is no longer available.

What should I fix on the below code?

Thanks for any help



<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Search Zip Code</title>
<style type="text/css">
div {
padding: 2px 5px;
}
</style>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(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;
}
}

}
};
});
//--><!]]>
</script>
</head>
<body>
<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>
</body>
</html>




Answer

You have to include jQuery file before you use it.

Try this:

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Search Zip Code</title>
    <style type="text/css">
    div {
        padding: 2px 5px;
    }
    </style>

    <!-- === HERE === -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- === HERE === -->

    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    $(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;
                 }
            }

        }
    };
    });
    //--><!]]>
    </script>
</head>
<body>
    <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>
</body>
</html>