Jump to content

Change Iframe SRC based from Radio Buton value


Recommended Posts

Hello,

 

I have a Virtual field with Radio button as Form element type in a Submission form. The value of this radio button is set to a URL page

I also added HTML block underneath the Virtual field so I can insert an Iframe. What script can I use as to change the iframe's src to the radio button value.

Link to comment
Share on other sites

Hi NeoInJS,

Let's assume that:

  1. The virtual radio button has three (3) main options.
  2. The iframe container is a <div> element with an ID of dpIFrame.
  3. This iframe container in #3 was created inside an HTML block.

Under these assumptions, please create another HTML block and add this code snippet to that block with Source button enabled:

<script type="text/javascript">
    // Option 1
    document.getElementsByName("cbParamVirtualX")[0].onchange = searchOnChange0;
    function searchOnChange0()
    {
        var url = document.getElementsByName("cbParamVirtualX")[0].value;
        var iframeDiv = document.getElementById("dpIFrame");
        iframeDiv.innerHTML = '<iframe name="Edit" marginheight="0" frameborder="0" height= "1300" width = "1000" align = "top" src="' + url + '">Sorry, but your browser does not support frames.</iframe>';
    };

    // Option 2
    document.getElementsByName("cbParamVirtualX")[1].onchange = searchOnChange1;
    function searchOnChange1()
    {
        var url = document.getElementsByName("cbParamVirtualX")[1].value;
        var iframeDiv = document.getElementById("dpIFrame");
        iframeDiv.innerHTML = '<iframe name="Edit" marginheight="0" frameborder="0" height= "1300" width = "1000" align = "top" src="' + url + '">Sorry, but your browser does not support frames.</iframe>';
    };

    // Option 3
    document.getElementsByName("cbParamVirtualX")[2].onchange = searchOnChange2;
    function searchOnChange2()
    {
        var url = document.getElementsByName("cbParamVirtualX")[2].value;
        var iframeDiv = document.getElementById("dpIFrame");
        iframeDiv.innerHTML = '<iframe name="Edit" marginheight="0" frameborder="0" height= "1300" width = "1000" align = "top" src="' + url + '">Sorry, but your browser does not support frames.</iframe>';
    };
</script>

 

NOTES:

  1. If the iframe container has a different ID, please change all occurrences of dpIFrame in that script to whatever ID was used in the container.
  2. If you have only two options, please remove the third code group.
  3. If you have more than three (3) options, then for each option, you can put an additional code snippet that follow this pattern:
<script type="text/javascript">
    document.getElementsByName("cbParamVirtualX")[Y].onchange = searchOnChangeY;
    function searchOnChangeY()
    {
        var url = document.getElementsByName("cbParamVirtualX")[Y].value;
        var iframeDiv = document.getElementById("dpIFrame");
        iframeDiv.innerHTML = '<iframe name="Edit" marginheight="0" frameborder="0" height= "1300" width = "1000" align = "top" src="' + url + '">Sorry, but your browser does not support frames.</iframe>';
    };
</script>

 

Link to comment
Share on other sites

Hi NeoInJS,

Please use the code snippet below if you want a more flexible and dynamic solution:

<script type="text/javascript">
    var searchOnChange = function (option)
    {     
        return function() {
            var url             = option.value;
            var iframeDiv = document.getElementById("dpIFrame");

            iframeDiv.innerHTML = '<iframe name="Edit" marginheight="0" frameborder="0" height= "1300" width = "1000" align = "top" src="' + url + '">Sorry, but your browser does not support frames.</iframe>';
        };
    };

    var radioButton = document.getElementsByName("cbParamVirtualX");
    var radioCount  = radioButton.length;

    var i = 0;
    for (i = 0; i < radioCount; i++)
    {
        radioButton[i].onchange = searchOnChange(radioButton[i]);
    }
</script>

 

NOTES:

  1. This code works with any number of radio button options. No manual code duplication is necessary.
  2. Please replace cbParamVirtualX by the actual name of the virtual radio box. For instance, if the virtual radio field is named Virtual3, then replace cbParamVirtualX with cbParamVirtual3.
  3. If the iframe container has a different ID, please change all occurrences of dpIFrame in that script to whatever ID was used in the container.
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...