How can I make this button in my website redirect to another page on the website?

Question

I have been trying to make this button redirect to another page on the website based on some of the research I've done here and in other places, but no matter what I try, it won't work. As a preface, this website is django-based, but I also have bootstrap, javascript, and JQuery in here.

<button type="submit" class="btn btn-link" onclick="window.location.href='create-student'">Sign up</button>

So, the Sign up button is on the base page and create-student is the link to the page I want the button to go to. That's what I have so far, among other things I've tried. It simply refreshes the page and adds a ? to the end of the url.

Solution 1

As you are using bootstrap, you can style a link to look like a button:

<a href="create-student" class="btn">Sign up</a>

This also saves problem of no javascript

Solution 2

You should make it as a link, and style it to look like a button.

With boostrap, this is accomplished by adding class="btn" to a link.

After that it is much simpler, no javascript tricks involved and you are using links when those should be used. (Navigating from page to another).

<a href="create-student" class="btn btn-default">Sign up</a>

If you are curious how to style it as you wan't read more from the docs:

Boostrap docs about buttons.

Basically, you can use any of the btn-default, btn-primary, btn-success and similar classes for the links also.

Cheers.

Solution 3

To expand on ChrisC's (and now Maunos - damn I'm too slow at typing) answer...

Can you not just make your an instead without needing to use Javascript?

<a class="btn btn-default" href="/create-student">Sign Up</a>

The advantage of using an <a> with a href is that it is symantically correct (it's a link tag, and you are creating a link), users without Javascript can use it (yes I know this is a very small issue these days but still), and it is better for people who want to right click and go Open link in new tab'. Try doing that with a javascript based button, you can't.

I see it mentioned that you might want this to be a submit. From the sounds of it I don't see that, but if it does need to be a submit it should be within a form, and the action will do the post to that particular page, e.g.

<form action="create-student">

<!-- Your form goes here -->

<input type="submit" value="Sign Up" class="btn btn-default" />
</form>

Comments

[Rob Quincey]

Why has this been downvoted? I was about to answer exactly the same. I would always recommend using an <a> with a proper href over a button with an onclick. Buttons with onclick have a lot of pitfalls.

[Claudio Redi]

Not sure why someone downvoted this, I thought exaclty the same. +1

[Anto king]

@RobQuincey Hey but he need as a Subnit type button right? That can't be achieve with this?

[Mauno Vähä]

@AntoKing I believe it is just confusion, onclick action indicates that he want's user to move to another page.

[confusedstudent]

This is perfect and does exactly what I want it to do, with the exception of it not looking like a button anymore. Is there anyway to achieve that? I lied, I just added success and it looks like a button now.

[Chris Charles]

@Anto King - good point, but I would still recommend the html approach over js in this case.

[Rob Quincey]

@AntoKing Possibly, in which case the answer I just added should be more correct, you should need a type of submit if you are not 'submitting' a form. The OP didn't indicate there was a form.

[Anto king]

@RobQuincey Ya i understand i too not sure why user uses type submit for just redirect, but as per the code he provide i place my answer

[confusedstudent]

No, this answer is perfect, I was just confused as to the different classes of buttons.