26

3 buttons 3 onclick events

This might be a very basic question; believe me I found very hard to find the answer to this question on the internet. I have 3 HTML pages stored in my server (Tomcat locally) & i want to open these HTML pages on a button click. Any help would be highly appreciated.

Here is my code,

<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Online Student Portal</title> </head> <body> <form action=""> <h2>Select Your Choice..</h2> <input type="button" value="Add Students"> <input type="button" value="Add Courses"> <input type="button" value="Student Payments"> </form> </body> </html>
Improve this question
6
  • 1
    window.location is the answer Commented Sep 8, 2013 at 3:58
  • 1
    Can you show us the html code for these buttons ? Commented Sep 8, 2013 at 3:58
  • 5
    You haven't found any examples of adding click handlers to HTML buttons? I find that difficult to believe. Commented Sep 8, 2013 at 3:58
  • Google JavaScript on click window location Commented Sep 8, 2013 at 4:00
  • 1
    <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Online Student Portal</title> </head> <body> <form action=""> <h2>Select Your Choice..</h2> <input type="button" value="Add Students"> <input type="button" value="Add Courses"> <input type="button" value="Student Payments"> </form> </body> </html> Commented Sep 8, 2013 at 4:02

6 Answers 6

Reset to default
51

Try this:-

<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Online Student Portal</title> </head> <body> <form action=""> <input type="button" value="Add Students" onclick="window.location.href='Students.html';"/> <input type="button" value="Add Courses" onclick="window.location.href='Courses.html';"/> <input type="button" value="Student Payments" onclick="window.location.href='Payment.html';"/> </form> </body> </html>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

for UX purposes, these inputs should actually be links e.g. <a href="students.html">Add Students</a>
28

You should all know this is inline scripting and is not a good practice at all...with that said you should definitively use javascript or jQuery for this type of thing:

HTML

<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Online Student Portal</title> </head> <body> <form action=""> <input type="button" id="myButton" value="Add"/> </form> </body> </html>

JQuery

var button_my_button = "#myButton"; $(button_my_button).click(function(){ window.location.href='Students.html'; });

Javascript

 //get a reference to the element var myBtn = document.getElementById('myButton'); //add event listener myBtn.addEventListener('click', function(event) { window.location.href='Students.html'; });

See comments why avoid inline scripting and also why inline scripting is bad

Improve this answer

Comments

7

on first button add the following.

onclick="window.location.href='Students.html';"

similarly do the rest 2 buttons.

<input type="button" value="Add Students" onclick="window.location.href='Students.html';"> <input type="button" value="Add Courses" onclick="window.location.href='Courses.html';"> <input type="button" value="Student Payments" onclick="window.location.href='Payments.html';">
Improve this answer

2 Comments

thanks helped me! the <form> way doesn't seem to like IE8/SharePoint.
we can use location.href instead of window.location.href
2

Having trouble with a button onclick event in jsfiddle?

If so see Onclick event not firing on jsfiddle.net

Improve this answer

Comments

2

This example will help you:

<form> <input type="button" value="Open Window" onclick="window.open('http://www.google.com')"> </form>

You can open next page on same page by:

<input type="button" value="Open Window" onclick="window.open('http://www.google.com','_self')">
Improve this answer

1 Comment

Thanks Aman. But this code makes html open in seperate page. can i open it in same browser window
1 
<body> "button" value="Add Students" onclick="window.location.href='Students.html';"> <input type="button" value="Add Courses" onclick="window.location.href='Courses.html';"> <input type="button" value="Student Payments" onclick="window.location.href='Payments.html';"> </body>
Improve this answer

1 Comment

Could you explain some more about the code snippet and what details you've added and how they solve the problem. Add a reference to any relevant documentation/reading material if possible.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.