"JavaScript Basics (Retired)" was retired on March 27, 2020.

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

HTML

Kris Byrum
Kris Byrum
32,636 Points
Posted by Kris Byrum
Kris Byrum
32,636 Points

Button - Form Inputs

Okay. So I'm messing around with form elements after learning more about them. I'm a little stuck.

Here is what I would like to do.

Using HTML5, I want to have three buttons. Two of these buttons are related to eachother, whereas if I press one it will be focused. If I press the other it will gain focus and the other will lose it.

Further, I'm trying to get the value of each button to Post to my database for my store (this is just a pretend practice store similar to the Mike Shirts page). These buttons are going to tell me what item the customer bought.

The last button is just a simple Add to Cart button that will Post the data from the selected buttons mentioned above.

Right now I'm using the input type=button tag in a form, but I'm not sure how to get the functionality that I mentioned above.

Any help would be greatly appreciated as I didn't see anything in the videos after reviewing them again.

3 Answers

Chris Cooper
Chris Cooper
23,959 Points
Chris Cooper
Chris Cooper
23,959 Points

have you tried using button tags instead, with a type of submit? and a post method on the form element?

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

If you're talking about having a 'selected' state for the buttons, I think you might be better served with a hidden checkbox.

Check out the post Stuff you can do with the “Checkbox Hack” from CSS-Tricks.

Otherwise, just control the class on each of the buttons using JavaScript/jQuery, and maybe keep some input type="hidden" tags to hold your data (or do the entire form submit with JavaScript/jQuery if that's your thing).

CJ Williams
CJ Williams
34,372 Points
CJ Williams
CJ Williams
34,372 Points

If I am understanding the question correctly, the first two buttons are co-dependent on each other and act more like a radio button than an actual button.

Have you considered using radio buttons here? Sounds to me like that would be the best solution here. You could style the radio buttons to appear as buttons, or even a conditional "switch"? There may be some jQuery involved still, but I will play around with this today to see if I can create the effect with just css and html using form elements.