Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 708
confusedstudent Avatar asked Jul 23 '14 15:07

confusedstudent


People also ask

How do I make a button redirect to another page?

To make button type submit redirect to another page, You can use HTML Anchor tags <a>. Where you need to write your HTML Button [button type submit] between these HTML Anchor Tag's starting <a> and Closing </a> Tags. or you can use HTML Form Tags to do the Same thing.

How do I automatically redirect a Web page?

The simplest way to redirect to another URL is to use an HTML <meta> tag with the http-equiv parameter set to “refresh”. The content attribute sets the delay before the browser redirects the user to the new web page. To redirect immediately, set this parameter to “0” seconds for the content attribute.

How do I create a redirect link?

Redirects allow you to forward the visitors of a specific URL to another page of your website. In Site Tools, you can add redirects by going to Domain > Redirects. Choose the desired domain, fill in the URL you want to redirect to another and add the URL of the new page destination. When ready, click Create.

How do I link a submit button to another page in HTML?

In HTML, linking submit buttons using the Anchor Tag is a simple and dependable approach. Write/Declare a Submit button between the Anchor tag's Starting and Closing tags. Give a Path where you wish to link your Submit Button by using the href property of the Anchor element.


3 Answers

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

like image 186
Chris Charles Avatar answered Oct 27 '22 23:10

Chris Charles


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>
like image 30
Rob Quincey Avatar answered Oct 28 '22 00:10

Rob Quincey


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.

like image 22
Mauno Vähä Avatar answered Oct 27 '22 23:10

Mauno Vähä