|
JavaScript - Javascript Variables To Html Attribute Values
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 Similar Tutorialsi have the code: foreach($product_names as $product_row) { ?> <tr> <td > </td><td width='200px'><?php echo $product_row->getName();?></td> <td width='200px'><input type="checkbox" name="graphic[]" value="<?php echo $product_row->getId();?>" onclick="check()"/></td> <td width='200px'><input type="checkbox" name="text[]" value="<?php echo $product_row->getId();?>" onclick="check()"/></td> </tr> <?php } ?> and a submit button on the page. the i also have the javascript code for the onclick="check()" : <html> <head> <script type="text/javascript"> function check() { var graphics = document.getElementsByName("graphic[]"); for(i=0;i<graphics.length;i++) { if(graphics[i].checked) { if(document.getElementById('submit').style.display=='none') { document.getElementById('submit').style.display='block'; } } } var text = document.getElementsByName("text[]"); for(i=0;i<text.length;i++) { if(text[i].checked) { if(document.getElementById('submit').style.display=='none') { document.getElementById('submit').style.display='block'; } } } } </script> </head> so what all this means is i have two arrays of checkboxes for each product. as soon as i check any checkbox the submit button appears. i click on the submit button and i go to the next form. the problem now comes in if i click on the "back" button to go back to the previous page via the bwrowser..the submit button is disabled althou all my checkboxes that i checked, are still checked....i want the submit button to show??? please help?? thanks This form collects info of the customer who wishes to select add-ons that would be applied to their digital photos. Examples of add-ons: Photo makeover Add object or person Crop image Have a look at the form Once a customer selects one of the options (Photo Manipulation or Photo Restoration for example - radio buttons) and then one or more Add-ons (check boxes in the Html form), enter their details and upload a photo, they hit the submit button and it then takes them to the PayPal checkout page where the total amount is shown. (see image below) The Issue: In the PayPal page, it now shows the total amount whichever add-ons you select, however it keeps showing "Add object or person" as well as all the 5 main options (radio buttons on the form) no matter what I select. This will be an issue as I will not know exactly which add-ons the customer has selected. Can someone please help me complete the coding so that the add-ons show on the PayPal checkout page. I look forward to your reply/replies. Kind Regards Rafi p.s: Could this be a possible solution? Even if it is, can someone help by completing the code? In order to send the options/add-ons the customer selects I may need to use the onX and osX variables (Where X is a number starting with 0 and incrementing by 1 see below), These can be used to set options for the add-onsthey select. The onO is the "option name" and os0 is the "option choice". So for example: <input type="hidden" name="on0" value="Photo manipulation"> <input type="hidden" name="os0" value="Whatever add-ons the customer selects"> <input type="hidden" name="on1" value="Photo restoration"> <input type="hidden" name="os1" value="Whatever add-ons the customer selects"> how can i get the number values from style atrributes. currently i have test_tree.style.top which would return 50px instead of 50, is there anyway i can take just the 50 as an integer
I need to copy input (checkbox) values from a form inside my iframe to the form in my parent frame using javascript and I'm not sure how to modify my current code to accomplish this! I'm using cold fusion to display the values from a database inside the iframe. Once all the values are loaded into the iframe, I need to be able to select as many as necessary and then submit the form from the parent frame which then runs a report that utilizes those values, but I can't do that because my code is written so that the values load in the iframe form and the action to run the report that requires those values is executed from the form in my parent frame. Here are the code snipits: Quote: Main "Parent" Frame Code Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<cfparam name="WordFlag" default="0">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script language="javascript" type="text/javascript">
checked=false;
function checkedAll (frm2) {
var aa= window.document.ActivityFrame.document.getElementById('frm2');
if (checked == false)
{
checked = true
}
else
{
checked = true
}
for (var i =0; i < aa.elements.length; i++)
{
aa.elements[i].checked = checked;
}
}
checked=true;
function uncheckedAll (frm2) {
var aa= window.document.ActivityFrame.document.getElementById('frm2');
if (checked == true)
{
checked = false
}
else
{
checked = false
}
for (var i =0; i < aa.elements.length; i++)
{
aa.elements[i].checked = checked;
}
}
function checkVal (frm2) {
var chks = window.document.ActivityFrame.document.getElementsByName('ActivityList');
var hasChecked = false;
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
hasChecked = true;
break;
}
}
if (hasChecked == false) {
alert("Please select at least one activity!");
return false;
}
return true;
}
</script>
</head>
<body>
<table>
<tr>
<td><CFOUTPUT><H1>#lblReportName#</H1></CFOUTPUT></td>
</tr>
<tr>
<td><CFOUTPUT><H1>#cookie.strProjectName#</H1></CFOUTPUT></td>
</tr>
</table>
<form id="frm1" name="frmPMSelection" method="post" action="../report_manager/index.cfm?fuseaction=ProjectMediaAudit&lblReportName=#URLEncodedFormat(lblReportName)#&WordFlag=#WordFlag#" target="_self">
<table>
<tr>
<td align="left"><CFOUTPUT>#lblSelectPMAActivities#</CFOUTPUT><br /><br /></td>
</tr>
<tr>
<td>
<table>
<tr>
<td align="right">
<cfoutput>
<a href="javascript:checkedAll()"><img src="../graphics_interface/buttons/select_all_#cookie.numLanguagePref#.gif" alt="#Request.lblSelectAll#" title="#Request.lblSelectAll#" align="absmiddle" border="0" /></a>
<a href="javascript:uncheckedAll()"><img src="../graphics_interface/buttons/select_none_#cookie.numLanguagePref#.gif" alt="#Request.lblSelectNone#" title="#Request.lblSelectNone#" align="absmiddle" border="0" /></a>
</cfoutput>
<CFSCRIPT>Request.cshelp.showHelp(str_contentType="screen",str_contentID="",str_helpText=Request.str_lang_cshelp);</CFSCRIPT>
</td>
</tr>
<tr>
<td class="TABLEDATA">
<cfoutput>
<iframe name="ActivityFrame" scrolling="auto" width="480" height="360" src="./index.cfm?fuseaction=ProjectMediaAuditFrame"></iframe>
</cfoutput>
</td>
</tr>
<tr>
<td>
<cfoutput>
<input type="image" src="../graphics_interface/buttons/submit_#cookie.numLanguagePref#.gif" alt="#Request.lblSubmit#" title="#Request.lblSubmit#" align="absmiddle" border="0" onclick="return checkVal()" />
<a href="javascript:void(0);"><img src="../graphics_interface/buttons/cancel_#cookie.numLanguagePref#.gif" alt="#Request.lblCancel#" title="#Request.lblCancel#" align="absmiddle" border="0" onclick="self.location='../report_manager/index.cfm'" /></a>
</cfoutput>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
Quote: iFrame Code 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<table>
<tr>
<td>
<form id="frm2">
<CFOUTPUT QUERY="qryLODetails">
<input type="checkbox" value="#lo_code#" name="ActivityList" />#lo_name#<br />
</CFOUTPUT>
</form>
</td>
</tr>
</table>
</body>
</html>
I'm thinking that loading the values into some sort of hidden comma delimited string structure in the parent frame would do the trick, any ideas, and if I'm on the right track, how would I go about doing that? Also, you shouldn't need to see the query or the report page code to help me with the javascript I require, but if you do need anything else please let me know!! I cant figure out how to get the value of a name inputed in HTML into the following script... <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)"> <meta name="created" content="Sat, 10 Sep 2011 19:40:31 GMT"> <meta name="description" content=""> <meta name="keywords" content=""> <title>Enter golfers name</title> <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <SCRIPT LANGUAGE="JavaScript" type="text/javascript" src="script1.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function GetPage(){ document.write("OK") <!-- var fullname = "david park" var lab = ""; var result = fullname.toUpperCase(); var word=result.split(" "); fname = word[0] lname = word[1] alpha = lname.slice(0,1); lab = fname.concat("_") lab = lab.concat(lname) if(word[2]){ ext = word[2] lab = lab.concat("_") lab = lab.concat(ext) } var intro = "./Stats_"; page = intro.concat(alpha); page = page.concat("_golfers.html#"); page = page.concat(lab) document.write(page) <!-- window.location.pathname = page } </script> </head> <body> <center> <form action="form_action.asp" method="get"> You can enter the golfersname or select him from the above list.<br><br> <input type="text" name="fullname" /> <button type="submit" onclick="GetPage()">GO</button> </form> </center> <BR><BR><BR> This is the end </body> </html> Hi, 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. 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! I have been working on a few budget scripts that I can access from the web in using HTML. My problem is that when variable values change I need to change these values in all of the HTML files on the server. I know that there is a way to declare global variables in a single file and use those values in another file but I have not been able to find any information that tells me exactly how to do this. I have tried to put it together on my own using what little informaiton I have been able to find but have not been able to get this to work. Is there a more detailed referance that I can find somewhere or does anyone know what steps I need to take to make this happen?
$_SESSION['order']['paymentmethod'] equals "Cheque". With the code bellow, I was expecting JavaScript to change the SELECT drop down menu to "Cheque", but it doesn't... However, when I remove the OPTION attribute value="cheque/", it works. This appears to be because there is a conflict with the OPTION attribute value and the SELECT content value "Cheque". Does anyone know how I can get around this issue? Code: <FORM action="" method="post" name="form"> <DIV> <SELECT class="verdana" name="paymentmethod" onchange="this.form.action = this.value;"> <OPTION></OPTION> <OPTION value="cheque/">Cheque</OPTION> <OPTION value="visa/">Visa</OPTION> </SELECT> <BR> <BR> <INPUT type="submit" value="PROCEED"> </DIV> </FORM> <SCRIPT type="text/javascript"> document.forms["form"]["paymentmethod"].value = "<?php echo $_SESSION['order']['paymentmethod']; ?>"; </SCRIPT> Do we have any alternative for orientation attribute of Td element in javascript for firefox? Below code works fine in IE but throws undefined in firefox: if(MyTd.orientation == "Vertical") //throws undefined { //Do something } The HTML for this Td is as follows: <td id="MyTd" orientation = "Vertical" ></td> Thanks. I have an array of all links on a page (see var wa_links = document.links; below). How do I determine if the target of a link is set to "_blank"? I need to do this because currently with my code below, when a link has target="_blank" it ends up adding the Google Analytics code to the parent window and also opening a new window (so basically the new page opens in both the parent and target window instead of just the target window as expected). Code: /*Regex list of on-site domains, pipe and backslash delimited. */
var wa_onsiteDomains = /mydomain\.com|my2nddomain\.com|my3rddomain\.com|javascript/i;
//Display-friendly domain and path name
var wa_displayDomain = location.hostname.replace("www.","").toLowerCase();
var wa_displayPathname = location.pathname.toLowerCase();
/*Used to unobtrusivly add events to objects*/
function unobtrusiveAddEvent (element,event,fn) {
var old = (element[event]) ? element[event] : function () {};
element[event] = function () {fn(); old();};
}
function wa_crossDomainLink(i) {
return function () {
var thisLink = decodeURI(wa_links[i]);
if (typeof(_gaq) == "object")
_gaq.push(['_link', thisLink]); return false;
};
}
var wa_links = document.links;
if ( wa_links ){
for(var i=0; i<wa_links.length; i++) {
if( wa_links[i].href.match(wa_onsiteDomains) && !wa_links[i].href.match(location.hostname)){
unobtrusiveAddEvent( wa_links[i], 'onclick' , wa_crossDomainLink(i));
}
}
}
With jquery I could just do something like... Code: if (jQuery(link).attr('target') == "_blank")
...but how do I do this in plain old JavaScript? Thanks! Hi, I have been attempting to transition to use of xhtml strict doctype and my text editor, BBEdit (on Mac) tells me, when I ask it to check syntax, that the attribute 'name' is not allowed in form object, as in any other form element that I tried to use it in. This begs the question, how do I script forms with javascript in the context of this doctype? None of the javascript texts I have address this issue (O'Reilly Rhino book and others). I could figure it out, but it appears to be a complicated process, just doing getElementById() and sorting it out. Does anyone have a reference to material that deals with this issue? Or do I just abandon xhtml strict doctypes? Thanks for time and attention JK Hello, Into an external js file, I'm trying to use the facebook graph api to read values of "shares" and "comments" and import them into js variables. As example, using http://graph.facebook.com/?id=http://www.google.com in the browser, I get the following response: Code: {
"id": "http://www.google.com",
"shares": 3208837,
"comments": 2
}
In my js code, I need something like: var val_shares=xx; var val_comments=xx; Here's the code I'm using to (try) do it: Code: function getNewHTTPObject()
{
var xmlhttp;
/** Special IE only code ... */
/*@cc_on
@if (@_jscript_version >= 5)
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E)
{
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
/** Every other browser on the planet */
if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
try
{
xmlhttp = new XMLHttpRequest();
}
catch (e)
{
xmlhttp = false;
}
}
return xmlhttp;
}
var xmlHttp = getNewHTTPObject();
function getDynamicData()
{
var url = "http://graph.facebook.com/?id=http://www.google.com";
xmlHttp.open('GET', url, true);
xmlHttp.onreadystatechange = callbackFunction;
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send(null);
}
var syndLinkRequest = getNewHTTPObject();
function callbackFunction()
{
if (syndLinkRequest.readyState != 4)
return;
var result = xmlHttp.responseText;
}
into the HTML I call getDynamicData() at <body onload=getDynamicData()>... Using Firefox in console mode, I see that the results arrive at this point of code: Code: xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send(null);
But I do not know (or understand) how and where to get those value to associate them to a js variable. I understood I will need to use json to achieve this but I don't know where to start. In addition, I can't use jQuery or php to do it. After 2 days of searches, I'm about to give up. Does anyone have an idea how to do or where I can find a concrete sample to show me the right way ? Thanks a lot. Gino Hey all, 1) When clicking on a list in an accordion, it should change the quicktime movie playing in a main window area. It works in firefox but not in safari. The variable imgTitle holds the expected output (e.g. '../images/Intro-1.mov'). It changes the src attribute of the embed tag. This change works in Firefox where the new movie plays on click. However, when clicking the list item in safari, nothing happens. 2) There is a problem in firefox as well in that the movie overlays everything else on page, even though it should be behind the text. Positioning would be tedious given that there's many nested elements and I would have to set relative positioning to the entire page. Any reason for this behavior of embed tags? Code: $(".image_thumb ul li ul li").click(function(){
var imgTitle = $(this).find('a').attr("href");
var imgDesc = $(this).find('.block').html();
var imgDescHeight = $(".main_image").find('.block').height();
if ($(this).is(".active")) {
return false;
} else {
console.log(imgTitle);
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image embed").attr({ src: imgTitle});
});
}
$(".image_thumb ul li ul li").removeClass('active');
$(this).addClass('active');
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
Thanks for response. Hi, I have the following code snippet: test.html ====== <script language="javascript" type="text/javascript"> var testVariable = "test"; </script> <script language="javascript" type="text/javascript" src="test.js"> </script> test.js ===== var testVariable = window.top.testVariable; In firefox, I'm able to access testvariable defined within test.html in test.js. But in chrome, test.js couldnot get the window.top.testVariable field defined in test.html. Can any one please let me know how i can make it work in chrome?. Am i missing something here?. can anyone tell me why this doesn't work please: <html> <head> </head> <body> <input type="hidden" name="ba1r1c1" value="hello"> <script language="text/javascript"> ba1r1c1.value = "goodbye"; document.write(ba1r1c1.value); </script> </body> </html> thanks All -- I have a JavaScript config file called gameSetting.js which contains a bunch of variables which configures a particular game. I also have a shared JavaScript library which uses the variables in gameSetting.js, which I include like so: <script type="text/javascript" src="gameSetting.js" ></script> <script type="text/javascript" src="gameLibrary.js" ></script> In gameSetting.js I have: $(document).ready(function() { // call some functions / classes in gameLibrary.js } in Firefox, Safari, and Chrome, this works fine. However, in IE, when it's parsing gameSetting.js, it complains that the functions that live in gameLibrary.js aren't defined. When it gets to parsing gameLibrary.js, the variables in gameSetting.js are reported as not being defined. I've tried dynamically bootstrapping the gameLibrary file using this function in document.ready for dynamic load... $.getScript("gameLibrary.js"); However, the same problem still happens in IE, where when it parses the files individually it's not taking into context the file/variables that came before, so it's not an out of load order problem. My options a 1) collapsing all the functions in gameLibrary.js and variables in gameSetting.js into one file. However, this is not practical because this is dealing with literally hundreds of games, and having a gameLibrary.js in ONE location for ONE update is what makes most logical sense. 2) figure out a way to get this to work where variables in file1 are accessible to file2 in IE (as it seems they are in other browsers). jQuery seems to be able to have multiple plugins that all refer to the based jQuery-1.3.2.js, so I know there is a way to get this to work. Help appreciated. Nero Hi, Ive got a iphone based website im writing in html/javascript, it all works perfectly well apart from an issue with a javascript variable and i cant figure out what im doing wrong At the start of the code i declare a variable var jpgname='blank'; - its blank for testing I then have a href which attempts to change this variables value when clicked <li class="flip"><a onClick="jpgname='test'" href="#page">Cars</a></li> If i replace the jpgname='test' with confirm('test) i get a popupbox so i know its running this code under my #page section (just a div named section) i have [<h1><script>document.write(jpgname);</script></h1> however this always has the value 'blank' Im sure im doing something stupid but im not sure what Any help gratefully recieved thanks Mike I am perplexed about this one. Not sure if php is the best solution or maybe javascript. ( or both.) I am writing a litle script that will go to my mysql table and take out 20 rows ( from about 10,000 rows ) based on the WHERE statement. Then I want to step through these 20 rows displaying just two filds in this fashion: First, I want to display one field in a "box" ( using divs and css ) then wait for a form input. Then while keeping the first displayed box and field display the second field in a similar box a fee lines below. Wait for a form input update some data. Then onto the next row. If I use javascript then I could keep all the processing on one page and not have to have server refreshes. But how do I get these those array elements from $row['field1'] and $row['field2'] into javascript vars ? Is this the best way to do this ? Or would php and having a couple of extra trips to the server for form processing be better ? Thanks for any input. . Hi, I'm looking to use the document function in javascript to change the TYPE of an INPUT. However I want to change the TYPE of the INPUT according to a variable passed to the javascript button, so i use: document.formname.inputname.value="newvalue"; I want to be able to change what inputname is depending on what is passed to the function, but right now firefox is telling me that it's undefined. Is there any way I can do this? Thanks in advance, Daniel |
|||||||