0

I would like to keep my form fields filled after I press the "submit" button. I noticed that when the page loads, my fields are cleared, and I'd like them to keep the data I provided before. (I feel like browsers used to do this by default.) Is there an easy way to do this?

Right now, I'm using the GET action so I can see all my data, and my page is a plain HTML file, to keep it simple. I know I can read all the file using $_GET['whatever'] and place the values back in the form fields, but I feel there's an easier way which can keep all fields in the form complete.

I've also tried a couple of session tricks but they didn't work. I also tried removing excess, like my labels, and that didn't do anything.

My page is straighforward right now. I have a basic form:

<form name="filter" method="get" action="">
<input type="text" name="s" value="" /><br />
<select id="location">
    <option value="school">School</option>
    <option value="work">Work</option>
    <option value="home">Home</option>
</select><br />
<label><input type="checkbox" name="cat" value="0" /> Category1</label><br />
<label><input type="checkbox" name="cat" value="1" /> Category2</label><br />
<label><input type="checkbox" name="cat" value="2" /> Category3</label><br />
<input type="submit" value="Go &#10151;" />
</form>

I'll provide some values, submit (which loads the page again), and they'll be blank. It passes my variables to the URL just fine, but I'd like the fields to remain populated.

Brendan
  • 107
  • 2
  • 13

1 Answers1

1

First, you can use autocomplete="on" within the <form> tag to insure that text can be selected from a drop down menu that the browser creates 

<form name="filter" method="get" action="" autocomplete="on">
<input type="text" name="s" value="" /><br />
<select id="location">
    <option value="school">School</option>
    <option value="work">Work</option>
    <option value="home">Home</option>
</select><br />
<label><input type="checkbox" name="cat" value="0" /> Category1</label><br />
<label><input type="checkbox" name="cat" value="1" /> Category2</label><br />
<label><input type="checkbox" name="cat" value="2" /> Category3</label><br />
<input type="submit" value="Go &#10151;" />
</form>

While this work for the text information (Not a true auto filling, but good and easy to use), this will not work for the option and label options

If that inability is a deal breaker, you could try and store your data into a cookie using JavaScript when the user clicks submit. Then, when the page is re-loaded use JavaScript to set the value of your form if the cookie exists.

References/useful information:

Where you can learn more about the autocomplete: https://www.w3schools.com/tags/att_form_autocomplete.asp

For checking the box when loading in:Check/Uncheck checkbox with JavaScript (jQuery or Vanilla)?

For loading in the content after page load: JavaScript that executes after page load

For saving in the checkbox: Get the value of checked checkbox?

Note: You another method... like your GET, It is just a cookie is the first thing that comes to mind.

Joshua Proctor
  • 71
  • 8