|
JavaScript - Reload Html But Keep Javascript Var Values
Hi all!
I am trying to write code that does the following: 1) creates an array with 6 objects in it. 2) each object has a respective image. 3) from the 6, one object is selected as the "target" 4) all the 6 images are displayed on the screen with a hint as to which of the 6 is the target this time. 5) the user selects one of the 6 he/she thinks is the right object. 6) if the selection is right, his/her score increases by 1, and the whole process loops. The issue is I want the whole process to loop, but I want to store the users score somewhere otherwise it will get reset to 0 everytime the process loops.I've been told I could use cookies for this, but I've been reading a lot that cookies are outdated. Is there an easy way to do this without cookies? The required code is below: Code: <head>
<script language="text/javascript">
var redScore = 0;
....
targets = new Array(); // creating a new array with all the possible elements
....
fisherYates(targets); //randomizing the array
...
var theTarget = targets[0]; // selecting the element at index 0 to be the target
...
...
lots of code that is not relevant
...
...
function redClick( buttonLocation ) {
if(buttonLocation == redLocation){
redScore = redScore +1;
I need something here that will save the score and reload the page
}
}
...
...
</script>
</head>
<body>
<table>
<tr>
<td><img id="red0" onclick="redClick(0)" /></td>
<td><img id="red1" onclick="redClick(1)" /></td>
<td><img id="red2" onclick="redClick(2)" /></td>
...
...
...
</tr>
</table>
</body>
I know this is quite complicated, so any help or direction would be much appreciated. Thank you! Similar TutorialsHi, I've a Javascript function where i'm sending an return value. How do i capture this return value from HTML. My javascript func is as below: Code:
function check()
{
var frm=document.forms.stream_selection
sel_num = new Array();
Parr = new Array();
for(j=1;j<1000;j++)
{
if(frm[j] != null)
{
if(!frm[j].checked)
{
frm[0].checked=false
}
else
{
Parr.push(j);
ParrStr=Parr.join(',');
alert(Parr);
}
}
}
return(ParrStr);
}
My HTML call function is as below: Code: echo "<td><center><input name=\"sstreamname\" type=\"checkbox\" onclick=\"check():return true;\"></center></td></tr></font></center></tr></font></center>"; How do i get the value of ParrStr and transfer this to next form. I'm using PHP . Thanks, Ramki. so i have a navigation bar and instead of clicking on it to another page on the site where everything reloads again i want it to just reload the content area, so i have 5 tables of content each representing a different page and i just want it this way so i can implement something else that doesnt have anything to do with this Code: <script type="text/javascript">
var page = 1;
function setPage1()
{
page = 1;
}
function setPage2()
{
page = 2;
}
function setPage3()
{
page = 3;
}
function setPage4()
{
page = 4;
}
function setPage5()
{
page = 5;
}
function setBlank1(x)
{
if (page==1)
{
x.class="content";
}
else
{
x.class="blank";
}
}
function setBlank2(x)
{
if (page==2)
{
x.class="content";
}
else
{
x.class="blank";
}
}
function setBlank3(x)
{
if (page==3)
{
x.class="content";
}
else
{
x.class="blank";
}
}
function setBlank4(x)
{
if (page==4)
{
x.class="content";
}
else
{
x.class="blank";
}
}
function setBlank5(x)
{
if (page==5)
{
x.class="content";
}
else
{
x.class="blank";
}
}
this is my javascript so whats supposed to happen is when someone clicks a link on the nav bar it sets the page to that value so only that value is showing. i put the functions setPage1-5 in class="setPage1(this)" according to what content area they go too Code: table.blank {
display: none;
that is my blank class attribute so its not there but its loaded please ask me any questions and sugest anything im not a javascript expert or anything of that sort but ive been looking this over for a couple days now and i cant find anything online either Hey everyone, I currently have a grid of thumnails which when clicked will load an image at the top of the page without reloading the page using the following JS: Code: <a href="JavaScript:;" onClick="JavaScript:document.all.Main.src='images/image01.png';"><img src='images/image01thumb.png'></a> This works wonderfully, However, what I need to do now is to produce the same thing but instead of loading an image, load an html file into the page without reloading. Is there a way I could use a similarly simple solution? Thanks There are two pages, folder/india.html folder/usa.html and dropdown menu in each page to switch between india and usa pages. india.html page sells in INR and usa.html in USD with links to shopping carts for each currency. link1(INR) link2(USD) Except the link and the currency information(selling price), contents in both the pages are same. So here comes the problem. Google hates duplicate pages! I am looking for a solution where, a single page In That Page, a dropdown menu to select currency As the currency is selected, without page reload, the link to shopping cart and the pricing also should be changed according to the selected currency. So Single page should be able to handle both the currencies. Kindly suggest me with codes as I am new to javascript. Thanks a lot Trying to use js to reload an iframe so that it can do a query again and show a live update to the given number. I'm doing: <code> <iframe id="ifrm" name="ifrm" onload="ifrm.window.location.reload();" src="url" width="400px" height="100px" scrolling="no" frameborder="0"> Sorry, your browser doesn't support iframes. </iframe> </code> Any ideas? i am making a mock website where the user make their own computer by selecting items from drop down menus. then a value of the item comes up below. this works but i am having trouble adding the numbers up for the total cost. here is my code <html><head><title>build</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css"> </style></head> <body> <script type="text/javascript"> var motherboard = new Array( '74', '50', '73', '106', '269', '64', '55', '135', '47', '79', '118', '163'); var cpu = new Array( '88', '104', '168', '352'); function changeMotherboard(Mid) { var ind = document.getElementById(Mid).selectedIndex; document.getElementById("motherboardDisplay").innerHTML=motherboard[ind]; } function changeCpu(Cid) { var ind = document.getElementById(Cid).selectedIndex; document.getElementById("cpuDisplay").innerHTML=cpu[ind]; } </script> </head><body> <form> Motherboard <select id="motherboard" onChange="changeMotherboard('motherboard');"> <option value="0">Asus P5G41C-M-LX G41 DDR2+DDR3</option> <option value="1">MSI G41M-P33 </option> <option value="2">Asus P5P41T-LE </option> <option>G-B H55M-S2H</option> <option>Asus P7P55D-E-Deluxe</option> <option>Asus M2N68-AM Plus </option> <option>ASRock N68S3-UCC </option> <option>Asus M4A88TD-M-EVO-USB3</option> </select><br> </form> <div id="motherboardDisplay">Select from the list to see price</div> <form> CPU <select name="cpu" id="cpu" onChange="changeCpu('cpu');"> <option value="0">E6500</option> <option value="1">Core G6950</option> <option value="2">i3-550</option> <option>Core i7-930</option> </select> <br> </form> <div id="cpuDisplay" type = text>Select from the list to see price</div> <p> </p> <p> </body> </html> favorite I'd like to modify a form on www.formsite.com (form builder app): username: testuser password: password I would like to use the nicedit.com's inline content editor's js to transform my textarea's into a richtext area. At present the nicedit editor works well in creating the richtextarea. However, the KEY point is that I would like formsite's form to pipe in the the created html and render it with the html component of formsite. Currently, the pipe function in formsite will only put out the html syntax in it's html module. action seen he http://fs8.formsite.com/testform/form1/index.html So this would be: 1. checking out my form on formsite.com 2. the script from nicedit.com is already installed in an html component. 3. changing or telling me the scripts/tags/or whatever for formsite form using formsites form builder (which allows some html/script editing). 4. changed so as to render the rich text entered on page 1 in page 2 instead of the html syntax. Any other solutions using formsite and any other richtextarea solutions would be great too! Hello I'm trying to compare two values and return with an answer, 2 if Value 1 is greater than Value 2, 0 if Value 2 is greater than value 1 and 1 if the two values are equal. I have a script which does this when the Compare Button is selected, however I would like to remove the button so the answer is generated when the Values ae entered The script is [CODE] <html> <head> <script type="text/javascript"> <!-- function resultH1() { var str1 = document.getElementById("TotalH1").value; var str2 = document.getElementById("TotalA1").value; if(str1 != str2) { if(str1 < str2) { document.getElementById("ans").value= "2"; } else { document.getElementById("ans").value= "0"; } } else { document.getElementById("ans").value= "1"; } } // --> </script> </head> <body> <form name = "clock" action = ""> <table border = "1"> <caption>Compare</caption> <tr><td>Value 1</td> <td><input name = "TotalH1" type = "text" /> </td></tr> <tr><td>Value 2</td> <td><input name = "TotalA1" type = "text" /> </td></tr> <tr><td>Answer</td> <td><input type=text name="ans" size="3" readonly="readonly" style="background:silver"> </td></tr> <tr><td><input type = "button" value = "Compare" onclick = "resultH1()" /></td></tr> </table> </form> </body> </html> [ICODE] Can anyone advise what I need to do to remove the button Thanks hi, (JAVASCRIT) the actual program reads and prints values from a checkbox tree and this piece of code does it. Code: dhtmlXTreeObject.prototype.getAllChecked=function(){
return this._getAllChecked("","",1);
}
dhtmlXTreeObject.prototype.getAllCheckedBranches=function(){
return this._getAllChecked("","",0);
}
dhtmlXTreeObject.prototype._getAllChecked=function(htmlNode,list,mode){
if(!htmlNode)htmlNode=this.htmlNode;
if(((mode)&&(htmlNode.checkstate==1))||((!mode)&&(htmlNode.checkstate>0))){if(list)list+=","+htmlNode.id;else list=htmlNode.id;}
var j=htmlNode.childsCount;
for(var i=0;i<j;i++)
{
list=this._getAllChecked(htmlNode.childNodes[i],list,mode);
};
if(list)return list;else return "";
};
the values are returned to alertbox. Code: <a href="javascript:void(0);" onclick="alert(tree2.getAllChecked());">Get list of checked</a><br><br> kindly help me with reading the returned values in to an array or list (but bot in alertbox) ...so that i can pass them to next JSP page. waiting for ur answer, BeanBoy ! I wasnt sure where to put this one, since its mainly javascript I thought I would put it here. I am trying to pull a value being stored in a php function (it works fine) which is echoed into an html element, and use it in a javascript function. my HTML: Code: <img id="menu_image" src="<?php echo get_php_value(); ?>" width="356" /> my javascript: Code: function get_large_image(){
var image = document.getElementById('menu_image').src;
alert(image);
}
right now the alert is giving me flie path to the current page, I need a file path to the image. When I had javascript pull a value from an input tag using the id to reference and stored the php function in the value attribute, I got this: "object HtmlElement" The final purpose of all this is to modify dynamically and HTML <a>'s href and class attribute based on a certain condition being true. apprecaite the help I have the following script that currently returns 4 of the same images. I can't wrap my head around how to get it to return 4 random images (out of the 7 in this example)? Also the links aren't working? --- Code: var imagenumber = 7 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;
images= new Array
images[1] = "image1.jpg"
images[2] = "image2.jpg"
images[3] = "image3.jpg"
images[4] = "image4.jpg"
images[5] = "image5.jpg"
images[6] = "image6.jpg"
images[7] = "image7.jpg"
var image = images[rand1]
links= new Array
links[1] = "link1.html"
links[2] = "link2.html"
links[3] = "link3.html"
links[4] = "link4.html"
links[5] = "link5.html"
links[6] = "link6.html"
links[7] = "link7.html"
var link = links[rand1]
document.write('<div id="image-1"><a href="' + link + '"><img src="' + image + '"></a></div><div id="image-2"><a href="' + link + '"><img src="' + image + '"></a></div><div id="image-3"><a href="' + link + '"><img src="' + image + '" border="0"></a></div><div id="image-4"><a href="' + link + '"><img src="' + image + '"></a></div>')
--- Any help would be greatly appreciated! I like to store into database with PHP values from Javascript. How to do this as I like to test local values from visitor. PHP Code: <script type="text/javascript"> document.write("Browser CodeName: " + navigator.appCodeName); document.write("<br /><br />"); document.write("Browser Name: " + navigator.appName); document.write("<br /><br />"); document.write("Browser Version: " + navigator.appVersion); document.write("<br /><br />"); document.write("Cookies Enabled: " + navigator.cookieEnabled); document.write("<br /><br />"); document.write("Platform: " + navigator.platform); document.write("<br /><br />"); document.write("User-agent header: " + navigator.userAgent); </script> Hi, i followed a tutorial online on how to use Javascript to calculate total price. Everything works fine, when all the dropdown select value has it's own value and does not correspond to each other. Eg : Cake Type : Round $4.00 Cake Color : Red $3.00 Cake Filling : Raspberry $4.00 So total is $11.00 The problem comes when you want to add Cake Layers and the price of Cake Color changes based on No of Layers - 1 Layer , 2 Layer and so on. Eg: Cake Layer : Layer 1 $5.00 | Layer 2 $2.50 | Layer 3 $2.50 (for color Orange) Cake Layer : Layer 1 $7.00 | Layer 2 $4.00 | Layer 3 $4.00 (for color Red) Do i have to use if and else conditional statement for every possibility? I am just a beginner. Attached below is the example code i have so far.. Code: var filling_prices= new Array();
filling_prices["None"]=0;
filling_prices["Lemon"]=5;
filling_prices["Custard"]=5;
filling_prices["Fudge"]=7;
filling_prices["Mocha"]=8;
filling_prices["Raspberry"]=10;
function getFillingPrice()
{
var cakeFillingPrice=0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the select id="filling"
var selectedFilling = theForm.elements["filling"];
//set cakeFilling Price equal to value user chose
//For example filling_prices["Lemon".value] would be equal to 5
cakeFillingPrice = filling_prices[selectedFilling.value];
//finally we return cakeFillingPrice
return cakeFillingPrice;
}
This is for the calculation Code: function calculateTotal()
{
//Here we get the total price by calling our function
//Each function returns a number so by calling them we add the values they return together
var cakePrice = getCakeSizePrice() + getFillingPrice() + candlesPrice();
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Cake $"+cakePrice;
}
Some sample of the HTML Code: <select id="filling" name='filling' onchange="calculateTotal()">
<option value="None">Select Filling</option>
<option value="Lemon">Lemon($5)</option>
<option value="Custard">Custard($5)</option>
<option value="Fudge">Fudge($7)</option>
<option value="Mocha">Mocha($8)</option>
<option value="Raspberry">Raspberry($10)</option>
Is there a better way of simplifying this calculation method ? How do i change the price of form values based on selected values on previous dropdown. Thanks in advance. Hello folks: I've got an html table populated by a php foreach routine. One field in this table is an Input type=checkbox. The goal is to run a javascript function when the user checks the checkbox. But, since the checkbox is in a table populated by a foreach routine, I'm having some problems. Below is the applicable code for my table: <?php foreach($results as $row) { $bk_owner = $row['BookOwner']; $addrss_owner = $row['AddressOwner']; $f_name = $row['FName']; $l_name = $row['LName']; $email = $row['EmailAddress']; $d_phone = $row['DeskPhone']; $ext = $row['Ext']; $cell = $row['CellPhone']; $title = $row['Title']; echo "<tr>"; echo "<td class='a'>".$l_name ."</td>"; echo "<td class ='a'>".$f_name ."</td>"; echo "<td class ='c'>".$email ."</td>"; echo "<td class ='a'>".$d_phone ."</td>"; echo "<td class='b'>".$ext."</td>"; echo "<td class='a'>".$cell."</td>"; echo "<td class='c'>".$title."</td>"; echo "<td class='b'><input type='checkbox' id='chk_Bx' value=". $addrss_owner. " onClick='selectFunction()'></input></td>"; echo "</tr>"; } echo"</tbody>"; ?> Specifically, note this line: echo "<td class='b'><input type='checkbox' id='chk_Bx' value=". $addrss_owner. " onClick='selectFunction()'></input></td>"; the value is set to $address_owner. This value is a primary key value and will allow me to run routines related to the record chosen when the checkbox is checked. Following is the javascript code for selectFunction(): function selectFunction(){ var check = document.getElementById("chk_Bx").checked; var val = document.getElementById("chk_Bx").value; alert(val); } At this point the javascript is very simple. All I'm trying to do is pick up applicable values for the record selected. But - I believe because the table is populated through a foreach loop, the javascript alert is returning the same primary key value for every record checked (or unchecked). Also, if I alert out check, it continually returns false, even if I've checked the box and it should read true. I am assuming this is also related to the foreach table presentation. How do I grab ONLY the primary key value, or checked true/false for the applicable record? Thanks in advance: Pavilion I have the following code ... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
body {
background-color:#000;
}
#scenery {
width:964px;
height:482px;
padding:318px 0 0 316px;
margin:auto;
background-image:url('http://www.deshow.net/d/file/travel/2009-10/new-zealand-scenery-738-20.jpg');
}
</style>
</head>
<body>
<div id="scenery">
<img src="http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/DrawingPin1_Blue.png" alt="">
</div>
</body>
</html>
... in which I would like to use Javascript to control the values in the 'padding'. Code: padding:318px 0 0 316px; May I know how can I use Javascript to control that 'padding' values? Appreciate any help. Hi there, I am trying to build an interface to upload files and change some of the form (hidden) values depending on the file uploaded, here is where I got so far: Code: $('#buttonUpload').click(function (){
$.ajaxFileUpload({
url:'doajaxfileupload.php',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'txt',
success: function (data, status){
alert("File is uploaded,");
if(typeof(data.error) != 'undefined'){
if(data.error !=''){ alert(data.error); }
else{ alert(data.msg); }
}
document.getElementById('buttonUpload').style.color="green";
document.getElementById('isfileuploaded').value="green";
},
error: function (data, status, e){ alert(e); }
});
return false;
});
My problem is that I want doajaxfileupload.php to return a variable to javascript/change some html form value. The code works as it is for the file upload, I just need to add something for the output, any suggestion? Edit: I just noticed that some previous part of the code is still the the part that changes the color of the button depending if the file is uploaded or not. Now I want those values to change depending on what file is uploaded. Hello, I'm dynamically outputting the contents of a MySQL table using Python, to a HTML table, which users view (obviously) through a web browser. It looks great, but the problem is that I'd like users to be able to update these values. For example, I have the current value of certain fields in text boxes. I'd like users to be able to change those values, then hit a submit button or similar (ideally on-the-fly) to update the dB. I imagine javascript will need to pass values to a Python script, but I don't know what the best way to go about this is. The table is generated with a loop like so: Code:
# Python code embedded in a .psp file
cursor = db.cursor()
cursor.execute("SELECT from_name, from_address, project, orb_proj, app, tier, environment, network, security_zone, datacenter, server_type, num_servers, date, status FROM requests")
rows = cursor.fetchall()
for row in rows:
new_row = """
<td>%s<br></td>
... (line repeated for each column)
""" % row[0:15]
req.write(new_row)
Any ideas? Maybe this whole thing should be rewritten in something else. Thanks! Hi, I am trying to pass a video id value from one javascript page to another, extract the video id, append it to a utube url and then pass it to a html page for immediate display. I have managed to extract the video id value and append it to the url but cannot get it into the html section of the code. My code is posted below <html> <head> <script type="text/javascript"> function getParams() { var idx = document.URL.indexOf('?'); var urlId; var params = new Array(); if (idx != -1) { var url = document.URL.substring(idx+1, document.URL.length).split('&'); for (var i=0; i<url.length; i++) { videoVal = url[i].split('='); urlId = "http://www.youtube.com/v/" + videoVal[1]; } } document.getrElementById('UrlId').value=urlId; } params = getParams(); </script> </head> <body> <object width="425" height="344"> <param name="UrlId" value=urlId; </param><embed src=urlId type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"> </embed> </object> </p> </body> </html> I need to get it to appear as a complete url in the following lines in the html code <param name="UrlId" value=urlId; <embed src=urlId type="application/x-shockwave-flash"></embed> Can someone please help with this. Thanks hi I have one text box , it can have values like 1 or 1,2 or 1,225,345,21 ie multiple values so ......But now i want textbox should validate weather values entered by user are proper toString().match(/^(([0-9](,)?)*)+$/) This is code i'm using its validating correct only ,but one problem when user enter values like this inputval:1,22,34,25,645, the last comma is not validating it should through error can any one help me plz |
|||||||