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
Krystel Hagan
4,731 PointsButton Linking Help!
I am building a calculator for work and am having trouble getting my "Free Demo!" button to link to the URL I have included withing the HTML code for the button.
I cannot figure out what I may be doing wrong, any ideas?
Codepen: http://codepen.io/anon/pen/FrGIy
14 Answers
Naomi Freeman
Treehouse Guest TeacherMay I ask why the demo button is in JavaScript?
Krystel Hagan
4,731 PointsIt isnt? It is in the HTML
Naomi Freeman
Treehouse Guest TeacherOk. Sorry. Guess I need to go for lunch. Was having a hard time separating your stuff out.
Shamime Boodhoo
19,054 PointsI think its because you have used the attribute action instead of formaction on the button.
Naomi Freeman
Treehouse Guest TeacherI believe this will work live:
<button type="submit" onclick="window.location='http://www.example.com';">Demo</button>
but codepen is having some issues right now.
In future, in a non-emergency situation, I'd just make that button HTML.
Krystel Hagan
4,731 PointsThat is what I am trying to do lol
I am trying to avoid javascript if I can
Naomi Freeman
Treehouse Guest TeacherIt'd have to be associated with the form I think.
<form action="http://google.com">
<input type="submit" value="Go to Google">
</form>
Krystel Hagan
4,731 PointsCan I do this if everything is already in a form?
Krystel Hagan
4,731 PointsUpdated Codepen: http://codepen.io/anon/pen/knaFK
It still isnt working :(
Naomi Freeman
Treehouse Guest TeacherHave you tried it in a straight text file that just is saved as index.html?
Or through sublime text?
The external link might just be causing a problem in codepen.
Shamime Boodhoo
19,054 PointsThere's nothing wrong with Codepen and I don't see why you have to change the Javascript. Just change the button attribute from action to formaction and it will work. Action is not a valid attribute for a button as far as I know.
Jason Anello
Courses Plus Student 94,610 PointsHi Krystel,
Is the purpose of the free demo button to simply link to another page or are you trying to submit the form data to that other page using the "Free demo" button?
If it's only purpose is to link to the other page then you should use the <a> element and style it to look like a button.
Krystel Hagan
4,731 PointsI am just trying to link to another page and I am doing everything in sublime and it still isnt working, but I can try to use the anchor tag and see if that works?
Jason Anello
Courses Plus Student 94,610 PointsYes, that would be the more appropriate element to use.
<a href="http://learnmore.appointment-plus.com/acton/fs/blocks/showLandingPage/a/5115/p/p-0091/t/page/fm/1">Free Demo!</a>
You can use target="_blank" if you'd like it to open in a new tab.
So this is just your normal text link and you would apply styling to that to make it look like a button. You'll want to use display: block; so that the entire green area is clickable, not just the text.
If you use inputs or buttons for this then you're going to end up posting that form data to the other page which could cause you other problems.
Pavel Nesmelov
5,429 PointsYep. Anchor tag is what you need.
<a href="http://learnmore.appointment-plus.com/acton/fs/blocks/showLandingPage/a/5115/p/p-0091/t/page/fm/1"><input type="submit" value="Free Demo!"></a>
Jason Anello
Courses Plus Student 94,610 PointsHi Pavel,
You can't put an input element within an a element. It's invalid html.
I believe the <a> element can not have any interactive elements as descendants.
It creates a conflict. Should the browser do the button action or should it go to the href link?
Pavel Nesmelov
5,429 PointsHi Jason, you're right, didn't noticed that input has type "submit", but if replace it with type="button" it will work well (not sure though it is a 100% valid solution, personally i prefer to use div elements for that kind of tasks)
Krystel Hagan
4,731 PointsThank you!