javascript - 如何使用js保存用户输入并在专门搜索时显示信息

Question

所以我们在计算机类(class)中有这个事件，它是关于创建一个网站以使用“提交”输入个人信息，问题是，其中一项任务是客户端/服务器能够搜索输入的信息由用户。所以，我对如何处理“提交”和“搜索”感到困惑。

我似乎无法像这样显示变量内部的数据(目前它只是 null 以避免更多问题)如果我提供的内容没有帮助，我可以显示代码行

html(第一次用户输入个人信息)

<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(昨天开始学javascript，搜索了一下)

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;
    }
}

我希望用户输入的个人信息可用于搜索，并且在搜索到的元素正确后，它将提供给定的信息。这是我的 html 的 SS。

Answer 1

所以这里的问题是，你试图保存点击信息，但它没有保存在任何地方，你可以使用带有 PHP 的 SQL 数据库，或者简单的方法是将值插入数组然后取回它。

好吧，因为您正在提交表单，如果不使用数据库或本地存储，数据将不会被存储，每次提交时页面都会刷新，因此即使它不会存储在数组中，除非您阻止它。

这里是没有数据库的解决方案，使用数组，我对你的代码做了一些修改。

    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>

希望这对您有所帮助。