Change Iframe SRC based from Radio Buton value

[NeoInJS]

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.

[nightowl]

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>

 

[nightowl]

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.