How to save user input with js and show info when searched specifically

Question

So we have this activity in our computer course, it is about creating a website for entering personal information with 'submit' and the problem is, one of the task is for the client/server to be able to search the information entered by the users. So, i'm confused as to how to handle the 'submit' and 'search'.

I can't seem to show the data inside of a variable like this (for now it's just null to avoid more problems) i can show the lines of code if what i provided is not helping

html (first user input for the personal information)

<form name="keke" onsubmit="return that();" method="post"><td>First Name<br><input autofocus="1" required="1" type="text" name="firstn" id="txtbox_firstname" style="width: 99%;color: black;"></td>
<!--this is the submit input type, it is part of <form>-->
<input type="submit" name="wth" value="Submit" class="sub"> 
<!--this is the search button type-->
<button class="ss" onclick="search()" placeholder="Search..">Search..</button>
<!--this is where the supposed search comes out from-->
<td><p id="batman"><!--nameGoesHere--></p></td>

javascript(started javascript yesterday, learned a little from searching)

var name = document.getElementById('txtbox_firstname').innerHTML;
    function that(){
        alert("Information Saved!");
        return true;}
    function search() {
    var z = prompt("Search Id Number");
    if (z != null){
        document.getElementById("batman").innerHTML=name;
    }
}

i want the user input on the personal information be available for searching and after the searched item is correct, it will provide the information on the given . here is a SS of my html.

Answer 1

So the problem here is, You are trying to save the information on click, But it is not being saved anywhere, you can either use an SQL database with PHP, Or the simple way would be to push the values into an array and then retrieve it.

Well because you are submitting your form, Without using a database or local storage the data won't get stored, The page gets refreshed every time you submit so even it won't get stored in an array unless you prevent it.

Here is the solution without the database, Using an array, I have made some changes in your code.

    var name;
var myArray = [];
    
     function that(){
        name = document.getElementById('txtbox_firstname').value; // Getting the typed value 
        myArray.push(name); // storing into an array
        console.log(myArray);
      }
    
        function search() {
        var z = prompt("Search Id Number");
      	for(i in myArray){
      	  if(z == myArray[i]){
       	    document.getElementById('batman').innerHTML = z; //Looping the array and checking if the item exist
       	    break;
       	}else{
       	    document.getElementById('batman').innerHTML = "Does not exist";
       	  }
      	}
    }

    <td>First Name<br>
    <input type="text"  id="txtbox_firstname" style="width: 99%;color: black;"></td>
    <!--this is the submit input type, it is part of <form>-->
    <input type="button" onclick="that();" value="Submit" class="sub"> 
    <!--this is the search button type-->
    <button class="ss" onclick="search()" placeholder="Search..">Search..</button><br>
    <!--this is where the supposed search comes out from-->
    <td><p id="batman"><!--nameGoesHere--></p></td>

Hope this helps.

Answer 2

If you want to search the entered text then you have to save it first somewhere, in database or for temporary you can save it in array also, i have shown you storing data in array as below:

@Thanveer's answer will work great but i have made same but simpler alternative version of the answer: using JavaScript's Array.prototype.includes() method to find element in array, i hope it helps someone:

var msg, firstNames = []; //global variables
    
        function that(){
          var name = document.getElementById('txtbox_firstname').value;
          firstNames.push(name); // firstname storing into an array
          document.getElementById('firstNames').innerHTML = firstNames;//setting firsNames array in #firstNames element
        }
    
        function search() {
          var fname = prompt("Search By First Name:");
          msg = (firstNames.includes(fname))?fname:"Does not Exist."; //searching into array and setting appropriate text in msg variable
          document.getElementById('batman').innerHTML = msg;//setting msg in #batman
        }

.boxes{
  display:inline-block;
  margin:10px auto;
  width:40%;
  border:3px solid #ddd;
  padding:10px;
  height:100px;;
}
#firstNames,#batman{
  display:inline-block;
}

<label for="txtbox_firstname">First Name</label>
    <input type="text"  id="txtbox_firstname" style="width: 99%;color: black;">
    <!--this is the submit input type, it is part of <form>-->
    <input type="button" onclick="that();" value="Submit" class="sub"> 
    <!--this is the search button type-->
    <button class="ss" onclick="search()" placeholder="Search..">Search..</button><br>
    <!--this is where the supposed search comes out from-->
    <div class="boxes" ><u>Saved Firsnames:</u><br/><p id="firstNames" ><!--nameGoesHere--></p></div>
    <div class="boxes"><u>Searched Name:</u><br/><p id="batman" ><!--nameGoesHere--></p></div>