如何在我的网站中将此按钮重定向到网站上的另一个页面？

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.

Answer 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

Answer 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.

Answer 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, eg

<form action="create-student">

<!-- Your form goes here -->

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

Answer 4

Add a ID to your button

<button id="btnSubmit" type="submit" class="btn btn-link" >Sign up</button>

$("#btnSubmit").click(function()
{
window.location.href = "http://stackoverflow.com"; //Your URi here
}):

MORE NOTE: I hope using a button type Submit to redirect to another page is odd , if you want to just redirect the user on button click, use button type instead of Submit type like below

<input id="btnSubmit" type="button" class="btn btn-link" value="Sign Up">

(OR)

Use a tag also like <a href="create-student" class="btn">Sign up</a>

Hope this helps...

Answer 5

Try...

onclick="window.open('create-student')" 

instead.

Answer 6

The default behavior of the button element is to submit. Try cancelling the default behavior adding return false .

HTML

<button type="submit" class="btn btn-link" onclick="redirect">Sign up</button>

JS

function redirect() {
   window.location.href='create-student';
   return false; // cancel default behavior
}

Answer 7

Considering it is a Django based site, and extending the anwer of @ChrisC, the correct way of doing it, would be:

1. Give a name to the url that you want to access

   url(r'^signup/$', your_view.SignUp.as_view(), name="signup"),

2. Use the name of the url on the href tag in your template

   <a class="btn" href="{% url 'signup' %}">Sign up</a>