1

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.

Mike Lyons
  • 1,748
  • 2
  • 20
  • 33
noname
  • 95
  • 6

4 Answers4

1

Use JavaScript to clear out the values of the form fields.

Something like:

<button onclick="() => {
  document.querySelectorAll('input').value = '';
}" />

That way when you click the reset button, it sets all inputs value to empty string.

Mike Lyons
  • 1,748
  • 2
  • 20
  • 33
  • 2
    This is in principle a possible solution but hardly an actual answer to the question as you don't provide any real solution outside of a generally applicable but ultimately nebulous answer with no real depth or examples. – Jem Nov 27 '20 at 03:39
  • @Jem you're right, I think I was meaning to come back and expand when the question also had more detail giving context, this is not my typical answer style, thank you for calling me out on it so that I remembered to come back and update it! If you think I provided a decent example, would you mind undoing your downvote and we can delete these comments? Thanks again. – Mike Lyons Dec 02 '20 at 22:42
  • 1
    I feel ya. Such things happen, no big deal and nice of you to even back track to it. I swapped my vote. – Jem Dec 04 '20 at 01:45
  • 1
    `document.querySelectorAll('input').value = '';` will throw. NodeLists don't have `.value` properties. – ggorlen Jul 20 '22 at 21:29
  • 1
    @ggorlen, You're absolutely right `document.querySelectorAll('input')` will be a NodeList, so you must loop over it like you would an array and set `theNodeList[n].value = ''` or whatever the field's default is, where `n` is the index of each field in the NodeList. I will return later to further improve this answer with a loop example, thanks. – Mike Lyons Jul 22 '22 at 08:36
1

Take a look at this !

Make page to tell browser not to cache/preserve input values

Stop browser from filling textboxes with details

Alternatively, try adding this in Jquery :

$("form :input").attr("autocomplete", "off");
Dizio Adil
  • 53
  • 5
1

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!

Kashan Ahmad
  • 165
  • 5
0

If you're never going to want the field autofilled by the browser it seems like you'd simply want to use the autocomplete="off" flag on the input field you desire to be dynamically filled by your php script.

You can read more about the specific of this on the MDN docs.

Basically though you'd take the input, store it as a session variable, load the next page and populate the search variable into the input field as a value and turn the autocomplete functionality off so that the browser cannot override the value you provide from the session value.

The support for for this seems fairly broad. and should in most cases prevent the browser from overriding whatever it has stored for the field.

If you're still running into issues with it filling you cvould maybe look to adding some javascript functionality with the reset() function. However depending on how this is fired it might actually end up overriding whatever you populate with the PHP function at the time the DOM is actuall rendered

Jem
  • 744
  • 2
  • 7
  • 25