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>
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>
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
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';">
Having trouble with a button onclick event in jsfiddle?
If so see Onclick event not firing on jsfiddle.net
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')">
<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>
Related
I have a problem with buttons on my website. I have taken it from a colleague and want to change the function of the keys.
At the moment this is solved directly in HTML. That looks like this:
<table class="formButtons">
<tr>
<td>
<form method="post">
<p> <input name='"Variable".allowStart' value="1" type="hidden"> </p>
<p> <input class="Start" value="Start" type="submit"> </p>
</form>
</td>
<td>
<form method="post">
<p> <input name='"Variable".allowStart' value="0" type="hidden"> </p>
<p> <input class="Stop" value="Stop" type="submit"> </p>
</form>
</td>
</tr>
</table>
When pressing the Start or Stop button, the whole page is reloaded. I do not want that.
As you can see, my variable '"Variable".allowStart"' is called and set to value=1. Now I want to set the value of the variable to 1 in Javascript. But I do not know how. Can you help me?
And please, detailed answers, I am a total beginner in programming.
Extra information:
'"Variable".allowStart'
is a variable that I get from my Siemens PLC.
It works as shown in the example. All I have to do is add the variable as a comment in the HTML file. Like this:
<!-- AWP_In_Variable Name='"Variable".allowStart' -->
I don't understand your '"Variable".allowStart' , but if you are able to use it in your javascript then you can proceed with this answer.
To stop the Start & Stop button from reloading the page, you can prevent the default behavior of the input elements by using preventDefault() and do your desired stuff from there.
Check out the modified HTML & the javascript for this:
window.onload = function (){
var start = document.getElementById('Start');
var stop = document.getElementById('Stop');
start.onclick = function (e) {
e.preventDefault();
//add desired code here
console.log('Clicked Start');
}
stop.onclick = function (e) {
e.preventDefault();
//add desired code here
console.log('Clicked Stop');
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weird Buttons</title>
</head>
<body>
<table class="formButtons">
<tr>
<td>
<form method="post">
<p> <input name='"Variable".allowStart' value="1" type="hidden"> </p>
<p> <input id="Start" class="Start" value="Start" type="submit"> </p>
</form>
</td>
<td>
<form method="post">
<p> <input name='"Variable".allowStart' value="0" type="hidden"> </p>
<p> <input id="Stop" class="Stop" value="Stop" type="submit"> </p>
</form>
</td>
</tr>
</table>
</body>
</html>
I am making a questionnaire where specific answers will link to other of my webpages through submit. How do I hyperlink specific answers in text input so that when the user clicks submit it sends them to the page specific to the answer given by the user? I am somewhat new to html/css and have only done a bit of js. I have found different answers to some relatable questions but not truly specific to what I want.
Here is what I have so far:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<center><h1>Friendship Evaluator</h1></center>
<table width="60%" border="0">
<tbody>
<tr>
<td><h3>Choose your best friend:</h3>
<strong>
<p>Filip</p>
<p>David</p>
<p>Christopher</p>
</strong>
<p>Now type your <b>besties</b> name and pick a dish</p>
<form action="submit-friend">
<label for="Pizza">
<input id="Pizza" type="radio" name="Pizza-Lasagna">Pizza
</label>
<label for="Lasagna">
<input id="Lasagna" type="radio" name="Pizza-Lasagna">Lasagna
</label>
<br>
<input type="text" placeholder="Favorite Friend" required>
<button type="submit">Submit</button>
</form></td>
</tr>
</tbody>
</table>
</body>
</html>
I need some help. I want to convert this iframe into this textarea, so I can be able to write text in it. I try the below code, but it's not working.
Here are my code
$(document).ready(function () {
$(function () {
$("#richTextField").on("load", function () {
var str = $(this).contains().find('html').prop('outerHTML')
});
});
});
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/prof.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript"></script>
<script src="script/Working.js"></script>
</head>
<body onLoad="iFrameOn();">
<div id ="addtext" class="panel">
<form action="my_parse_file.php" name="myform" id="myform" method="post">
<!-- <div id="rte" contenteditable="true" unselectable="off">Write here ....</div>-->
<div id="menu">
<input type="button" onClick="iBold()" value="B">
<input type="button" onClick="iUnderline()" value="U">
<input type="button" onClick="iItalic()" value="I">
<input type="button" onClick="iFontSize()" value="Text Size">
<input type="button" onClick="iForeColor()" value="Text Color">
<input type="button" onClick="iHorizontalRule()" value="HR">
<input type="button" onClick="iUnorderedList()" value="UL">
<input type="button" onClick="iOrderedList()" value="OL">
<input type="button" onClick="iLink()" value="Link">
<input type="button" onClick="iUnLink()" value="UnLink">
<input type="button" onClick="iImage()" value="Image">
<textarea style="display:none;" name="rte" id="rte" cols="100" rows="14"></textarea>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe>
<br /><input name="myBtn" type="button" value="Submit Data" onClick="javascript:submit_form();"/>
</iframe>
</div>
</div>
</body>
</html>
I was hoping that some can help me.
Im making a website which requires uers to login or register if they dont have an account.
I have the following code so far for the login page
<span href="#" class="button" id="toggle-login">Log in</span>
<div id="login">
<h1>Log in</h1>
<form>
<input type="userID" placeholder="UserID" />
<input type="password" placeholder="Password" />
<input type="submit" value="Log in" />
</form>
</div>
and i have Javascript (below) that should hide the login form when clicking on the log in button at the top
however it doesnt seem to hide the login form.
$('#toggle-login').click(function(){
$('#login').toggle();
});
I was wondering if anyone could help me to toggle-hide and unhide the form and if theres a way to have two forms on one page where the user can either hide the login form and display the register form and vice versa
My whole page looks like this:
<!DOCTYPE html>
<head>
<title>Login Form</title>
</head>
<body>
<span href="#" class="btn btn-default" id="toggle-login">Log in</span>
<div id="login">
<h1>Log in</h1>
<form>
<input type="userID" placeholder="UserID" />
<input type="password" placeholder="Password" />
<input type="submit" value="Log in" />
</form>
</div>
<script>
$('#toggle-login').click(function(){
$('#login').toggle();
});
</script>
</body>
</html>
Thanks
You have to include the jQuery library if you are going to use it. Add this to your head section and you should be fine.
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<div id="toggle-login">
<form>
<!-- FORM ELEMTNS -->
<input typre="text">
</form>
</div>
<input type="button" id="btn" value="toggle login" >
Jquery:
$("#btn").click(function(){
$("#toggle-login").toggle();
});
Also include the jquery library at head session.
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
I have a login form inside an iframe. Here is the code for the main page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<script language="javascript">
function SubmitForm() {
document.getElementById('loginframe').contentWindow.document.getElementById('login').submit();
}
</script>
<title>Login to Vote</title>
</head>
<body>
<iframe id="loginframe" src="sasloginhandler.html"></iframe>
<input onclick="SubmitForm()" value="Submit form" type="button">
</body>
</html>
And here is the code for the "sasloginhandler.html" page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<title>Login to Vote</title>
</head>
<body>
<form action="https://moodle.standrews-de.org/login/index.php" method="post"
id="login">
<div class="loginform">
<div class="form-input"> <input name="username" placeholder="Username"
id="username"
size="15"
type="text">
</div>
<div class="form-input"> <input name="password" placeholder="Password"
id="password"
size="15"
value=""
type="password">
<input id="loginbtn" value="Login" type="submit"> </div>
</div>
<div class="forgetpass"><a href="forgot_password.php">Forgotten your
username or password?</a></div>
</form>
</body>
</html>
The problem is, neither the submit button inside the iframe nor the javascript submit button outside the iframe does anything. I have tested the iframe code on its own and it works fine, so it seems to be some part of the iframe that is causing the issue. However, I don't know why this would be.
Thank you!
The id of the form in the iframe is login but you try to get it with loginform
document.getElementById('loginframe').contentWindow.document.getElementById('login').submit();