Window.open() could not open new webpage?
Is it because of my JavaScript, or there is there a problem anywhere else in my code?
function getage() {
var age = document.getElementById("customerage").value;
if (age > 21) {
window.open = "beer.com";
} else if (age > 0) {
window.open = "http://lol.disney.com/games/tsum-tsum-tower";
} else
alert("Please input correct age!");
}
<html>
<head>
<title>I drink alcohol.com</title>
<meta charset="utf-8">
<meta name="Sumei" content="Alcohol Web">
</head>
<body>
<h1>Welcom to "I drink alcohol.com"</h1>
<h3>Here is couple of questions for you:</h3>
<p>How old are you?</p>
<form method="post">
<input type="number" name="customerage" id="customerage" />
<input type="submit" onclick="getage()" value="OK">
</form>
<script>
/* getage function*/
</script>
</body>
</html>
just use window.open
var option= "location=yes,height=570,width=520,scrollbars=yes,status=yes";
var link = URL + location.href;
var win = window.open(link, "_blank", option);
If i understand correctly you want to go to pages based on iteration result
well try this piece of code, also you are not using window.open() correctly that should be used like window.open(URL, "_blank", option); if you want it to open in new tab
else go for code below
if(age>21)
{
window.location="beer.com";
}
else if(age>0)
{window.location="http://lol.disney.com/games/tsum-tsum-tower";}
else
alert("Please input correct age!");
}
well also what i think you should add something in your elseif like
else if(age>0 && age <21)
use window.open() to open in new tab, and use window.location.href to open link in same tab
<html>
<head>
<title>I drink alcohol.com</title>
<meta charset="utf-8">
<meta name="Sumei" content="Alcohol Web">
</head>`
<body>
<h1>Welcom to "I drink alcohol.com"</h1>
<h3>Here is couple of questions for you:</h3>
<p>How old are you?</p>
<form method="post">
<input type="number" name="customerage" id="customerage"/>
<input type="submit" onclick="getage()" value="OK">
</form>
<script>
function getage() {
var age = document.getElementById("customerage").value;
if(age>21)
{window.open("beer.com");}
else if(age>0)
{window.open("https://www.google.com");}
else
alert("Please input correct age!");
}
</script>
</body>
</html>
Related
I am working on online exam portal when the user gives the exam I want to when the user tries to page reload or go back page, auto-submit the form with giving a warning message.
<script type="text/javascript">
window.onload = function() {
$('#form_id').submit();
return true;
// if I use alert here alert work but form not submitting
};
</script>
You can use onbeforeunload and event.currentTarget.performance.navigation.type
<body onbeforeunload ='checkRequest(e)'>
//rest of code
</body>
function checkRequest(event){
let __type= event.currentTarget.performance.navigation.type;
if(__type === 1){
// alert("Browser refresh button is clicked...");
}
else if(__type ==2){
//Browser back button is clicked
}
}
You can also visit this link
Help taken from answer of #brk.
Reference Link: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload
Words related to stopping page reload:
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Syntax
<?php
echo '<br>GET PARAMETERS=<pre>'. print_r($_GET, true) .'</pre><br>';
?>
<html>
<head>
<title>Untitled Document</title>
</head>
<body onbeforeunload ='checkRequest(event)'>
ABC
<form name="frm1" id="frm1" action="">
<input type="text" name="text1" id="text1" value="<?php echo ( isset($_GET['text1']) ? $_GET['text1'] : '' ) ?>">
</form>
<script type="text/javascript">
function checkRequest(event){
event.preventDefault();
event.returnValue = '';
var __type= event.currentTarget.performance.navigation.type;
if(__type === 1 || __type === 0){
// alert("Browser refresh button is clicked...");
document.getElementById('frm1').submit();
}
else if(__type ==2){
alert("Browser back button is clicked...");
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>WhiteList</title>
</head>
<body>
<h1>Hello stranger lets see if you are on the list!!</h1>
<input id="1" value="type here" placeholder="type here">
<button onclick="click()">Check</button>
<br>
<p id=stuff></p>
<script type="text/javascript">
function click(){
var name = document.getElementById('1').value;
if (name == "tijmen"){
document.getElementById("stuff").innerHTML = "<p>hey you are on the list welcome</p>"
} else{
document.getElementById("stuff").innerHTML = "<p>sorry you are not on the list</p>"
}
}
</script>
</body>
</html>
so this is the code, there are no errors. but the problem is that the text won't print when i insert my name and click the button.... i realy cant seem to find the problem.
Try add onclick to the JavaScript:
<body>
<h1>Hello stranger lets see if you are on the list!!</h1>
<input id="1" value="type here" placeholder="type here">
<button id="btn">Check</button>
<br>
<p id=stuff></p>
<script type="text/javascript">
document.getElementById("btn").onclick = function() {
var name = document.getElementById('1').value;
if (name === "tijmen"){
document.getElementById("stuff").innerHTML = "<p>hey you are on the list welcome</p>"
} else {
document.getElementById("stuff").innerHTML = "<p>sorry you are not on the list</p>"
}
}
</script>
</body>
Problem here is click is defined as a click action so the engine is thinking you are calling the click of the button. Simple test shows what the browser sees.
<button onclick="console.log(click)">Check</button>
What can you do? Change the name, or even better, use addEventListener to bind the event listener.
I have a code and I want that after the user type something in the textfield and press enter, what he typed appears on the screen. But I'm not being able to do that, I'd like some help here.
<!DOCTYPE html>
<html>
<head>
<title>Tasks for the day</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
alert("When you have finished your task you only have to click on it.");
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
$(document).keypress(function(e) {
if(e.which == 13) {
}
});
function showMsg(){
var userInput = document.getElementById('userInput').value;
document.getElementById('userMsg').innerHTML = userInput;
}
</script>
</head>
<body>
<h1>Tasks to do</h1>
<p>Type what you need to do:</p>
<input type="input" id="userInput" onkeyup=showMsg() value="" />
<p id="userMsg"></p>
</body>
</html>
it only adds one value to the screen, to put more than one, do I need
to create an array
You had the main components working. Namely, you were updating the screen. To have it update only on enter, simply put the code in the keypress handler
To append the value to the screen(in the case of more than one enter), concatenate the current innerHTML with the value
$(document).ready(function() {
$("p").click(function() {
$(this).hide();
});
});
$('#userInput').keypress(function(e) {
if (e.which == 13) {
var userInput = document.getElementById('userInput').value;
var innerHTML = document.getElementById('userMsg').innerHTML;
innerHTML = innerHTML || '';
document.getElementById('userMsg').innerHTML += innerHTML + userInput;
}
});
<title>Tasks for the day</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<h1>Tasks to do</h1>
<p>Type what you need to do:</p>
<input type="input" id="userInput" onkeyup=showMsg() value="" />
<p id="userMsg"></p>
Beginer to javasctipt. I am trying to write a simple calculation that will display some text if the time since oil change is past 6 months, the amount of oil left in the car is less then it started and finally display if everything is ok.
Thanks for the help
JavaScript
function oil(){
var start = document.oil.start.value;
var lastOilChange = document.oil.time.value;
var totalOil = document.oil.amount.value;
var aa = "you need to change the oil";
if( lastOilChange > 6 || start < totalOil){
document.oil.result.write(aa);
}else{
document.oil.result.write("Everything Is all good");
}
}
HTML
<form name="oil">
Starting amount of oil
<input type="text" name="start">
Time since oil change
<input type="text" name="time">
Total amount of oil in car now(quarts)
<input type="text" name="amount">
<input type="submit" onclick = oil()>
<input name=result readonly>
</form>
There are a couple of problems with your code
Missing Form close tag
Your controls don't have IDs
missing quotes on the result input
Don't need to use a submit input when you're not submitting to a form. Try button
Not sure what document.oil.result.write(aa); will do. I think the correct process is to get the input using document.getElementById and then set the value of the control
I will try to answer your question with the least number of line changes. This is not the optimal answer. Comments have been added to help you understand required changes. Your HTML and JavaScript are invalid, so it was a surprise to me how they both ran on Chrome.
<!doctype>
<html>
<head>
<title>Personal</title>
<meta charset="utf-8">
<script type="text/javascript">
function _oil(){ // oil() conflicts with your form's name
var start = document.oil.start.value;
var lastOilChange = document.oil.time.value;
var totalOil = document.oil.amount.value;
var aa = "you need to change the oil";
if( lastOilChange > 6 || start < totalOil){
document.write(aa); // you can't .write() to an element
}else{
document.write("Everything Is all good");
}
window.event.preventDefault(); // so your window does not load the same page when you submit
return false;
}
</script>
<style>
form input {
display: block;
}
</style>
</head>
<body>
<form name="oil">
Starting amount of oil
<input type="text" name="start">
Time since oil change
<input type="text" name="time">
Total amount of oil in car now(quarts)
<input type="text" name="amount">
<input type="submit" onclick ="_oil()"> <!-- you must enclose the onclick attribute, even if both work -->
<input name=result readonly>
</body>
</html>
May be like this:
<!doctype>
<html>
<head>
<title>Personal</title>
<meta charset="utf-8">
<script type="text/javascript">
function oil(){
var start = document.getElementsByName("start")[0].value;
var lastOilChange = document.getElementsByName("time")[0].value;
var totalOil = document.getElementsByName("amount")[0].value;
var aa = "you need to change the oil";
if( lastOilChange > 6 || start < totalOil){
document.getElementsByName("result")[0].value = aa;
}else{
document.getElementsByName("result")[0].value = "Everything Is all good";
}
}
</script>
<style>
form input {
display: block;
}
</style>
</head>
<body>
<form name="thisform">
Starting amount of oil
<input type="text" name="start">
Time since oil change
<input type="text" name="time">
Total amount of oil in car now(quarts)
<input type="text" name="amount">
<input type="button" value="go" onclick = oil()>
<input name=result readonly>
</form>
</body>
</html>
！！！ The form name can not use oil
What you want is to set the value of the form field rather than trying to use write:
if( lastOilChange > 6 || start < totalOil){
document.oil.result.value = aa;
} else {
document.oil.result.value = "Everything Is all good";
}
As pointed out in other answers, though, you also need to prevent the form from trying to submit information to the server and reload the page. There are several ways of doing this (see e.g. JavaScript code to stop form submission). One is to replace the submit button with an ordinary button (<input type="button" value="Calculate" />).
Another is to attach your function to the form as an event handler, and return false at the end of it.
document.oil.onsubmit = function () {
...
return false;
}
(JSFiddle)
How do I direct the browser to another URL based on user input for example:
abc.com/apple.html
abc.com/banana.html
abc.com/pear.html
BUT, if the user doesn't enter apple,banana or pear then they are directed to:
abc.com/wrong.html
Any help would be awesome! I only know HTML forms.
<form id='formName' name='formName' onsubmit='redirect();return false;'>
<input type='text' id='userInput' name='userInput' value=''>
<input type='submit' name='submit' value='Submit'>
</form>
<script type='text/javascript'>
function redirect() {
var input = document.getElementById('userInput').value;
switch(input) {
case 'apple':
window.location.replace('apple.html');
break;
case 'banana':
window.location.replace('banana.html');
break;
default:
window.location.replace('default.html');
break;
}
}
</script>
You may use Javascript/JQuery to do it like this:
HTML:
<form name="form_input" action="post_values.php" method="post">
<input type="text" name="fruit" id="fruit" />
<input type="submit" value="Submit" />
</form>
JS/JQuery:
<script>
$("form").submit(function() {
var fruit = $("#fruit").val();
if(fruit=='apple' || fruit=='pear' || fruit=='banana'){
window.location = "http://www.abc.com/"+fruit+".html";
}else{
window.location = "http://www.abc.com/wrong.html";
}
return true;
});
</script>
In the HTML file of "abc.com", which is mostly index.html, between your <HEAD> tags do this:
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.abc.com/wrong.html">
Adjust content= to how many seconds you want your browser to wait before redirecting.
Update:
The http method is not recommended by W3C because of this:
If a page redirects too quickly (less than 2-3 seconds), using the "Back" button on the next page may cause some browsers to move back to the redirecting page, whereupon the redirect will occur again. This is bad for usability, as this may cause a reader to be "stuck" on the last website.
Hence the recommended method via JS:
<head>
<script>
function replaceDoc()
{
window.location.replace("http://www.abc.com/wrong.html")
}
</script>
</head>
I found the above method here:
W3Schools Window.Replace()
<script language="JavaScript">
var page = new Array("apple","banana","pear"); // list of your pages
function redirect(){
if(page.indexOf(document.forms["NameOfForm"]["NameOfInput"].value)!=-1){
window.location = document.forms["NameOfForm"]["NameOfInput"].value + ".html";
}
else {
window.location = "wrong.html";
}
return false;
}
</script>
<form name="NameOfForm" onsubmit="return redirect()">
<input name="NameOfInput" />
<input type="submit" />
</form>
put that code into abc.com/ and you just have to add, change the list of page ;)