www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 28

Thread: Passing URL variable to iframe in another page

  1. #1
    Join Date
    Jun 2012
    Posts
    17

    Talking Passing URL variable to iframe in another page

    I am hoping my explanation of this is clear enough...
    Say I have an iframe in one page using src "http://potternet.duoservers.com/%3Faction=f_order&plan_id=48174&css_file=htt://www.potternet.net/css/form.css&otype=", how would I use links from other pages of my site to change the "plan_id=" part to show a different number in each case?

    I figure that my links from other pages can be to "set-up-hosting.html?[relevant id number]" in each case.

    the question is, can I replace "plan_id=48174" with something like "plan_id=$plan" and use jquery to write the relevant number from the querystring of a link from another page of my site?

  2. #2
    Join Date
    Jun 2012
    Posts
    17
    Correction: "http://potternet.duoservers.com/%3Faction=f_order&plan_id=48174&css_file=htt://www.potternet.net/css/form.css&otype="

    Is supposed to be:
    "http://potternet.duoservers.com/?action=f_order&plan_id=48174&css_file=htt://www.potternet.net/css/form.css&otype="

  3. #3
    Join Date
    Nov 2007
    Posts
    409
    Give your iFrame and ID and update the src attribute.

    Here is a simple example of update the iframe's src value. the value for "a=1" could be whatever you want... URL param, from another field on the page, etc.

    Code:
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" ></script>
    <script type="text/javascript">
      function changeFrame() {
    	$('#myframe').attr('src','frame_contents.html?a=1');
      }
    
    </script>
    </head>
    <body>
    <button onclick="return changeFrame();">Change Frame</button>
    <iframe id="myframe" src="frame_contents.html" height="100" width="500" >
    </body>
    </html>

  4. #4
    Join Date
    Jun 2012
    Posts
    17
    Bearing in mind that i have 20-odd links, the only difference between any and all of them is that specific ID number. I have tried passing the complete URL as a querystring to the iframe using jquery but it doesn't URLencode the querystring that is a part of the URL I want loaded in the iframe. I thought it might be easier to replace the "ID=[number]" with "id=$plan" and have jquery get the querystring from a link on another page and write it as $plan into the link... can that be done?

  5. #5
    Join Date
    Jun 2012
    Posts
    17
    I figured out that this will be better served by using php. Investigating now. If anyone has any suggestions, let me know but my idea involves having "plan_id=<?php echo $plan ?>" in the link and having some kind of PHP code in the head of the HTML that will read the ID number from the querystring of the link that lead to the page. The question is, what would I need in the programming in the head of the page? lol

  6. #6
    Join Date
    Jun 2012
    Posts
    17

    Talking A batter way to word my question

    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?

    This is the src for my iframe:

    Code:
    "http://potternet.duoservers.com/?action=f_order&plan_id=[number]&css_file=http://www.potternet.net/css/form.css&otype="

    Is there a jquery 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

  7. #7
    Join Date
    Nov 2007
    Posts
    409
    If you are using PHP for your server-side language, my recommendation is to let PHP create the URL for the iFrame for you. (PHP can read query string params just fine, so you can easily put that param's value in your iframe's URL.

    If you must use javascript code to update the iframe's URL, neither javascript nor jQuery offer out of the box access to specific URL parameters, but there are lots of code snippets available out there for you to use. For example, combined with the code I posted above for updating the src of the iframe, you could use the function found here to get a value from the URL which you could use: http://www.jquery4u.com/snippets/url.../#.T98bMJF6Tbw

  8. #8
    Join Date
    Jun 2012
    Posts
    17

    Cool

    OK. Then I will stick to finding a way to do it in PHP as that seems like a better idea seeing as the only difference between all the links is that number. I have posted a request in the PHP forum for this so if anyone cal help me out with it, please take a look @

    http://www.webdeveloper.com/forum/sh...d.php?t=261713

    and pop a reply up. Thanks all.

  9. #9
    Join Date
    Mar 2012
    Posts
    1,644
    If I understand your problem, the solution is simple using PHP. E.g. If you use a form:

    <form action="my_iframe_page.php" method=get>
    <input type=hidden name="plan_id" value="36906">
    <input type=submit value="send">
    </form>

    If you do not want to use a form, you can simulate a GET in an anchor calling the IFrame page. The points to note are:

    1. The Iframe page needs to be named ".php" not ".html".

    2. You need to manually translate the "/" and "#" characters (if used) to "&#37;2F" and "%23" respectively ("_" and "." do not need translating). E.g.

    <a href="my_iframe_page.php?plan_id=36906%23Iframe_ID">my anchor</a>

    Note: The query string comes AFTER the URL and BEFORE the ID .

    3. In either case, the plan ID could be read by the Iframe page something like:

    <body>
    <?php
    /* suppress notice if data not found */
    error_reporting(E_ALL ^ E_NOTICE);
    /* check for plan ID */
    if ( $_GET['plan_id'] == NULL ) { $plan_id='default'; }
    else { $plan_id=$_GET['plan_id'];
    } ?>

    Note: I've included code to set a default plan ID in case one is not supplied, and suppressed the error warning that arises if you GET a NULL variable.

    4. You then use $plan_id in the Iframe as you suggested...

    Note: In case you are not aware, you cannot test PHP code using your browser, (like you can with HTML). You need to set up a local host. I recommend wamp.
    Last edited by jedaisoul; 06-18-2012 at 09:40 AM.

  10. #10
    Join Date
    Jun 2012
    Posts
    17

    Talking

    OK. Firstly, I have found a link that is far easier to use for the purpose. It cosists of "extrnal.url/order?plan=44944".
    Now, how do I pass the "plan=44944" from a querystring in the URL that lead to the page with the iframe in it. (ie. Link from other page my-page.html?plan=44944)

    (ie.
    Code:
    <iframe src="http://external.url/order?[value from querystring]"
    )

    How would I use some kind of jquery to read the querystring from the "my-page.html?plan=44944" and get the iframe to load it as "http://external.url/order?plan=44944" but then have it work with other plan numbers (ie. link "my-page.html?plan=50934" gets iframe to load "http://external.url/order?plan=50934") and this works no matter what the "plan=" number is...?

    I hope that this makes sense to someone as I am having issues writing it in a way that seems clear and concise. lol

  11. #11
    Join Date
    Jan 2009
    Posts
    3,346
    Quote Originally Posted by PotterNet View Post
    OK. Firstly, I have found a link that is far easier to use for the purpose. It cosists of "extrnal.url/order?plan=44944".
    Now, how do I pass the "plan=44944" from a querystring in the URL that lead to the page with the iframe in it. (ie. Link from other page my-page.html?plan=44944)

    (ie.
    Code:
    <iframe src="http://external.url/order?[value from querystring]"
    )

    How would I use some kind of jquery to read the querystring from the "my-page.html?plan=44944" and get the iframe to load it as "http://external.url/order?plan=44944" but then have it work with other plan numbers (ie. link "my-page.html?plan=50934" gets iframe to load "http://external.url/order?plan=50934") and this works no matter what the "plan=" number is...?

    I hope that this makes sense to someone as I am having issues writing it in a way that seems clear and concise. lol
    Using PHP would be way easier in my opinion:
    PHP Code:
    <?php
    //sanitize the variables first
    if(!isset($_GET['plan']) || !is_numeric($_GET['plan'])){
    //do something here cause it is an error in the data
    } else {
    //somewhere in your code you want the iframe
    ?>
    <iframe src="http://external.url/order?plan=<?php echo $_GET['plan'];?>>
    <?php ?>

  12. #12
    Join Date
    Jun 2012
    Posts
    17

    Talking

    Quote Originally Posted by criterion9 View Post
    Using PHP would be way easier in my opinion:
    PHP Code:
    <?php
    //sanitize the variables first
    if(!isset($_GET['plan']) || !is_numeric($_GET['plan'])){
    //do something here cause it is an error in the data
    } else {
    //somewhere in your code you want the iframe
    ?>
    <iframe src="http://external.url/order?plan=<?php echo $_GET['plan'];?>>
    <?php ?>
    Ok... Your comments within the PHP code have confused me somewhat as I haven't done anything PHP related before now. If I am right, the code would look like this:
    [PHP]
    <?php
    if(!isset($_GET['plan']) || !is_numeric($_GET['plan']))
    { (what would go here??)
    }else
    { (what would go here??)
    }
    ?>

    and then my iframe source code would be:
    Code:
    <iframe src="http://external.url/order?plan=<?php echo $_GET['plan'];?>></iframe>
    Am I correct? And can you append the details where I have asked the question of "What would go here??" please? Thank you

    Additional: The link leading to the page with the iframe would read "my-page.html?plan=49444" or whatever number in each case and the PHP would read this and input it into the link for the iframe source before it loads the iframe contents, correct?
    Last edited by PotterNet; 06-18-2012 at 01:06 PM.

  13. #13
    Join Date
    Mar 2012
    Posts
    1,644
    Quote Originally Posted by PotterNet View Post
    OK. Firstly, I have found a link that is far easier to use for the purpose. It cosists of "extrnal.url/order?plan=44944".
    Now, how do I pass the "plan=44944" from a querystring in the URL that lead to the page with the iframe in it. (ie. Link from other page my-page.html?plan=44944)

    (ie.
    Code:
    <iframe src="http://external.url/order?[value from querystring]"
    )
    I've already answered this. My solution may seem complex but that is simply because I've included error handling and how to handle "/" and "#". In principle it's just:

    In the calling page(s):

    <a href= "my-page.php?plan=449444">text</a>

    In the iframe page:

    $plan=$_GET['plan']

    and:

    <iframe src="url/form_<?php echo $plan; ?>.ext">

    Assuming the plan id is part of the name of the form you want to display.

    Quote Originally Posted by PotterNet View Post
    How would I use some kind of jquery to read the querystring from the "my-page.html?plan=44944" and get the iframe to load it as "http://external.url/order?plan=44944" but then have it work with other plan numbers (ie. link "my-page.html?plan=50934" gets iframe to load "http://external.url/order?plan=50934") and this works no matter what the "plan=" number is...?

    I hope that this makes sense to someone as I am having issues writing it in a way that seems clear and concise. lol
    You should not use JavaScript (or Jquery) for essential functionality. Not all web-aware devices support them. Use PHP. It is transparent to the client because it is done by the server. I.e. So long as your web server supports PHP, it works everywhere.

    P.S. Criterion9's solution is essentially the same as mine.
    Last edited by jedaisoul; 06-18-2012 at 01:56 PM.

  14. #14
    Join Date
    Jun 2012
    Posts
    17
    Quote Originally Posted by jedaisoul View Post
    I've already answered this. My solution may seem complex but that is simply because I've included error handling and how to handle "/" and "#". In principle it's just:

    In the calling page(s):

    <a href= "my-page.php?plan=449444">text</a>

    In the iframe page:

    $plan=$_GET['plan']

    and:

    <iframe src="url/form_<?php echo $plan; ?>.ext">

    Assuming the plan id is part of the name of the form you want to display.


    You should not use JavaScript (or Jquery) for essential functionality. Not all web-aware devices support them. Use PHP. It is transparent to the client because it is done by the server. I.e. So long as your web server supports PHP, it works everywhere.

    P.S. Criterion9's solution is essentially the same as mine.
    Firstly: My pages are ALL .HTML documents.
    Secondly: I tried your approach using
    Code:
    <iframe src=http://external.url/order?plan=<? php echo $plan; ?>></iframe>
    and it didn't seem to work, despite there being a <?php $plan=$_GET['plan'] ?> in place at the start of the page's coding too. I also tried it as
    Code:
     <iframe src=http://external.url/order?plan=<?php $plan=$_GET['plan'];
    echo $plan;
    ?>
    too but this didn't seem to work either. Where am I going wrong?

    Please note, the "plan=" is actually a querystring of the iframe src, not a part of the file name. (ie http://external.url/order.php?plan=44944, not http://external.url/order/plan44944.php)

    And please note, the reason for using external url for the form is because I am a reseller and the form is on the wholesale supplier's site.
    Last edited by PotterNet; 06-18-2012 at 02:28 PM.

  15. #15
    Join Date
    Jan 2009
    Posts
    3,346
    PHP doesn't by default parse html documents (usually has a .php extension). Do you have the ability to use PHP scripting with your current configurations?

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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