Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Select a Page Element By Its ID

dylan jasper
dylan jasper
1,928 Points
Posted by dylan jasper
dylan jasper
1,928 Points

Color does not persist when enclosing input inside a form tag

In this exercise we use an input tag to color the heading element. When used by itself the data captured in the input tag persists. However, if you enclose an input tag inside of a form tag (which is pretty standard) that data doesn't persist so the color flashes on the heading and then is gone. Without an action attribute assigned to the form data, I'm assuming the input is just gone forever. Is there a way to persist the data without using a backend language like php?

Kieran Barker
Kieran Barker
15,028 Points
Kieran Barker
Kieran Barker
15,028 Points

I don't understand what you mean. I just tried wrapping the input with a form and it behaves exactly the same.

2 Answers

Steven Parker
Steven Parker
231,008 Points
Steven Parker
Steven Parker
231,008 Points

If you use a "form" but forget to override the default submit behavior, the page will be reloaded which will cancel out any changes you have made to it.

If you want the page to reload, the only way to persist settings without back-end assistance is to save them in local storage and and re-apply them on load.

There happens to be a workshop here for Using Local Storage with JavaScript.

dylan jasper
dylan jasper
1,928 Points
dylan jasper
dylan jasper
1,928 Points

Thank you for the explanation and the link to a workshop on the subject!

dylan jasper
dylan jasper
1,928 Points
dylan jasper
dylan jasper
1,928 Points

Thank you for the response. Did you nest both the input and button elements inside the form tag? If you just nest the input you won't get the behavior I mentioned.

Steven Parker
Steven Parker
231,008 Points
Steven Parker
Steven Parker
231,008 Points

That's because the button will not invoke the submit behavior (and cause a page reload) when it is outside of the form. When it is inside, you can override the submit behavior with a call to the "preventDefault" method of the event object.