How to clear an HTML Form, even the form’s initial values?

I have an HTML form that sends information via post to a PHP file.

On the user’s second visit the page should remember the last search input. So if on their first visit they were looking for pencil then on their second visit, the form would already have prefilled the Product Name input with pencil. I’m doing this via a session variable that is shared between the two files.

For example this is what my code looks like:

<label for="minPrice">Minimum Price</label>
<input id="minPrice" type="text" value="<?php echo $_SESSION['minPrice'];?>" name="minPrice">

<input class="clearForm" type="reset" value="Clear Form">

As you can see, I’m setting the value of the input field using the session variable. Which means the initial value on the second visit of the input will be the value of $_SESSION[‘minPrice’], so the typical type=”reset” for clearing forms doesn’t work. Reset just resets the form to it’s initial values.

My first thought was to unset the session variables, but that wouldn’t change the current values in the input fields of the form.

Answer

There are 2 ways to make it happen

• Using PHP session the correct way
• Using Javascript local storage

---

Using PHP sessions

Make sure your .php file has session_start() at the top.

Now you need to request the server to save the value(s) you wanna use on “the next visit”. This means, requesting the server without refreshing the page through an HTML form submit, using AJAX.

Following JS snippet will post a form to the server, you can modify what to post as easily as eating an apple pie.

fetch(url, {method: 'POST', body: new FormData(form)})

But you have to POST when the user types something so add an eventListener that triggers the fetch method.

document.getElementById('minPrice').addEventListener('keydown', () => {fetch...})

url is the name of the file or the url you wanna POST to,

form is the form you wanna submit, in case you wanna submit some input field(s) alone, replace new FormData(form) by {minPrice: document.getElementById('minPrice').value} and so on.

assign the fetch method to a variable and you can get the server’s response using

variable.then(res => res.json()).then(response => //do whatever you want)

On the server side, get the value(s) using the superGlobal $_POST, such as $_POST['minPrice'] and you can save it in the $_SESSION['minPrice'] variable and whenever the user reloads or makes a second visit, the $_SESSION['minPrice '] will assign the last written minPrice to the input field.

Using Javascript local storage

localStorage is built-into javascript and is quite easier to use. Read more about localStorage on MDN docs. Use

localStorage.setItem('minPrice', document.getElementById('minPrice').value)

And assign the localStorage value to the field on every page load.

document.getElementById('minPrice').value = localStorage.getItem('minPrice')

That’s it!