accessing selected radio button value inside iframe

Question

I write the code. Where I am trying to write a form which is having a long list of radio button content inside 'iframe' like below:

<form name="iframeform" method="POST" action="http://localhost/cgi-bin/run">
    <tr>
            <td><iframe id="macList" src="http://localhost/macinfo" style="width:1000px;height:160px">
            </iframe></td>
    </tr>
    <tr>
            <input type="hidden" name="macaddr" value="">
            <td><input type="submit" name="macselect" value="Continue" id="stdbtn" onclick="getIframeContent()"></td>
    </tr>
</form>

'iframe' is pointing to macinfo page is having code like below:

<html>
<body>
<table>
<tr>
<td><input type=radio name=mac value=E8:B7:48:7B:C0:4A>abc.example.com</td>
</tr>
<tr>
<td><input type=radio name=mac value=00:17:08:5A:81:CF>xyz.cisco.com</td>
</tr>
....
</table>
</body>
</html>

How can I write "getIframeContent()" function to fetch the value of selected radio button? please help..

Darren · Answer 1 · 2013-02-22T14:22:34.940

0

You will have to get the array of mac using document.getElementsByName and loop over them:

var allRadios = document.getElementsByName("mac");
var checkedItem; 
for(var i=0; i<allRadios.length; i++) {
     if (allRadios[i].checked) {
          checkedItem = allRadios[i];
          alert('Found checked radio button');
     }
 }

You could then pass checkedItem to your getIframeContent function.

Edit

You could share the checkedItem variable across two pages by using window

window.checkedItem = allRadios[i];

edited Feb 22 '13 at 14:22

answered Feb 22 '13 at 13:32

Darren

68,902
24
138
144

But I think the code you have written above, I need to write in 'macinfo' html file. Then how can I fetch 'checkItem' variable value in function getIframeContent(), which I will write in the same html file, where iframe is calling 'macinfo' file? – vips Feb 22 '13 at 14:12
@user1552407 you could store it in window.checkedItem which would work across multiple pages. – Darren Feb 22 '13 at 14:21

score 0 · Accepted Answer · answered Feb 22 '13 at 14:25

Long story short. To access iframe document use .contentWindow.document, i.e.:

document.getElementById('macList').contentWindow.document

And an example code:

<html>
  <head>
    <script type="text/javascript">
      function getIframeContent(){
         var myIFrame = document.getElementById('macList');
         var myIFDoc  = myIFrame.contentWindow.document;
         var myRadios = myIFDoc.getElementsByName("mac");

         var checkedItemValue = "";
         for(var i=0; i<myRadios.length; i++) {
            if (myRadios[i].checked) {
               checkedItemValue = myRadios[i].value;
            }
         }
         if (checkedItemValue) {
            alert(checkedItemValue);
         } else {alert('Select address');}
      }
    </script>
  </head>
<body>

  <iframe id="macList" src="..." 
      style="width:600px;height:160px">
  </iframe>

  <input type="submit" onclick="getIframeContent();">

</body>
</html>

accessing selected radio button value inside iframe

2 Answers2