"Interactive Web Pages with JavaScript" was retired on March 17, 2017. You are now viewing the recommended replacement.

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

Posted by Liam Maclachlan
Liam Maclachlan
22,805 Points

Why does using 'onclick="return addCategory()"' in a named function enable 'return false'?

I was typing some script when I was trying to prevent a buttons default action of redirecting my efforts to a page.

I used 

<button class="button-secondary lsm-button" onclick="addCategory()">Add Category</button>

function addCategory() {
    alert('hello');
    return false;
}

and nothing happened. But when I changed it to

<button class="button-secondary lsm-button" onclick="return addCategory()">Add Category</button>

function addCategory() {
    alert('hello');
    return false;
}

So, my questions are:

1 - Why did the first example above not work?

2 - Why does 'e.preventDefault' not work in this example? (What are the limitations of e.preventDefault)

note: I understand I need to pass the event in to the function but I'm clearly missing something :)

Liam Maclachlan
Liam Maclachlan
22,805 Points

Marcus Parsons, you're needed again :)

1 Answer

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Liam!

The funny thing about buttons is that they don't have a default behavior that you can prevent. They only have functionality that you program for them. You can verify this by just adding a random button element and not doing any JavaScript for the button. You can click it all day and nothing will happen. So, if you created functionality for your buttons to go to a page, it is not default functionality because you added that functionality. Only a button with a type of "submit" has a default behavior that you can prevent, which is to submit data from a form.

I don't know the context of the problem too well, but there are several ways to go about this. The easiest way I can think of going off what you told me is that you could add a class to only those buttons that lead to another page so that any other button without that class will not perform that behavior. That'd be the easiest way, IMO.

Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey man :)

Yeah. The buttons themselves don't actually have a 'type="submit"' on them, so I don't know why this is happeneing! It's quite frustrating that I'm having to implement any type of return false to stop the behaviour. The damage may be caused by the fact it is in a 'form' element

Marcus Parsons
Marcus Parsons
15,719 Points

From what I remember, even button elements inside of a form do nothing unless they have events attached to them or have a type of submit. Is there a way you can put your HTML/JS into a codepen for me to see it? Or if you're working in Workspaces, share a snapshot with me? I like to see the full scope of the problem to see what's really going on.

Liam Maclachlan
Liam Maclachlan
22,805 Points

No problem, man. I'll sort one out and update shortly.

Marcus Parsons
Marcus Parsons
15,719 Points

Okay, excellent, man!

Liam Maclachlan
Liam Maclachlan
22,805 Points

Change of plan. For some reason, the default 'type' was changing to 'submit' or 'reset'... I just simply forced it to 'type="button"' Problem solved =p

NOTE: best answered this thread as it led to the solution

Marcus Parsons
Marcus Parsons
15,719 Points

That is very interesting behavior! I haven't messed around with putting non submit buttons in a form, so I learned something new today! :D

Liam Maclachlan
Liam Maclachlan
22,805 Points

Yeah. It's for a WordPress plug in. Sorting out the administration UI to add add extra category to to a custom post type. Building it from the ground up so I'm getting getting a lot of 'can't see the woods through the trees' moments 0_o

I'm still curious if the default chnages because it is in a form, or if wordpress changes the default to submit... Will report back if I find out.

Marcus Parsons
Marcus Parsons
15,719 Points

Cool definitely I'd like to hear about that