I'm a newbee in Javascript.
The error in the following code is that the alert message is displayed as soon as the page loads. Please help me overcome this error. And when I hit the submit button, the alert isn't displayed but rather the next link is opened.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Delete Book</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/default.css" />
</head>
<body id="index_page">
<div id="wrapper">
<div id="header">
<h1 align="left">Library</h1>
</div>
<ul id="navigation">
<li id="index">FAQ</li>
</ul>
<div id="content">
<div id="main_content">
<h2>Delete book</h2>
<h4>Enter details of the book</h4>
<FORM action="del_book_action.php" method="post" >
<TABLE WIDTH="70%" >
<TR>
<TH width="60%">Enter book ID:</TH>
<TD width="50%"><INPUT TYPE="text" name="id" id="book_id"></TD>
</tr>
<TR>
<TH></TH>
<TD width="50%"><INPUT TYPE="submit" Value="Submit" onclick="validate_f()"></TD>
</tr>
</TABLE>
</FORM>
</div>
<p id="footer">#AntonyAjay,2012</p>
</div>
<script language="javascript">
window.onload=function validate_f()
{
var y=document.getElementById("book_id").value;
if(y==""||isNaN(x))
{
alert("Book Id should be numeric");
}
}
</script>
</body>
</html>
You're running the function on page load. Change this:
window.onload=function validate_f()
to:
function validate_f()
See if changing isNaN(x) to isNaN(y) fixes things.
Remove the windows on load the intention of the code is to validate upon submit. What is happening is that the function is being called upon page load
You pass a reference to a function to the window.onload and not the actual call.
<script>
window.onload = function(){
alert('test');
}
</script>
It is because you are calling the function onclick. Make two changes.Don't use the function on load. Use below html change and script
<INPUT TYPE="submit" Value="Submit" onclick="return validate_f()">
function validate_f()
{
var y=document.getElementById("book_id").value;
if(y==""||isNaN(x))
{
alert("Book Id should be numeric");
return false;
}
}
Related
I am trying to reload the current page of this php through Jquery after the user has pressed the button. The function isset($_POST['submitGenZip']) gets called after the button is pressed but the Jquery is not able to run its function of reloading the page. The function isset($_POST['submitGenZip']) is only used to download a file (that is what the php does). It does not redirect to any page.
FirstPage.php
<?php
if(isset($_POST['submitGen']))
{
header('Location:Generate.php');
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zip Files</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
...
...
...
<tr>
<form action="" method="post" role="form">
<td>
<input type="submit" name="submitGen" class="btn btn-primary" value = "GenerateZ" style="float: right;">
</td>
</form>
</tr>
...
...
</body>
</html>
<script>
$(document).ready(function(){
$("#submitGen").click(function(){
alert("ReloadThisPage");
});
});
</script>
You can load your page or any other using multiple methods.
You do not have to use PHP to reload your current page or location. You can just do it jQuery OR JS instead.
Using location.reload()
You can use location.reload(); to reload your page on click event
Read more about location.reload here
Using window.open()
You can also use window.open('Generate.php') this will help if you want to open the URL in the new window.
Using window.location
You can also use window.location = 'Generate.php' this will help if you want to open the URL in the same window.
Run snippet below to see it working.
$(document).ready(function() {
$("#submitGen").click(function() {
alert('Page will reload now')
location.reload();
});
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zip Files</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> ... ... ...
<tr>
<form action="" method="post" role="form">
<td>
<input type="submit" name="submitGen" id="submitGen" class="btn btn-primary" value="GenerateZ" style="float: right;">
</td>
</form>
</tr>
... ...
</body>
</html>
You can use HTML onclick Event Attribute
<input type="submit" onclick="location.reload()" name="submitGen" class="btn btn-primary" value = "GenerateZ" style="float: right;">
The user "AlwaysHelping" has helped me tackle the problem. However I would like to post an alternate solution. That is when the user downloads the file from the server, the request sent is sometimes slower than expected, the Jquery function runs during the same instance and the file is never downloaded. So I have kept a delay of 5 seconds in Jquery before refreshing the page.
<script>
$(document).ready(function() {
$("#submitGen").click(function() {
window.setTimeout(function () {
location.href = "FirstPage.php";
}, 5000);
});
});
</script>
I'm trying to call a java script function on my mouse over function for an image, however; the debugger says "function isn't defined." I don't understand why I'm getting this error. The java script and tags look to be correct and it seems like I'm using the correct syntax to call the function.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Chapter11-1</title>
<script type="text/javascipt">
function overButton(img) {
buttonImg="chapter11-1"+img+"_over.gif"
document.getElementById(img).src=buttonImg
}
function downButton(img) {
buttonImg="chapter11-1"+img+"_down.gif"
document.getElementById(img).src=buttonImg
}
function upButton(img) {
buttonImg="chapter11-1"+img+"_up.gif"
document.getElementById(img).src=buttonImg
}
</script>
</head>
<body>
<div id="banner_logo"><img src="chapter11-1banner.jpg" width="745" height="150" alt="banner" id="banner" /></div>
<table class="centerItems">
<tr>
<td>
<a href="#">
<img src="chapter11-1home_up.gif" id="home" alt="home" onMouseOver="overButton('home')" onMouseDown="downButton('home')" onMouseOut="upButton('home')" onMouseUp="upButton('home')" /></a>
</td>
</body>
</html>
It doesn't work because you spelled "javascript" wrong.
Change this
<script type="text/javascipt">
to
<script type="text/javascript">
or just
<script>
Otherwise it's assumed that the script tag is something other than javascript
And use lowercase for the events, preferably you'd use addEventListener
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Chapter11-1</title>
</head>
<body>
<div id="banner_logo"><img src="chapter11-1banner.jpg" width="745" height="150" alt="banner" id="banner" /></div>
<table class="centerItems">
<tr>
<td>
<a href="#">
<img src="chapter11-1home_up.gif" id="home" alt="home" onMouseOver="overButton('home')" onMouseDown="downButton('home')" onMouseOut="upButton('home')" onMouseUp="upButton('home')" /></a>
</td>
</tr>
</table>
</body>
<script>
function overButton(img) {
buttonImg="chapter11-1"+img+"_over.gif";
document.getElementById(img).src=buttonImg;
}
function downButton(img) {
buttonImg="chapter11-1"+img+"_down.gif";
document.getElementById(img).src=buttonImg;
}
function upButton(img) {
buttonImg="chapter11-1"+img+"_up.gif";
document.getElementById(img).src=buttonImg;
}
</script>
</html>
I am trying to add a span after dynamically generated table, but the span is getting added before the contents of table are getting loaded.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
The span is getting added before hello. I want the span to be displayed after the table contents.
The span is being added at the bottom in the dom. You are seeing it before the table because the table is aligned right.Try the following:
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span><br/>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" >
<tr><td>hello</td></tr>
</table>
<br/>
</div>
</body>
</html>
you write something like this $("#hu").after("<span>span</span>");
this will put span after table
Use jQuery after function like the way #Reoxey did. However, please ensure you're adding your script before the </body> tag instead of using it on the <head> tag. Adding Javascript before the </body> tag is recommended to prevents render blocking while the scripts load and is much better for site perception head. Adding Javascript before the </body> tag will also improve the site loading speed.
Hey Manu try this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
You should use table id i.e #hu to append as place of #th
Hope this helps. :)
Just change:
$("#th").append("<span>span</span>");
to:
$("table").append("<span>span</span>");
JS Fiddle: http://jsfiddle.net/tk4h80yn/
This will help you
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").after("<span>span</span>");
});
});
I'd like to show a progress image loader only when the user clicks on submit on my html form but at the moment the progress image loader is displayed also when the user reloads the page... so I'd like to isolate the event only a clicked button (submit) without having the progress image loader displayed when the user reloads the page. I provide an example in order to show what I looking for in pure javascript.
Any help is appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="pragma" content="no-cache">
<meta name="robots" content="noindex, nofollow">
<title>BackUp</title>
<link rel="stylesheet" type="text/css" href="backup.css">
<script language="javascript" type="text/javascript">
function StartProgress() {
ProgressImage = document.getElementById('progress_image');
document.getElementById("progress").style.display = "block";
setTimeout("ProgressImage.src = ProgressImage.src", 100);
return true;
}
</script>
</head>
<body onUnload="StartProgress()">
<div class="mainbox">
<div class="box1">
<span class="title">BackUp</span>
</div>
<div class="cleardiv"></div>
<div class="box2">
<form onSubmit="return StartProgress()" action="backup.php" method="post">
<input class="backup_button" type="submit" name="submit" value="BackUp">
</form>
</div>
<div class="cleardiv"></div>
<div style="display: none" id="progress"><img id="progress_image" src="css/busy.gif" alt="BackUp in progress..."></div>
<div class="cleardiv"></div>
</div>
</body>
</html>
You can try this:
change your form to be something like this:
<form id='form1' action="backup.php" method="post">
<input type='button' onclick='submitForm()' value="BackUp" />
</form>
submitForm function:
function submitForm() {
StartProgress();
var form1 = document.getElementById('form1');
form1.submit();
//setTimeout(function(){
// form1.submit();
//}, 1000);
}
I managed to create a HTML/CSS editor, at http://hexagonest.tk/code/, but I can't manage it to work Javascript. I'm not sure why, all the code is valid. For example, go on this jfiddle, and type in this code:
<script>
function dothis(){
document.getElementById("thewow").innerHTML = "poop!";
}
</script>
<button type="button" onclick="dothis()">Hi</button>
<p id="thewow">Hi</p>
In theory, it should work, yes? Even when I right click>inspect element, it shows that there is a valid tag. What's wrong with this?
If you didn't catch it, my problem is that Javascript is now working with my live HTML editor.
try this
<button type="button" onclick="document.getElementById('thewow').innerHTML = 'poop!'">try me</button>
Hi
---addtional---
use this script to play with your code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
textarea, iframe {width:200px;height:200px;}
td {vertical-align:top;text-align:center;}
</style>
<script type="text/javascript">
function tryit()
{
var html = document.getElementById("code").value;
ifrm = document.getElementById("output");
var doc = ifrm.contentDocument || ifrm.contentWindow.document;
doc.open();
doc.write(html);
doc.close();
}
</script>
</head>
<body>
<table cellspacing="4" cellpadding="0" border="0">
<tr>
<td>
<textarea id="code"><html><body>Hello World!</body></html></textarea>
<br />
<button onclick="tryit();">Do it!</button>
</td>
<td>
<iframe id="output"></iframe>
</td>
</tr>
</table>
</body>
</html>
source http://w3schools.invisionzone.com/index.php?showtopic=23599
You should use the eval() function from JavaScript.
more documentation here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
Then you should have one form for the JavaScript and another for the html.
Beware about security issues that you can have with eval() (XSS vulnerabilities, etc...).