Automatically show form value on page load or submit using .innerHTML

Question

I'm trying to find the simplest, non-expert-coder solution to displaying a search query.

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>

The page reloads on submit rather than going to another page.

Is there a simple way to manipulate my code do display the value in the output div automatically upon page load , rather than onclick?

So whatever was placed in the search box will automatically be displayed once the page loads after refresh or submit. If nothing was entered, then nothing will show.

Answer 1

There are many ways to achieve this, but this would do the job:

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

And using PHP,

<input type="text" name="searchfield" id="searchfield" value="" />
<input type="submit" name="submit" id="submitSearch" value="Submit" />
<div id="output">
<?php
if($_GET['searchfield'])
    echo $_GET['searchfield'];
?>
</div>