How To Remember Form Data

How to remember the form data

We’re actually going to cover a lot of odds and ends with regard to the form that allows a user to create a new thread in this tutorial. We’ll just go ahead and call the post, “How To Remember Form Data” since that is my favorite feature we’ll cover in the following examples. First off though, we’ll add a link so that users can click right over to the form where they can create a new thread. Next up, we’ll add that great feature of remembering form data when a user makes a mistake during form submission. After that, we add the ability to display any errors that come up during a failed form submission. We’ll also add a new <select> element to our form so that users can choose a proper channel. We’re not done there however, so let’s jump right in and fix up this form.

Add Link For Creating A Thread

Let’s now add a link for users to be able to click so that they can visit the form which allows them to create a new thread. Within the markup of app.blade.php, we can add a simple link like so:

This is working good, we see our form to create a new thread. Adding data here and then submitting does not yet work. We need to add the markup to display validation errors so we can see what is going on. In addition to this, it would be nice if the form could “remember” the data you populated when you click on Publish.
new thread link is working

How to remember form data

If you submit a form and validation fails, you are redirected back to the form. It is horrible to have that form clear out all the information you just typed in. There is a nice way to make sure that doesn’t happen by making use of the old() helper function which repopulates the form using PHP sessions. Here is how we implement it. Open up threads/create.blade.php and note the following:

Nice! When we add some information to the form and then click Publish, validation fails and we are redirected right back to the same page. The nice thing however is that our form still has the data we took the time to add.

How to display validation errors

In addition to remembering the data you enter into the form, we of course need to display the actual errors that caused validation to fail. Here is the usual markup you might see to help accomplish this.

Let’s try creating a new thread again and see how this works now. Ah ha, it looks like we are missing the channel id field, which is a required field according to the validation rules we had set up earlier.
How to display validation errors

Adding The Ability To Select A Channel When Creating A Thread

So we see what the problem is now that we are displaying the errors. We are missing a channel id when creating a thread. Well, we don’t even have a way to select a channel yet when we try to create a thread! We need to fix this. Let’s revisit threads/create.blade.php and tackle this here.

In the above highlighted area, we set up a <select> element, and then populate all of the nested <option> elements using a foreach loop. With the inclusion of some bootstrap styling, it also looks nice in the browser. In fact, we can create a new thread, view it, and even add a reply.

creating a new thread in action

How to remember a selected option value in a <select>

We already set up the ability for the form to remember the title and body areas when submitting a form and validation catches an error. This is not yet set up for when a user tries to select a channel. For example, we choose to create a new thread in the repellat channel, but forget to give the thread a Title.
choosing an option value in select

When we submit the new thread, validation correctly finds that the title is missing, and we can see this in the errors. Notice the channel however. It has gone right back to “Choose A Channel” when it would be much better if it remembered that we had already chosen the repellat channel. We can fix that problem like so:

Now, we can select a channel and submit our form. If validation fails, we can see that the channel we chose is now remembered properly. Fantastic.
option in select is remembered

How To Add Browser Side Validation

Everything is working pretty good now! The final thing we want to do is to add some browser side validation, which is incredibly easy with modern browsers. All you need to do is add the “required” attribute to inputs you want to be required and the browser will automatically check these before even attempting to send the request to the server. So with the combination of browser side and server side validation, you will be in good shape. Here we add that attribute.

If we test out the form once again, it looks like the form does not even get sent to the server, the browser side catches the problem and alerts us right away.
browser side validation in action

How To Remember Form Data Summary

As you can see we covered a whole lot more than just remembering form data in this tutorial. We learned about browser side validation, remembering an option value of a select element, displaying validation errors, and other useful snippets for working with form data.