www.webdeveloper.com
Results 1 to 6 of 6

Thread: Passing variable from a link to an iframe in the receiving page

  1. #1
    Join Date
    Jun 2012
    Posts
    17

    Talking Passing variable from a link to an iframe in the receiving page

    The title may not explain it very well but it's best I can think of.
    In simple terms, I have 20 or so links like this one:

    Code:
    http://potternet.duoservers.com/?action=f_order&plan_id=36906&css_file=http://www.potternet.net/css/form.css&otype=
    each one where the "plan_id" is the only difference.

    Can I set each link up on their respective pages so that I can just have a simple querystring (ie. my-page-name.html?41745 or my-page-name.html?36906, etc) that will pass the number from the query string of the web address to the iframe that the form would load up in?

    If so, how would I go about doing this? I have researched into jquery methods but none seem to work and I tried this:

    Code:
    "http://potternet.duoservers.com/?action=f_order&plan_id=<?PHP ECHO $_SERVER['QUERY_STRING']; ?>&css_file=http://www.potternet.net/css/form.css&otype="
    but it also fails to work.

    Is there a PHP code I can place into the head of my page to "$GET" the querystring and then get the iframe to load up with the correct information each time?

    Should you need a better explanation, let me know and I will see what I can do. cheers
    Last edited by PotterNet; 06-18-2012 at 05:28 AM.

  2. #2
    Join Date
    Jan 2009
    Posts
    3,346
    I would suggest reading up on GET.

  3. #3
    Join Date
    May 2012
    Posts
    59
    of my page to "$GET" the querystring and the
    it's $_GET not $GET ;-)

  4. #4
    Join Date
    Aug 2006
    Posts
    301
    you could also use innerHTML to dynamically rewrite the info into a div on the page instead of using an iframe.

    you could also have all the plans hardcoded in the html but hidden, and use javascript/jquery/css to toggle which is visible and which is hidden as the user
    clicks

    you can also create several images of the different plans and use javscript to swap
    the source of the image to the relavant image as the click

  5. #5
    Join Date
    May 2011
    Posts
    52
    so I thought i'd have a play with this and ended up throwing this together:

    HTML Code:
    <html>
      <head>
        <title>foo</title>
    	
    	<style type="text/css">
    	.iframe {style frame here}
    	</style>
    	    
      </head>
      <body>
        
    	<div id="changethis"></div>                                       <!-- this div will hold the iframe -->
      
    	<script type="text/javascript">
    		var iframe="";
    		if (location.search != "") {
    			var x = location.search.substr(1).split(";")        // this grabs your query string and makes it = x
    		}
    		iframe=iframe + ("<iframe class='iframe' src='http://potternet.duoservers.com/" + x + "'></iframe>");     // this puts the html for the iframe together
    		document.getElementById("changethis").innerHTML=iframe;                                                            // this loads it to the page
    	</script>
    	
      </body>
    </html>
    What do you think? workable?
    Last edited by damndaewoo; 06-20-2012 at 06:01 PM.

  6. #6
    Join Date
    Aug 2006
    Posts
    301
    that'll probably work, but if you only have a small amount of plans to display, i think had coding them into hidden divs right in the page and using javascript to make them visible would be faster, you'd just hide all bu the one you want to show and when they clicked another plan it would hide them all again and then only make the plan selected visible, you could stack them all on top of each other like a deck of cards using css positioning or move them from off the left side of the screen into position while at the same time hiding or moving the others offscreen to the left or top like -1024px to the left or top, but this would work fine too especially if you have a lot of plans.

    since you already have about 20 pages of plans to display, just make a function that would pass the filename of the plan you want to load into the iframe...

    if your iframe code has an id of plan:

    <iframe id="plans" src="about:blank" width="400" height="400" frameborder="0" scrolling="no"></iframe>

    function loadPlan(plan_id){
    document.getElementByID('plans').src = 'http://potternet.duoservers.com/plans/' + plan_id + '.html';
    }

    then you'd just supply the file name without the htm/html/php extension right in the link like this:

    <a href="javascript: loadPlan(36906)">Plan 1</a>
    <a href="javascript: loadPlan(36901)">Plan 2</a>

    then you'd just need to make sure that you have files named 36906.html and 36901.html
    on your server in the 'plans' directory. if the files exist they'll load, otherwise you'd likely get a 404 error in the iframe, and you can't use javascript to detect if a file exists or not unless you use ajax to check first.

    unless you are planning on having *a lot* of plans, again, i'd just hardcode them all into the page and use javascript + css to toggle their positions and visibility on the page.

    you can also use jquery's load function to load the contents of pages into the current page into a div for example, but not with an iframe.

    so you see, too many ways to skin this cat

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles