I am trying ot implement the passing of variables with get between formulars and I basically use the split() method to recover the variable on each page. The problem that I have is that the script is stopped when I implement the splitting.
It wasn't doing so earlier and now that I added the second function to check all the values of all the input names, I get this problem. I am new to javacsript so I don't really know where to look for and on top of this I really need to be able to get the variable's value.
Here are the html of the first form and of the second one, with the url.split("?"); causing firefox and my computer to get lost in the process...
Here the first page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<script type="text/javascript">
<!--
// -->
</script>
</head>
<body>
<div>Choose between<br />
<form name="fo" method="get" action="part1.html">
<input type="radio" name="s1" value="1" />one<br />
<input type="radio" name="s2" value="2" />two<br />
<input type="radio" name="s3" value="3" />three<br />
<input type="submit" value="continuer" />
</form>
</div>
</body>
</html>
here the part1.html page, that contains the buggy script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript">
<!--
function gValue(varname) {
var url = window.location.href;
var qparts = url.split("?");
if (qparts.length == 0) {
return "";
}
var query = qparts[1];
var vars = query.split("&");
var value = "";
for (i=0;i<vars.length;i++) {
var parts = vars[i].split("=");
if (parts[0] == varname) {
value = parts[1];
break;
}
}
return value;
}
function subnewsc() {
for(i=1;i<=3;i++) {
var schck = "s" + i;
var score = gValue(schck);
score = parseInt(score);
i = parseInt(i);
var newscore = score+i;
var doc = "document.fo.s" + i;
doc.value=newscore;
}
}
// -->
</script>
</head>
<body onload="subnewsc();">
<div>choose between<br />
<form name="fo" method="get" action="part2.html">
<input type="radio" name="s1" value="1" />one again<br />
<input type="radio" name="s2" value="2" />two again<br />
<input type="radio" name="s3" value="3" />three again<br />
<input type="submit" value="continuer" />
</form>
</div>
</body>
</html>
You are changing the loop iterator in other loop, causing infinite loop.
Change this line:
for (i=0;i<vars.length;i++) {
To this:
for (var i=0; i<vars.length; i++) {
And you won't get into infinite loop.
Some explanation is required.. in the function subnewsc you have loop, using i as the loop iterator. As you don't have var before, it's becoming global variable. Now inside that loop you call the function gValue where you also have loop, again using i as the loop iterator and without the var it means using the same variable as in the first loop. This of course is causing havoc.
For example, when you read the value of second querystring item, i will have value of 1 after you call var score = gValue(schck); so it will never get more than 3.
By adding the var keyword you'll make the variable have local scope and solve all this mess.
Related
I am working on forwarding data from the current page to the same next page i.e. whenever the page is loaded again, the code checks if there is any such storage, if it is then it loads the values in text box. I am not able to get it to work Below is the code -
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function values()
{
if(localStorage.getItem(pranav))
{
document.getElementById(FName).innerText= sessionStorage.getItem(pranav);
document.getElementById(OName).innerText= sessionStorage.getItem(k);
}
else
{
sessionStorage.setItem("pranav", "P");
sessionStorage.setItem("k", "P");
return;
}
}
</script>
</head>
<body>
<form name="myform" action="Idea.html" onload="values(this.form)">
<label>Please Enter Your Full Name = </label><input type="text" name="FName" id="FName" />
<label>Please Enter Your Current Organization</label><input type="text" name="OName" id="OName" />
<input type="submit" value="Submit" onclick="values(this.form)" />
</form>
</body>
</html>
Kindly help me as to why this is not working?
You haven't declared the pranav and k variables you used. Also when you are assigning a value to an input field you should use the .value property instead of .innerText.
Also you might consider splitting your code in 2 functions:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function loadValues() {
var data = localStorage.getItem('data');
if(data) {
data = JSON.parse(data);
document.getElementById('FName').value = data.firstName;
document.getElementById('OName').value = data.lastName;
}
}
function saveValues() {
var data = {
firstName: document.getElementById('FName').value,
lastName: document.getElementById('OName').value
};
localStorage.setItem('data', JSON.stringify(data));
}
</script>
</head>
<body onload="loadValues()">
<form name="myform" action="Idea.html" onsubmit="saveValues()">
<label>Please Enter Your Full Name = </label>
<input type="text" name="FName" id="FName" />
<label>Please Enter Your Current Organization</label>
<input type="text" name="OName" id="OName" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Hello everybody i am trying to refresh a div in javascript every 1 second i have got one of the variables to refresh but cannot seem to get the second one to refresh.
I am looking to refresh the text with the id of refresh1 either correct or incorrect
many thanks in advance.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Binary Learning Tool!</title>
<meta name="description" content="Change image on click with jQuery">
<meta name="keywords" content="Change image on click with jQuery">
<meta name="author" content="">
<link rel="stylesheet" href="style.css" media="all" type="text/css">
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
</head>
<body>
<script type='text/javascript'>
var total=1;
var answer;
var randnum=(Math.floor(Math.random() * 2 + 1))
document.write(randnum);
</script>
</br></br></br></br>
</br>
<img
id="num1" onclick="swapImage1( 'num1','/img/1.png','/img/0.png');" src="/img/0.png" alt="num1" value="32"
/>
<img
id="num2" onclick="swapImage2( 'num2','/img/1.png','/img/0.png');" src="/img/0.png" alt="num2" value="16"
/>
<img
id="num3" onclick="swapImage3( 'num3','/img/1.png','/img/0.png');" src="/img/0.png" alt="num3" value="8"
/>
<img
id="num4" onclick="swapImage4( 'num4','/img/1.png','/img/0.png');" src="/img/0.png" alt="num4" value="4"
/>
<img
id="num5" onclick="swapImage5( 'num5','/img/1.png','/img/0.png');" src="/img/0.png" alt="num5" value="2"
/>
<img
id="num6" onclick="swapImage6( 'num6','/img/1.png','/img/0.png');" src="/img/1.png" alt="num6" value="1"
/>
</body>
<script type="text/javascript" src="var.js"></script>
</html>
</br></br>
<head>
<script langauge="javascript">
window.setInterval("refreshDiv()", 1);
function refreshDiv(){
document.getElementById("refresh").innerHTML = + total;
}
</script>
<script langauge="javascript">
window.setInterval("refreshDiv()", 1);
function refreshDiv(){
document.getElementById("refresh1").innerHTML;
}
</script>
</head>
<div id="refresh">
<script type="text/javascript">
document.write(total);
</script>
</div></br>
<div id="refresh1">
<script type="text/javascript">
if (total === randnum)
{
answer=("Correct");
document.write(answer);
}
else
{
answer=("Incorrect");
document.write(answer);
}
</script></div></br></br>
<input type="button" value="Restart" onClick="history.go(0)">
So, I don't really get, what you want to do, but I tried to realize what you want to do:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Binary Learning Tool!</title>
<meta charset="utf-8">
<meta name="description" content="Change image on click with jQuery">
<meta name="keywords" content="Change image on click with jQuery">
<meta name="author" content="">
<link rel="stylesheet" href="style.css" media="all" type="text/css">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type="text/javascript">
// Define your Variables
var total = 1;
var answer = '';
var randnum = (Math.floor(Math.random() * 2 + 1));
// This function decides whether 'correct' or 'incorrect' should be displayed
function decide_refresh1(tot,rand) {
if(tot == rand) {
return 'correct';
}
return 'incorrect';
}
// This function is called when you click on one of your images, and just calls the decide_refresh1() function and writes the result to the div refresh1.
function reload_refresh1(triggering_object) {
$('#refresh1').html(decide_refresh1(total,randnum));
}
// Code's executed after Website has finsihed loading
$(document).ready(function () {
// Save your divs to variables, makes easier accessable
var div_randum = $('#div_randum');
var div_refresh = $('#refresh');
var div_refresh1 = $('#refresh1');
// Write randnum to div_randnum and total to refresh
div_randum.html('Randnum: '+randnum);
div_refresh.html('Total: '+total);
// Fill refresh1 with correct or incorrect
div_refresh1.html(decide_refresh1(total,randnum));
});
</script>
</head>
<body>
</br>
</br>
</br>
<div id="div_randum"></div>
</br>
<img id="num1" onclick="reload_refresh1(this);" src="/img/0.png" alt="num1" value="32"/>
<img id="num2" onclick="reload_refresh1(this);" src="/img/0.png" alt="num2" value="16" />
<img id="num3" onclick="reload_refresh1(this);" src="/img/0.png" alt="num3" value="8" />
<img id="num4" onclick="reload_refresh1(this);" src="/img/0.png" alt="num4" value="4" />
<img id="num5" onclick="reload_refresh1(this);" src="/img/0.png" alt="num5" value="2" />
<img id="num6" onclick="reload_refresh1(this);" src="/img/1.png" alt="num6" value="1" />
</br>
</br>
<div id="refresh"></div>
</br>
<div id="refresh1"></div>
</br>
</br>
<input type="button" value="Restart" onClick="history.go(0)">
</body>
</html>
I know it is not exactly what you want, but maybe it's a good start. If you have problems, just ask ;-)
Btw: Your source is hell of a mess.
Btw2: Removed your "swap_image();" function for simplicity
Looks like there is an error in your refreshDiv() calls.
Your code:
s<script langauge="javascript">
window.setInterval("refreshDiv()", 1);
function refreshDiv(){
document.getElementById("refresh").innerHTML = + total;
}
</script>
<script langauge="javascript">
window.setInterval("refreshDiv()", 1);
function refreshDiv(){
document.getElementById("refresh1").innerHTML;
}
I suggest not having 2 functions named refreshDiv(). Also, the second RefreshDiv does not have any code to update! The first refreshDiv() has
document.getElementById("refresh").innerHTML = + total
The second one does not.
HTH!
Can anyone please help me through this....
I have two input fields in my form . One of which is hidden and I want to show it using a button. Now when i tried to show it using onClick() function its not responding...
can anyone give me code snippet to do so....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function show()
{
document.getElementById('passwd').style.display="block" ;
}
</script>
</head>
<body>
<form action="demo.html" >
<input type="text" name="user" />
<br />
<input type="text" id="passwd" name="password" style="display:none;" />
<input type="button" onClick="show()" name="show" value="show" />
<br />
<input type="submit" value="OK" />
</form>
</body>
</html>
plz help
This is because of your <input> declaration:
<input type="button" onClick="show()" name="show" value="show" />
When you call show() JavaScript will attempt to resolve the symbol show first; because you're calling show() from inlined code, the resolution takes place in document, which attempts to resolve the symbol based on the name or id attribute of your input box.
Solutions
Rename the button:
<input type="button" onClick="show()" name="showbutton" value="show" />
Rename the function:
function showPasswordInputBox()
{
// your code here
}
<input type="button" onClick="showPasswordInputBox()" name="show" value="show" />
Don't use in-line code:
function show()
{
// whatever
}
var showButton = document.getElementsByName('show')[0];
showButton.addEventListener('click', show, false);
See also
Don't give event handler the same name as a field!
Javascript Function and Form Name conflict
There is a problem with naming convention of show() function in javascript. Because just change the name to show1(). it'll work
function show1()
{
alert("ok");
}
<input type="button" name="show" value="show" onclick="show1()" />
you can use jquery and write following code: $("#passwd").show()
or you can use addClass('here_css_class') and css code .here_css_class{
display: block
}
try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function show()
{
document.getElementById('passwd').style.display="block" ;
}
</script>
</head>
<body>
<form action="demo.html" >
<input type="text" name="user" />
<br />
<input type="text" id="passwd" name="password" style="display:none;" />
**<button onClick="show()" >Show</button>**
<br />
<input type="submit" value="OK" />
</form>
</body>
</html>
You need to use this:
onClick="javascript:show();"
or simply
onClick="show();"
Basically, just add the semi-colon :)
I have this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The management panel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
<script type="text/javascript">
function markPercentages(){
var checked = $(':checked');
var percentage = Math.round((1 / checked.length) * 100);
checked.siblings('.percentage').html(percentage);
$('input[type=checkbox]').not(checked).siblings('.percentage').html('0');
}
</script>
</head>
<body>
<form>
Building<br /><div><input type="checkbox" onclick='markPercentages()' name="6" value="6"> Susilo 2A-13 (<span class='percentage'>0</span>%)</div><br />
<div><input type="checkbox" onclick='markPercentages()' name="7" value="7"> Susilo 2A-12 (<span class='percentage'>0</span>%)</div>
<br />Category<br /><select name="title"><option value="Wages">Wages</option><option value="Listrik">Listrik</option><option value="Iuran Bulanan">Iuran Bulanan</option></select><br />
On<br /><input type=text name=date id=date /><br />
Notes<br /><input type=text name=note /><br />
Value<br /><input type=text name=cost onChange="addDecimalPoints(this.id)" id=cost /><br />
<input type=submit value="Save" />
</form>
</body>
</html>
It shows a percentage right next to the building (Susilos) of the cost that it's adding. In simplest terms, if one is checked it shows 100%, if two are checked it shows 50% on the first and 50% on the second and so on.
It works fine in Chrome but in Firefox when I check just one, it shows 50% on that, like there are checked two. When I check two it shows 33% on those, like I checked three of them. Why this happen and how I should fix this?
Anyway , deleting a part of the code that's beyond that code makes that works also:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The management panel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
<script type="text/javascript">
function markPercentages(){
var checked = $(':checked');
var percentage = Math.round((1 / checked.length) * 100);
checked.siblings('.percentage').html(percentage);
$('input[type=checkbox]').not(checked).siblings('.percentage').html('0');
}
</script>
</head>
<body>
<form>
Building<br /><div><input type="checkbox" onclick='markPercentages()' name="6" value="6"> Susilo 2A-13 (<span class='percentage'>0</span>%)</div><br />
<div><input type="checkbox" onclick='markPercentages()' name="7" value="7"> Susilo 2A-12 (<span class='percentage'>0</span>%)</div>
</form>
</body>
</html>
Thanks
http://jsfiddle.net/sjRAu/ - working all browsers
HTML:
<div>
<input type='checkbox' />Susilo 2A-13 (<span class='percentage'>0</span>%)
</div>
<div>
<input type='checkbox' />Susilo 2A-14 (<span class='percentage'>0</span>%)
</div>
<div>
<input type='checkbox' />Susilo 2A-15 (<span class='percentage'>0</span>%)
</div>
JS:
$(document).ready(function() {
$('input').click(function(){
markPercentages();
});
function markPercentages(){
var checked = $(':checked');
var percentage = Math.round((1 / checked.length) * 100);
checked.siblings('.percentage').html(percentage);
$('input[type=checkbox]').not(checked).siblings('.percentage').html('0');
}
});
If you have more inputs on the page just give your checkboxes a class like 'markbox' and change 'input' to '.markbox' in your JS
what about use like this one
$(function(){
$('input[type=checkbox').click(function(){
var checked = $('input[type=checkbox]').attr('checked');
var percentage = Math.round((1 / checked.length) * 100);
checked.siblings('.percentage').html(percentage);
$('input[type=checkbox]').not(checked).siblings('.percentage').html('0');
});
});
Try this code. I basically rewrote all of your logic:
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$(':checkbox').change(function() {
var num_checked = $(':checkbox:checked').length;
if (num_checked == 0) {
$(':checkbox').each(function() {
$(this).siblings('.percentage:eq(0)').text('0');
});
return;
}
var percentage = Math.round(100 / num_checked);
$(':checkbox').each(function() {
if ($(this).is(':checked')) {
$(this).siblings('.percentage:eq(0)').text(percentage);
} else {
$(this).siblings('.percentage:eq(0)').text('0');
}
});
});
});
</script>
</head>
<body>
<div>
<input type='checkbox'/>Susilo 2A-13 (<span class='percentage'>0</span>%)
</div>
<div>
<input type='checkbox' />Susilo 2A-14 (<span class='percentage'>0</span>%)
</div>
<div>
<input type='checkbox' />Susilo 2A-15 (<span class='percentage'>0</span>%)
</div>
</body>
</html>
Demo: http://jsfiddle.net/NKuHS/3/
In the following code , I have a javascript function and I am tring to change the backgroundColor of the page to a color passed in as a parameter. But my code doesn't work, can anybody help me what is wrong in my code?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Changing Color</title>
<head>
<style type="text/css">
body {
background-color:#ffcccc;
}
</style>
</head>
<body>
<form>
<label>color: <input type="text" name="color"> </label>
<input name="color" type = "button" onClick = "changecolor(color.value) " value = "color">
</form>
</body>
</html>
Javascript:
function changecolor(colour)
{
document.bgcolor=colour;
}
Assuming colour contains a valid CSS color descriptor, you can write:
document.body.style.backgroundColor = colour;
you have to put the function in a script block.
...
</form>
<script type="text/javascript>
//function declaration
</script>
Try this code it works finely man .i have just tried it.you can use it where-ever you want.also appended the code for onmouse click and onmouseover.
<html>
<head>
<script language="javaScript">
function change_background(color){
document.bgColor = color;
}
</script>
</head>
<body>
<form>
<label>color: <input type="text" name="color" >
</label>
<input name="clrs" type ="button" value="getcolor" onClick = "change_background(color.value) " >
</form>
ClickBlue
Mouseoverblack
Mouseover white
</body>
</html>`