HTML button onclick event

Question

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>

You haven't found any examples of adding click handlers to HTML buttons? I find that difficult to believe. — Barmar, Sep 08 '13 at 03:58
As written, this would submit the form to an empty URL. But since the poster tagged this question with `Javascript`, @Rahul Tripathi's answer is appropriate, showing how to add Javascript click handlers to the button elements. A non-Javascript answer would require defining the form action; the posted button name would be submitted to the server there. — Suncat2000, Mar 09 '17 at 15:00

score 51 · Accepted Answer · edited Mar 27 '14 at 12:44

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>

edited Mar 27 '14 at 12:44

Michel Ayres

5,663
8
59
96

answered Sep 08 '13 at 04:04

Rahul Tripathi

161,154
30
262
319

4

for UX purposes, these inputs should actually be links e.g. Add Students – aaaaaa May 21 '18 at 18:50

score 27 · Answer 2 · edited May 23 '17 at 12:34

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

score 7 · Answer 3 · answered Sep 08 '13 at 04:04

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';">

answered Sep 08 '13 at 04:04

Mansoorkhan Cherupuzha

1,751
1
24
44

thanks helped me! the
way doesn't seem to like IE8/SharePoint.
– Michael Carn-Bennett Jul 09 '14 at 01:52
we can use location.href instead of window.location.href – Lova Chittumuri Jun 01 '17 at 07:04

score 2 · Answer 4 · edited Sep 21 '15 at 09:50

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')">

edited Sep 21 '15 at 09:50

cjhveal

5,279
1
25
37

answered Sep 08 '13 at 04:02

AmanS

1,360
2
12
22

Thanks Aman. But this code makes html open in seperate page. can i open it in same browser window – codezoner Sep 08 '13 at 04:06

score 2 · Answer 5 · edited May 23 '17 at 12:03

2

Having trouble with a button onclick event in jsfiddle?

If so see Onclick event not firing on jsfiddle.net

edited May 23 '17 at 12:03

Community

1
1

answered Apr 02 '15 at 03:46

David Winiecki

3,946
2
34
39

score 1 · Answer 6 · edited Nov 29 '16 at 17:03

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>

edited Nov 29 '16 at 17:03

Alexander Farber

19,827
73
224
393

answered Apr 17 '14 at 12:52

Ramu Uncle

11
1

3

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. – StuperUser Apr 17 '14 at 13:35

HTML button onclick event

Select Your Choice..

6 Answers6

Linked