使用.innerHTML重新加载后，在页面上保留表单ID的输出值

Question

I have a search form where onclick of the submit button it displays the form value underneath. This is the code:

 <input type="text" name="searchfield" id="searchfield" value="" />
<input type="submit" name="submit" id="submitSearch" value="Submit" onclick="document.getElementById('output').innerHTML = document.getElementById('searchfield').value" />
<div id="output"></div>

It works fine, but once submitted (the page reloads rather than going to another page) the value in the output div disappears.

Is there a way to make the value remain, even after page reload?

I'm trying to find the simplest way to achieve this.

</div>

Answer 1

You can do this in severals ways for example using get values, sessions, cookies, localstorage, ajax,...

Since you are trying to build a search form GET values seems the most appropriate (or ajax too).

An example of code:

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get">
  <input type="text" name="searchfield" id="searchfield" value="" />
  <input type="submit" id="submitSearch" value="Submit"/>
</form>

<div id="output">

<?php

if(isset($_GET['searchfield'])) {
  echo $_GET["searchfield"];
 }

?>

</div>

Check AJAX if you don't want a reload.