Question

因此，我们在计算机课程中有此活动，它是关于创建一个带有“提交”的个人信息输入网站的问题，问题是，客户/服务器能够搜索输入的信息的任务之一由用户。因此，我对如何处理“提交”和“搜索”感到困惑。

我似乎无法在这样的变量中显示数据（为避免出现更多问题，现在为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

所以这里的问题是，您试图保存单击时的信息，但是并没有将其保存在任何地方，您可以将SQL数据库与PHP一起使用，或者简单的方法是将值推入数组中然后检索它。

好吧，因为您正在提交表单，所以在不使用数据库或本地存储的情况下，数据将不会被存储。每次提交时页面都会刷新，因此，除非您阻止它，否则它也不会存储在数组中。

这是没有数据库的解决方案，使用数组，我对您的代码进行了一些更改。

    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>

希望这会有所帮助。

Answer 2

如果要搜索输入的text，则必须先将其保存在数据库中，或者临时也可以将其保存在数组中，我已经显示您将数据存储在数组中，如下所示：

@Thanveer的答案将非常有用，但我做出了相同但更简单的替代版本：使用JavaScript的Array.prototype.includes() 方法在数组中查找元素，希望对您有所帮助：

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>

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

2 个答案: