How to use window.open inside the window.load function event - javascript

Should I use window.open() inside window.onload function in Javascript? If not how to use that in window.onload="url". Please show me some example. Here below is what am trying to do. The text validation is working fine. Once I enter run string its not going to open the `evovle.jsp (concern url)
e.g.:
<html>
<head>
<script type="text/javascript">
function validatetxtbox()
{ var txtfield;
txtfield =document.getElementById('txtbox').value;
if(txtfield == "run")
{ alert("you entered string right");
window.onload=function(){window.open('evolve.jsp''welcome' 'width=500,height=500,menubar=yes,status=yes,location=yes,toolbar=yes,scrollbars=yes');}
}
else { alert("Try again"); }
}
</script>
</head>
<body>
<input type="text" id="txtbox" maxlength="3">
<input type="button" id="btn" value="Send" onclick="validatetxtbox()">
</body>
</html>

<html>
<head>
<script ="text/javascript">
function check() {
var txtfield; txtfield =document.getElementById('txtbox').value;
if(txtfield == "run")
{ alert("you entered string right");
var newwin=window.open('evolve.jsp','welcome','width=500,height=500,menubar=yes,status=yes,location=yes,toolbar=yes');
newwin.focus();
}
else { alert("Try again"); }
}
</script>
</head>
<body>
Enter a Keayword
<input type="text" id="txtbox" onblur="check()" />
</body>
</html>

Use querystring and check in evolve.jsp
Ex evolve.jsp#alertme

Related

Doubts with html and javascript

I'm trying to make some code that sends a form that first makes sure if it is filled correctly. When I click on the "enviar formulario" button, it doesn't call the javascript code and does not do anything.
<html>
<head>
<script type="text/javascript">
function test() {
if(document.getElementById("nombre").value.length() < 2){
alert("Error");
return 1;
}
else if(!document.getElementById("edad").value.isInteger()){
alert("Error");
return 1;
}
else if(!document.getElementById("email").value.includes("#")){
alert("Error");
return 1;
}
else{
document.getElementById("formulario").submit();
}
}
</script>
</head>
<body>
<form id="formulario"action = "https://postman-echo.com/get"
method = GET type=text>
Nombre: <input id="nombre" type="text"/>
<br><br>
Edad: <input id="edad" type="text"/>
<br><br>
E-mail: <input id="email" type="text"/>
</form>
<button onclick= "test()">Enviar formulario</button>
</body>
</html>
There is nothing like document.getElementById("nombre").length()
If you are trying to read the length of input text do this
document.getElementById("nombre").value.length
EDIT 1:
There is no method as isInteger(). So use parseInt() instead
This will be your working code
<html>
<head>
<script type="text/javascript">
function test() {
if(document.getElementById("nombre").value.length < 2){
alert("Error");
return 1;
}
else if(!parseInt(document.getElementById("edad").value)){
alert("Error");
return 1;
}
else if(!document.getElementById("email").value.includes("#")){
alert("Error");
return 1;
}
else{
document.getElementById("formulario").submit();
}
}
</script>
</head>
<body>
<form id="formulario"action = "https://postman-echo.com/get"
method = GET type=text>
Nombre: <input id="nombre" type="text"/>
<br><br>
Edad: <input id="edad" type="text"/>
<br><br>
E-mail: <input id="email" type="text"/>
</form>
<button onclick= "test()">Enviar formulario</button>
</body>
</html>
You're comparing the length of the whole input tag rather than the text in it.
if (document.getElementById("nombre").value.length < 2)
{
...
}
if (!document.getElementById("edad").value.isInteger())
{
...
}
and so on...
First, please check if your control is reaching the test method, use a debugger (I prefer chrome)
After that check your syntax in the console, while the code is at the breakpoint
You can share your findings here

JavaScript won't output value in function

Hi I am very new to Javascript. In the code below, when I test I don't see any output. Can anybody tell me what is wrong?
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
}
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
{
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
This should work! The problem was the orientatiom of { after the else.
A few things:
<id="score"> <input type="number" name= "score"> is probably not what you mean. Maybe you mean <input type="number" name="score" id="score">.
document.write is a no-no, please don't ever use it. It allows you to modify the document "here and now", i.e. while it's loading. Use document.body.innerHTML += x, for example.
var score = document.getElementByID('score').value
The bracket after the else clause
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>enter code here
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
{
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
</html>
Change input type from submit to button else you wont be able to see the output, because the form will submit and reload the page.
Fix the syntax errors
<id="score">
Change } to { under else condition
Change document.write to alert or console.log
Try this:
<script>
function myFunction()
{
var x;
var score=document.getElementById("in_score").value;
if(score>30)
x="Expert";
else
x="Novice";
document.getElementById("score").value = x;
}
</script>
<body>
<form name="myscore">
Score: <input id="score" type="number" name= "score">
<input type="submit" id="in_score" onClick="myFunction()" value="submit">
</form>
</body>
</html>
So the main error in your code was the reverse bracket from the else statement. Also, to get/change values from an input, you need to use getElementById ( to select the element ), and .value statement, to change/get it.

More Simple Password System Stuff

Sorry guys, first time playing around with this. Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<title>SuM BUTtonsS DOe</title>
<link rel="stylesheet" href="buttons.css"/>
</head>
<body>
<p>Please enter the password</p>
<form id="enter" onSubmit="javascript:passCheck()">
<input id="password" type="password" placeholder="Password">
</form>
<p id="incorrect"><em>INCORRECT PASSWORD</em></p>
<script type="text/javascript">
function passCheck() {
var input = document.getElementById('password').value;
if (input == 'herro') {
window.alert("IT WORKS!!");
}
else {
var incorrect = document.getElementById('incorrect');
incorrect.style.display = "block";
}
}
</script>
</body>
</html>
When I enter the wrong password, INCORRECT PASSWORD comes up, but only for a fraction of a second. Then it's gone again. No idea why.
UPDATE:
<!DOCTYPE html>
<html>
<head>
<title>SuM BUTtonsS DOe</title>
<link rel="stylesheet" href="buttons.css"/>
</head>
<body>
<p>Please enter the password</p>
<form id="enter" onSubmit="javascript:passCheck()">
<input id="password" type="password" placeholder="Password">
</form>
<p id="incorrect"><em>INCORRECT PASSWORD</em></p>
<script type="text/javascript">
function passCheck() {
var input = document.getElementById('password').value;
if (input == 'herro') {
window.alert("IT WORKS!!");
}
else {
var incorrect = document.getElementById('incorrect');
incorrect.style.display = "block";
return false;
}
}
</script>
</body>
</html>
On submit, the form will trigger the default action, which in this case is to submit the contents to the same page (for lack of an action property).
So what you're seeing is the JavaScript runs and changes the style to show the error message, then the page reloads.
To ensure the page doesn't reload put return false at the end of passCheck. Better would be to use addEventListener and event.preventDefault(), but that's a little bit more involved.
<p>Please enter the password</p>
<form id="enter" onSubmit="passCheck(); return false;">
<input id="password" type="password" placeholder="Password">
<input type="submit" value="Submit"/>
</form>
<p id="incorrect" style="display: none"><em>INCORRECT PASSWORD</em></p>
<script type="text/javascript">
function passCheck() {
var input = document.getElementById('password').value;
if (input == 'herro') {
window.alert("IT WORKS!!");
}
else {
var incorrect = document.getElementById('incorrect');
incorrect.style.display = "block";
}
}
</script>

Why doesn't document.write output anything to the page?

The document.write("*stuff here") won't work at all for some reason. I've tried everything! capitalization, variables, nothing!
<!doctype html>
<body>
<center>
<script type="javascript">
var A = Math.floor(Math.random()*11);
var B = Math.floor(Math.random()*11);
var C = A+B;
var Input = document.getElementById('Input');
document.write("stupid javascript");
function answer() {
if(Input == C) {
document.write('correct!!');
}
else {
document.write("Incorrect!");
}
}
document.write("A + B")
</script>
<form Id="Input">
<input type="text">
</form>
<form onsubmit="javascript:Answer">
<input type="submit" value="submit">
</form>
</body>
</html>
Your script type isn't correct.
<script type="javascript"> is wrong...
<script type="text/javascript"> is correct...
What was wrong is
<script type="javascript">
It must be
<script type="text/javascript">
. To execute scripts immediately, you can add the following code after input:
<script>document.write('Javascript is not stupid')</script>
You need to change 'Answer' to 'answer' in the following line:
<form onsubmit="javascript:Answer">

Decimal in javascript

The text box should accept onli decimal values in javascript. Not any other special characters. It should not accept "." more than once. For ex. it should not accept 6.....12
Can anybody help???
You can use regex:
function IsDecimal(str)
{
mystring = str;
if (mystring.match(/^\d+\.\d{2}$/ ) ) {
alert("match");
}
else
{
alert("not a match");
}
}
http://www.eggheadcafe.com/community/aspnet/3/81089/numaric-validation.aspx
You can use Regex.test method:
if (/\d+(\.\d{1,2})/.test(myTextboxValue)) //OK...
JQuery Mask plug in is the way to go!
http://www.meiocodigo.com/projects/meiomask/#mm_demos
If you mean you do not want anything but an integer or a decimal to be typed into the field, you'll need to look at the value
as each key is pressed. To catch pasted input, check it again onchange.
textbox.onkeyup=textbox.onchange=function(e){
e= window.event? event.srcElement: e.target;
var v= e.value;
while(v && parseFloat(v)!= v) v= v.slice(0, -1);
e.value= v;
}
probably you want to validate a form input before sending it to the server. Here is some example:
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
function validate(){
var field = document.getElementById("number");
if(field.value.match(/^\d+(\.\d*)?$/)){
return true;
} else {
alert("Not a number! : "+field.value);
return false;
}
}
</script>
</head>
<body>
<form action="#" method="post" onsubmit="return validate();">
<input type="text" id="number" width="15" /><br />
<input type="submit" value="send" />
</form>
</body>
</html>
I just whipped this up. Useful?
<html>
<head>
<script type="text/javascript">
function validNum(theField) {
val = theField.value;
var flt = parseFloat(val);
document.getElementById(theField.name+'Error').innerHTML=(val == "" || Number(val)==flt)?"":val + ' is not a valid (decimal) number';
}
window.onload=function(){
validNum(document.getElementById('num'));
}
</script>
</head>
<body>
<form>
<input type="text" name="num" id="num"
onkeyup="return validNum(this)" /> <span id="numError"></span>
</form>
</body>
</html>

Categories