Using JS to read from a JSON file when button is clicked

I'm trying to solve a problem where a user inputs values into a search box, presses the search button and with the onClick event the search terms are compared to values in a JSON file. Currently I don't know jQuery so if this can be avoided in the solution I would appreciate it! What I have so far is:

<div id="searchb">
    <button onclick="userSearch()">Search</button>
</div>

This is a simple div for the search button which calls the userSearch function that deals with the JSON file:

<script>
<!--Function which compares inputted name to names in the .json file. -->
function userSearch(thearr) {

... <!-- All of the code that compares the values -->

console.log();
}
</script>

<script src="filepath on my machine">
</script> <!-- Source path to .json file for script -->

The issue that I'm having is that the function in the onClick event doesn't pass any parameters, because the parameter for userSearch is not defined until the script tag is reached. When I run this 'applet' I get an error saying that the parameter thearr is undefined.

The file path is correct because I used it for a similar problem which automatically generated results from the JSON file on page load, it's the button click that seems to be the problem. Any ideas on how this issue could be fixed would be greatly appreciated! Thanks.

EDIT: Search box HTML as requested

<div id="textboxes">
<textarea id="input1" placeholder="First Name" rows="1" cols="10">
</textarea>
<textarea id="input2" placeholder="Surname" rows="1" cols="10"></textarea>
</div>

Answers


From your question, it sounds like you need to get the values from the users input. For userSearch(thearr), i'm not sure what you expect thearr to be. You can get the value of the user input like this:

 function userSearch() {
        var firstName = document.getElementById("input1").value;
        var surName = document.getElementById("input2").value;
        console.log(firstName + " " + surName);
    }

Note: if you are expecting to process multiple first/surnames, you should rethink the architecture. The logic to do so with the current set up would not be simple to write and more importantly unnecessary.


Need Your Help

ServiceStack Serializing lists in XML

serialization deserialization datacontractserializer servicestack

I have a predefined xml sample which defines the requests and responses, the only part I can't get working with ServiceStack.Text.XmlSerializer is the following snippet, which is basically a list of

Tool to track classes/ids between CSS, HTML and Javascript

javascript html css refactoring

In developing a website, I have a section structured like so: