JavaScript - Help With Multi Page Variables
ok before i ask my question, please dont tell me to use php...i have my reasons for not doing so...and also, i would like to avoid cookies and ajax....that being said, lets see if you guys can help me out....
ive got a home page with a section where i have links....now, all those links actually go to the same page called services.html ....my problem is this....depending on what link they clicked, the page will display different information...and i cant for the life of me figure out out how to find out which link they clicked from the home page while in services.html....is there a way in my home page to create a variable that is usable on all pages that the person navigates to within my website? like a kind of global or something?? also, is there already a document object that tells me their history of what links they clicked....what im trying to do is contingent on knowing what link they clicked on the home page....basically, services.html has the same links as the home page; however, when i click each one, the innerHTML is changed to display the correect info...i just want to make it so that the home page tells services.html which link was clicked....or if thats not possible, maybe when i click one of the links on the home page, it takes me to services.html and activates one of services.html's links since it has the same links as the home page, except it has them working. now lets also get a little creative...i dont know much javascript, but i do know you can create a new window and hide it...if i create a new window, will it be accessible from another page? because i can put variables in that window maybe or even use the name of the window as a holder...im thinking outside the box here but please help me out...im new to javascript Similar TutorialsHello All, I found this awesome upload script and it works perfectly for what I need so far. The one problem is I can't get it to work for multiple (individual files). The script works like a user will click the browse button, select the file, and it auto submits uploading the file. Now the script is setup to handle multiple files selected all at once, but I need separate buttons for each file. So here is the main page Code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>HTML5 File API</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="main"> <h1>Upload Your Images</h1> <form method="post" enctype="multipart/form-data" action="upload.php"> <input type="file" name="images" id="images"/> <input type="file" name="images" id="images"/> <input type="file" name="images" id="images"/> <button type="submit" id="btn">Upload Files!</button> </form> <div id="response"></div> <ul id="image-list"> </ul> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="upload.js"></script> </body> </html> Here is the upload.php file Code: <?php foreach ($_FILES["images"]["error"] as $key => $error) { if ($error == UPLOAD_ERR_OK) { $name = $_FILES["images"]["name"][$key]; move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]); } } echo $_FILES['images']['name'][$key]; ?> And the upload.js file Code: (function () { var input = document.getElementById("images"), formdata = false; if (window.FormData) { formdata = new FormData(); document.getElementById("btn").style.display = "none"; } input.addEventListener("change", function (evt) { document.getElementById("response").innerHTML = "Uploading . . ." var i = 0, len = this.files.length, img, reader, file; for ( ; i < len; i++ ) { file = this.files[i]; if ( window.FileReader ) { reader = new FileReader(); reader.onloadend = function (e) { showUploadedItem(e.target.result, file.fileName); }; reader.readAsDataURL(file); } if (formdata) { formdata.append("images[]", file); } } if (formdata) { $.ajax({ url: "upload.php", type: "POST", data: formdata, processData: false, contentType: false, success: function (res) { document.getElementById("response").innerHTML = res; } }); } }, false); }()); I'm good with php, but don't know much with javascript and jquery so I don't really know how this works. Is there a way to adjust this so the multiple file inputs will upload. Right now it will only upload the first one. Here is it working. http://www.skafreaks.com/new2/upload/ Thanks for any help SkaFreaks I am creating a very content rich news/media website that requires an audio player. The audio player should be seen by the user as soon as they enter the website and the playlist should play throughout their time spent at the website and should not be restarted or stopped when navigating the website. We originally were using a frameset for the audio player, but the fact that none of the pages through out the site could be reached through a link in the URL bar proved to be too much of an issue. So the new idea was to open the audio player in a javascript pop-up window. But because of the nature of the website, we found that it was very common for users to go "back" in their browser to the homepage after they had navigated away, which would cause the pop-up code to be activated again and would make the pop-up reload, interrupting the audio. So then we moved the pop-up code to the splash page so that when you enter the main page, its already open, and it can't be interrupted. But THEN we found that the pop-up window was of course opened behind the main website's window, which made it hidden and useless. So we currently have no solutions! All we need is for this pop-up window to take focus and be the very top window, and once its opened to never be reloaded/refreshed again. Does anyone have a solution?! Any help is appreciated! i'm working with a city select option, a hotel select option & an iframe. the hotel select option is populated depending on the chosen city which then updates the iframe src. this is all working fine. the trouble im having is that when the page is refreshed, normal f5 way, the hotel option changes whereas the city option & the iframe src remains the same?? this problem does not occur on a force refresh via control + f5 as then both select options & iframe src revert to their original state. I don't want the city option to change upon a normal page refresh. how do I go about this? below are the city, hotel select options & iframe Code: <form name="hotelslist" id="hotelslist"> <select id="cities" name="cities" onChange="hotel_list(hotelslist.cities.selectedIndex);loadHotel();"> <option value="Baddeck">Baddeck</option> <option value="Banff">Banff</option> </select> <select id="hotelnames" name="hotelnames" onChange="loadHotel();"> <option value="Inverary Resort, Baddeck">Inverary Resort, Baddeck</option> </select> </form> <iframe name="hotelframe" id="hotelframe" src="http://www.google.com" scrolling="no" width="660" height="1000" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0"> <p>Your browser does not support iframes.</p> </iframe> below is my javascript functions Code: function loadHotel() { var destURL = document.hotelslist.hotelnames.options[document.hotelslist.hotelnames.selectedIndex].value; window.frames["hotelframe"].location = destURL; } var i; function hotel_list(i){ var hotelslist = document.getElementById("hotelslist"); hotelslist.hotelnames.options.length=0; switch(i) { case 0: //Baddeck hotelslist.hotelnames.options[0] =new Option('Inverary Resort, Baddeck','http://www.test0.com'); break; case 1: //Banff hotelslist.hotelnames.options[0] =new Option('Banff Caribou Lodge & Spa','http://www.test1.com'); hotelslist.hotelnames.options[1] =new Option('Banff Ptarmigan Inn','http://www.test2.com'); hotelslist.hotelnames.options[2] =new Option('Banff Rocky Mountain Resort','http://www.test3.com'); hotelslist.hotelnames.options[3] =new Option('The Rimrock Resort','http://www.test4.com'); hotelslist.hotelnames.options[4] =new Option('Fairmont Banff Springs','http://www.test5.com/'); break; } } can some one please advise on a cross browser solution? thanks in advance. Omar. I want to pass 2 variables from a html page and collecting in another html page using javascript. say i pass xyz and abc to a page 2.html from 1.html without using cookies. In 1.html page i have many links. each link should be able to pass different variable to 2.html. when some one clicks on a link the variables should be passed to 2.html I want to know how to collect them and use them. please provide me code snippet. I am trying to transfer the variables of the form (username & password )in the html page to the process.php page which are both given below. However I am not able to read those values from the process.php page. Can anyone please let me know what is going wrong here? Thanks in advance and appreciate your help. HTML 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"> <head> <script language="JavaScript" type="text/javascript"> function xor_str() { var username_val = document.forms['the_form'].elements["username"].value; var password_val = document.forms['the_form'].elements["password"].value; var xor_key='1234'; var username_res=""; var password_res="" for(i=0;i<username_val.length;++i) { username_res+=String.fromCharCode(xor_key^username_val.charCodeAt(i)); } for(i=0;i<password_val.length;++i) { password_res+=String.fromCharCode(xor_key^password_val.charCodeAt(i)); } // XOR is done //shifting the username_res to the left by 1 bit //username_res = username_res << 1; //shifting the password_res to the left by 1 bit //password_res = password_res << 1; //setting the xor'ed and shifted value for submission document.forms['the_form'].elements["username"].value = username_res; document.forms['the_form'].elements["password"].value = password_res; //alert("UserName: " + username_res); //alert("Password: "+ password_res); the_form.submit(); // is this step right? } </script> </head> <body> <form name="the_form" action="process.php" method="post"> <table> <tr><td colspan="3">Username:<input type="text" name="username"></td></tr> <tr><td>Password: <input type="text" name="password"></td><td colspan="2"><input type="button" onClick="xor_str()" value="Submit"></td></tr> </table> </form> </body>s </html> Process.php page <html><body> <?php $username = $_POST['username']; $password = $_POST['password']; echo "You ordered ". $username . " " . $password . ".<br />"; echo "Thank you "; ?> </body></html> I'm new to javascript and have come across what I'm sure its a really easy problem to solve. I want a page with a hyperlink that passes a variable to another 'pop-up' page (in this case a name, its just an example) and new pop-up page prints a message followed by the variable thats passed. Here is the code as it is right now Code: <html> <head> <script language="javascript" type="text/javascript"> function popitup(a) { var reply = 'a'; newwindow=window.open('','name','height=200,width=150'); var tmp = newwindow.document; tmp.write('<html><head><title>popup</title>'); tmp.write('</head><body><p>"Hello there" + reply </p>'); tmp.write('<p><a href="javascript:self.close()">close</a> the popup.</p>'); tmp.write('</body></html>'); tmp.close(); } </script> </head> <body> <a href="testpopup.html" onclick="popitup('Toby')" >Link to popup</a> </body> </html> In short, I just want the pop-up page to print 'Hello there Toby' or whatever name I choose to pass across. Any help much appreciated!! The 'testpopup.html' url is just the initial webpage. Hi, i need to pass variables to a popup page. I have already made the page i want to be popped up, it is called popup.html and is in the same file location. Here is how i am making the page popup: Code: <head> <script type="text/javascript"> function prizes(){ var prize1 = ..... var prize2 = ..... .ect .ect myRef=window.open('popup.html','mywin','left=20,top=20,width=500,height=500,toolbar=0,resizeable=1'); myRef.focus() } </script> </head> so now i need the variables prize1, prize2....ect. to be used in the popup.html page. i now its nearly xmas but i need this for tomorrow so please help ASAP, PLEASE!! Thanks in advance! Thorbob I have a form with allot of form items on it that posts to itself. I am trying to pass those form values to another page with out using the action attribute in the form. Is there a way to do this? I have tried jquery and javascript but coming up blank. Just trying to pass all the values at one time to another page. Seems a little difficult to me since im a intermediate javascript programmer. Any ideas are welcome and thank you in advance if someone knows how to get this going. Here is what i am trying to do script wise. theform is the ID of the form. I have a switch statement that is based on the button pressed would get into that statement. So if one of the three buttons on the page is "excel report" it should get into that statement and pass the values of the form to another page. I have tried this: Code: <cfswitch expression="#LCase(Trim(FORM.submit))#"> <cfcase value="Excel Report"> <cfoutput> <script> function formSubmit() { var form = document.forms.theForm; // change the url form.action ="index.cfm?keyword=Report PDF New"; form.submit(); } </cfoutput> </script> </cfcase> </cfswitch> AND This: Code: <cfswitch expression="#LCase(Trim(FORM.submit))#"> <cfcase value="PDF Report"> <script> $('##submit').click(function(){ open('',"results"); with(document.print) { method = "POST"; action = "index.cfm?keyword=Report PDF New"; target = "results"; submit(); } }); </script> </cfcase> </cfswitch> Hello all, Im new to the board, Have a question i cant figure out. This board seems very helpful, so here goes. Im trying to grab certain variables like orderID & Subtotal variables that are posted to the confirmation page. The reason im grabbing these is for a confirmation pixel that is displayed for commission junction. When some clicks on their link, then completes an order, their tracking pixel fires grabs these variables and that way they can track the order confirmaton. The problem is they dont see the tracking pixel firing and its not grabbing the variables. I dont know what to do. Here is the code. maybe someone here can help me?? This is the code that shows on the confirmation page. Im assuming this is where im suppose to grab the variables. Code: //<![CDATA[ var SecureCartOrders = [ {"orderID":154983165,"name":"Max Test","company":null,"email1":"max@maxtest.com","address1":"123 main st","address2":null,"city":"miami","state":"Florida","zip":"33845","country":"United States","fax":null,"phone":"5611112222","secondaryphone":null,"cardtype":"","shipname":"Max Test","shipCompany":null,"shipAddress1":"123 main st","shipAddress2":null,"shipCity":"west palm beach","shipState":"Florida","shipZip":"33405","shipCountry":"United States","status":"Accepted","product":["oil product"],"sku":["FC1246"],"quantity":[1],"price":[0.00],"option":[[]],"productattributes":[{}],"plist":"3598071","Total":0.00,"shippingMethod":"Free Shipping","shippingAmount":0,"grandTotal":0.00,"adtrack":0} ]; //]]> This is the javascript code that im using to grab those variables. The variables that i need are orderID & Total Code: <script type='text/javascript'> var orderId = SecureCartOrders[0].orderID; var subTotal = SecureCartOrders[0].Total; var url ='https://www.emjcd.com/u?CID=111111&TYPE=343000&CURRENCY=USD&METHOD=IMG'; url += '&OID=' + orderId; url += '&AMOUNT=' +subTotal; document.write('<img width=\'20\' height=\'1\' src=\' + url + \'\'>'); </script> I have no idea what else i can do. This is a system hosted confirmation page from a shoppingcart software called, 1shoppingcart.com I have a problem with some forms and utilizing the proper code to make them work. Need some help if anyone out there has some working knowledge could help let me now, anyone ?? Eric I will post the code and the problem if someone would chim in thanks Hi there, I have a couple of scripts which both do exactly what I want, but when I try use them both at the same time only one of them will work, could you tell me if i need to change anything in them to get them both to work at the same time or if im missing something really simple? Thanks Script 1 Code: <script type="text/javascript"> var imgPaths = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg', 'pic4.jpg', 'pic5.jpg']; //preload the images var imgObjs = new Array; for(var i=0; i < imgPaths.length; i=i+1) { imgObjs[i] = new Image(); imgObjs[i].src = imgPaths[i]; } function togglePic(num) { if(currPic == 0 || currPic != num) { document.getElementById("image").src = imgObjs[num].src; currPic = num; } else { document.getElementById("image").src = imgObjs[0].src; currPic = 0; } } //load the default image window.onload=function() { document.getElementById("image").src = imgObjs[0].src; currPic = 0; //flag storing current pic number } </script> Script 2 Code: <script type="text/javascript"> window.onload=function () { setStyles(); }; function setStyles() { ids = new Array ('style1','style2','style3','style4'); for (i=0;i<ids.length;i++) { document.getElementById(ids[i]).className=''; document.getElementById(ids[i]).onclick=function() { return Cngclass(this); } } } function Cngclass(obj){ var currObj; for (i=0;i<ids.length;i++) { currObj = document.getElementById(ids[i]); if (obj.id == currObj.id) { currObj.className=(currObj.className=='')?'selected':''; } else { currObj.className=''; } } return false; } </script> HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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> <div id="style"> <div id="styleimage"> <img src="" id="image" width="610" height="229" /> </div> <div id="stylenav"> <ul> <li id="style1"><a href="#" onclick="togglePic(1); return false">style 1</a></li> <li id="style2"><a href="#" onclick="togglePic(2); return false">style 2</a></li> <li id="style3"><a href="#" onclick="togglePic(3); return false">style 3</a></li> <li id="style4"><a href="#" onclick="togglePic(4); return false">style 4</a></li> </ul> </div> </div> </body> </html> Hi i am working on a website project.. in which i have like.. for the menu.. i have a horizontal menu.. with three tabs for eg... Home , about us, contact us and.. when i click on the Home tab, i need a horizontal submenu with four or five links.. say for eg : menu1,menu2,menu3,menu4,menu4 and menu5 and when i click on menu1 i need a vertical menu on click of of menu1. so i need two horizontal menu and one vertical menu. i have attached a sample image of my menu. please have a look. Can i do this in javascript.. I need to do this using html , css or jquery.. How do i ... Please help me hi i am writing a code which needs multi event that's not my problem but it is about mouse event my html is like this Code: <form> d:<input type='text' name='dlink' id='dlink' onkeypress='a()'><br /> m:<input type='text' name='mlink' id='mlink'> </form> i want to perform any changes on dlink to mlink for example i'm using onkeypress so if a user used mouse [right click and then paste] it not works any event like onmouseover or onfocus or ... do not solve my problem i found out that IE has onpaste but other browser not so help me what should i do? Hey guys! I've been searching for a multi-answer script for a 'sort of' quiz I'm making (it's not really a quiz, but I figure it's a similar concept). Example of what I want: Please Select which recipe you'd like: [checkbox1] Chocolate Brownies [checkbox2] Chocolate Chip Cookies [checkbox3] Strawberry Cake [checkbox4] Apple Pie |Submit| If they choose only Chocolate Brownies, then it'll take them to a page with just the brownie recipe, but if they choose Chocolate Brownies and Chocolate Chip Cookies it should take them to a second page I'll make with both recipes on it, etc. I know it's a lot of pages based on how many possible selections, but that's as far as my knowledge goes on how to do this. Any help would be SO appreciated! Thanks, Shia EDIT: I'd like the new information to appear in a new window for easy printing. Is there any way to have a multiline text string in javascript? For example strname="line one of string line two of string"; I get an error that the string is not terminated. The reason I want to do this is from the following code: Code: <textarea name="comments" id="comments" cols="90" rows="8" ></textarea> <?php if (isset($_REQUEST["registered"])) { $end_of_line=chr(10); $carriage_return=chr(13); $step1=str_replace($carriage_return,"",$comments); $step2=str_replace($end_of_line,"<br>",$step1); echo "<script type='text/javascript'>\n"; echo "intermediate='",$step2,"';\n"; echo "comment_value=",'intermediate.replace(/<br>/g,"\n")',";\n"; echo "document.getElementById('comments').value=comment_value;</script>\n"; }?> I an getting the value to set a textarea to from the server. It may have newline characters. If there is a way to have a multiline string, then I could skip all the steps and just echo one javascriopt command. Can this be done? CraigRS Hello, I would like to add multi-language support on the website. So far i have the following code which enables a drop down menu. I would rather prefer a flags instead of a drop down menu. Please help. Thank you very much. PHP Code: <div id="google_translate_element" class="right"></div> <script> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en', includedLanguages: 'en,fr,de,it,es', gaTrack: true, gaId: 'UA-28770952-1', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL }, 'google_translate_element'); } </script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> hiya guys im just trying to get some javascript working that will display on one html page multiple ticking digital clocks representing the accurate time of a host of differents countrys. i currently have managed to get a ticking clock on the page using +++++++++++++++++++++++++ var thetime=new Date(); var nhours=thetime.getHours(); var nmins=thetime.getMinutes(); var nsecn=thetime.getSeconds(); ++++++++++++++++++++++++++++++++ i now need to get other clocks on same page but with the live ticking time from other countrys. i tried for hours searching sites but could not find a solution i understood. i did however add simply add ++++++++++++++++++++ var nhours=thetime.getHours() +7; +++++++++++++++++++ the plus 7 i added was intended to add 7 hours to the clock then i could use this method for all the clocks and it did work it did change the time but there was a problem hong kong is about 8 hours ahead of the uk when its 8pm here its 2am there and if i use this method and i add 6 hours to the getHours variable it then makes the time 26hours rather than 3am here is my code i hope you can be of some help ++++++++++++++++++++++++++++++++++++++++++++++ <html> <HEAD> <TITLE>JavaScript Clock</TITLE> <SCRIPT language="JavaScript"> <!-- function ukclock() { var thetime=new Date(); //var mins=new Date(); //var secn=new Date(); var nhours=thetime.getHours(); //the line below same as above except the +num can be used to add hours to the clock //var nhours=thetime.getHours() +6; var nmins=thetime.getMinutes(); var nsecn=thetime.getSeconds(); var AorP=" "; if (nhours>=12) AorP="P.M."; else AorP="A.M."; if (nhours>=13) nhours-=12; if (nhours==0) nhours=12; if (nsecn<10) nsecn="0"+nsecn; if (nmins<10) nmins="0"+nmins; document.clockform.clockspot.value=nhours+": "+nmins+": "+nsecn+" "+AorP; setTimeout('ukclock()',1000); } //--> </SCRIPT> </head> <BODY onload="ukclock()"> <FORM name="clockform"> Current Time in UK: <INPUT TYPE="text" name="clockspot" size="15"> <br /> </FORM> </body> ++++++++++++++++++++++++++++++++++++++++++++++ Hey everyone, I need some help with a function. I'm using ajax to grab a response from a PHP page, on success, the ajax sets a variable. After the line that calls the ajax function is the line the returns the variable (a global variable). Problem is, because the variable is returned right after the ajax function is fired, it doesn't give the ajax enough time to set the variable. The work around I've thought about would be using the ajax function as a variable, and returning that variable in the initial return line. Could anyone either help me with a better solution, or tell me what I'm doing wrong? Here's some code for reference: The function that will return the response I'm trying to collect: Code: function lt_ajaxGet(hash) { var params = "hash=" + escape(encodeURI(hash)); makePOSTRequest('hash.php?get', params); return ajax_response; } The ajax code: Code: if(http_request.status == 200){ ajax_response = http_request.responseText; } |