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

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.

Tags:

Javascript

Html

Css

Recent Posts