CODEWITHSUNDEEP
javascripthtml
codezoner
codezoner

Reputation: 1054

HTML button onclick event

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>

Upvotes: 26

Views: 352932

Answers (6)

Ramu Uncle
Ramu Uncle

Reputation: 11

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

Upvotes: 1

AmanS
AmanS

Reputation: 1510

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

Upvotes: 2

David Winiecki
David Winiecki

Reputation: 4203

Having trouble with a button onclick event in jsfiddle?

If so see Onclick event not firing on jsfiddle.net

Upvotes: 2

d1jhoni1b
d1jhoni1b

Reputation: 8025

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

Upvotes: 28

Rahul Tripathi
Rahul Tripathi

Reputation: 172398

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>

Upvotes: 51

Mansoorkhan Cherupuzha
Mansoorkhan Cherupuzha

Reputation: 1761

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

Upvotes: 7

Related Questions