SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict Phil-man's Avatar
    Join Date
    Nov 2000
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi:

    Can anyone tell me how/if I can pass a variable to a JavaScript routine in an HTML document? That is, I want to have a link that is something like this:

    http://www.domain.com/page.html?pic=1000

    And then within "page.html" I would have a JavaScript routine that grabs the value of "pic" (in this case '1000') and displays the image file "1000.jpg" (or something like that).

    I know this must be easy. I know how to do it in PHP, but PHP isn't available to me in this case. And obviously I don't know JavaScript all that well. Thanks!

  2. #2
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Phil-man,

    Althoguh this is much easier and more practical with PHP or some other serverside language, it really isn't that hard to do it with just cleint-side JavaScript.

    We've talked about this a lot over at the forum I moderate, and we have one great discussion that should explain a lot to you: http://javascriptcity.com/forums/sho...3?threadid=597

    Hope that helps,
    aDog

    P.S.-I'd make sure to read the wsabstract tutorial linked from that topic page

  3. #3
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Arielladog, can you post some highlights of the other forum here? Just excerts that answer the question.
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  4. #4
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I won't use quote tags, and it will kind of all meshed together.
    Code:
    Here's a quick run down of what the tutorial is showing you. 
    
    <a href="showprod.html?id.value='prod1'">Product 1</a> 
    
    then, on showprod.html 
    
    mySearch = location.search.substr(1) 
    
    that splits the location up so that now mysearch is "id.value='prod1'" 
    
    then, they say 
    
    eval("document.formName.inputName."+mySearch); 
    
    that's interpretted as: 
    
    document.formName.inputName.id.value='prod1' 
    
    
    Then, you have that information stored in the form, which could be hidden or a real input box.
    Code:
    You are focusing too much on the trees to see the forest. In other words, don't read the wsabstract piece as though it were the bible; look at it as if it were an example (which it is). 
    The only important thing the article teaches is: the search property. That is: 
    mySearch = location.search; 
    where the value returned is the entire link string. Everything else (substr, split) is just additional processing. So... 
    If you want to send the same number and type of variables each time, you can send just one string and then use the split() method to extract each individual one. 
    
    
    <body> 
    <p><a href="showprod.htm?data="dog.gif|dog|120.00">prod 1</a></p> 
    <p><a href="showprod.htm?data="frog.gif|frog|10.00">prod 2</a></p> 
    <p><a href="showprod.htm?data="space.gif|nothing|876.00"> prod 3</a></p> 
    </body> 
    
    
    function getFromSearch() 
    { 
    mySearch = location.search.substr(1).split("|"); 
    document.image.src = mySearch[0]; 
    document.myform.prod.value = mySearch[1]) 
    document.myform.price.value = mySearch[2]) 
    } 
    
    Or: 
    function getFromSearch() 
    { 
    mySearch = location.search.substr(1).split("|"); 
    document.image.src = mySearch[0]; 
    for (x = 0 ; x < document.myform.length; x++) 
    document.myform.elements[x].value = mySearch[x]) 
    } 
    
    Vinny
    Code:
    You can place everything you need within an array (you can put it in a *.js file). For example, 
    
    var myData= new Array(); 
    myData[0] = "dog.gif|40|60|dog|120.00"; 
    myData[1] = "frog.gif|40|80|frog|10.00"; 
    myData[2] = "space.gif|140|80|frog|nothing|876.00"; 
    
    You would send the index number of the array 
    <p><a href="showprod.htm?0">prod 1</a></p> 
    ...etc... 
    
    you can then get the information with: 
    mySearch = myData[location.search.substr(1)].split("|"); 
    
    Vinny
    Code:
    here's how the code should work: 
    
    mySearch = location.search.substr(1); 
    //takes the stuff after the question mark - would be ra20 
    
    mySearch = mySearch.substring(3); 
    //takes mySearch, goes over 3 letters and takes the info from there - would be 0 
    
    mySearch = eval(myData[mySearch]); 
    //takes the information recieved above and takes that number and inserts it there to get the array value - would be myData[0] , but then, it would evaluate it;thus taking the data from myData[0] 
    
    mySearch = mySearch.split("&"); 
    //splits that data into an array 
    
    
    now, using layers, you could dynamically write this stuff. For instance, you could have (take a look here: http://members.aol.com/grassblad/dHTML/dHTML1.html): 
    
    
    <div id="myLayer" style="position:absolute;top:775px;left:150px;visibility:hidden">Picture goes here</div> 
    
    then, in your code, you could have: 
    
    
    var txt='<img src="'+mySearch[0]+'" width="'+mySearch[1]+'" height="'+mySearch[2]+'" border="0">'; 
    
    if (document.layers){ 
    document.layers['myLayer'].document.open(); 
    document.layers['myLayer'].document.write(txt); 
    document.layers['myLayer'].document.close(); 
    document.layers['myLayer'].visibility = 'show'; 
    } else{ 
    document.all.myLayer.innerHTML = txt; 
    document.all['myLayer'].style.visibility = 'visible'; 
    } 
    
    
    And you could write to all your info to layers, like that.


    I do reccomend reading the whole topic if you want a grasp on it, but that info should help some.

    aDog



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •