get html element inside another element in javascript

Question

Hi I am creating dynamic div elements , let say 4 div are there . div1,div2,div3,div4. each div has set of radio buttons rad1,rad2,rad3,rad4 . see as follows.

div1 ->rad1,rad2,rad3,rad4 groupName=rd1 ->end div1
div2 ->rad1,rad2,rad3,rad4 groupName=rd2 ->end div2
div3 ->rad1,rad2,rad3,rad4 groupName=rd3 ->end div3
div4 ->rad1,rad2,rad3,rad4 groupName=rd4 ->end div4

This is dynamically created html. i want to get which Radio selected from div2 or div3 what script i have to write ?

Please provide sample code showing us what you're working with and what you already have accomplished. What counts as a selected option? Do you have a <select> element in each div, with <option> children? — outis
– outis, Commented Feb 8, 2011 at 11:07
google 'option element html', the first results' first sentence states 'The option element goes inside the select element' — BiAiB
– BiAiB, Commented Feb 8, 2011 at 11:08
Eidted Question.Sorry it is not option , it is Radio buttons . and code is so big . so i just explain the scenario — Red Swan
– Red Swan, Commented Feb 8, 2011 at 11:20
even if the production code is massive, you should be able to create minimal sample code. — outis
– outis, Commented Feb 9, 2011 at 13:04

Luca Filosofi · Accepted Answer · 2018-04-28 17:53:12Z

7

DEMO: http://so.lucafilosofi.com/get-html-element-inside-another-element-in-javascript

function checkRadio() {
    var radios = document.getElementById('rBox').getElementsByTagName('input');
    for (var i = 0; i < radios.length; i++) {
        radios[i].onclick = function(e) {
            var pid =  this.parentNode.id;
            if ( pid == 'group-2' || pid == 'group-3' )
                alert('PARENT: ' + this.parentNode.id )
        }
    }
}

<body onload="checkRadio()">
<div id="rBox">
<div class="rad" id="group-1">
      <input type="radio" name="option" />
      .... 
    </div>
    <div class="rad" id="group-2">
      <input type="radio" name="option" />
      ....     
    </div>
    ....
 </div>
</body>

edited Apr 28, 2018 at 17:53

answered Feb 8, 2011 at 11:52

Luca Filosofi

31.2k9 gold badges72 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shrinath · Accepted Answer · 2011-02-08 11:13:38Z

2

use jquery
use jquery-> $.live()

answered Feb 8, 2011 at 11:13

Shrinath

8,13813 gold badges51 silver badges86 bronze badges

Comments

aorcsik · Accepted Answer · 2011-02-08 11:25:59Z

2

If I understood you right, this may help you:

var num_of_options = 4;
var selected = new Array();
var op, i, j;

for (j=1;j<=num_of_options;j++) {
    op = document.getElementsByName("rd"+j);
    for (i in op) {
        if (op[i].checked) {
            selected[j] = op[i].value;
        }
    }
}

selected will contain the selected values for the radio groups in each divs.

answered Feb 8, 2011 at 11:25

aorcsik

15.6k5 gold badges42 silver badges50 bronze badges

Comments

user447356 · Accepted Answer · 2011-02-08 11:33:59Z

Here is crude sample code that will show the selected value in each div:

var arrDivs = ["div1", "div2", "div3"];
for (var i = 0; i < arrDivs.length; i++) {
    var oDiv = document.getElementById(arrDivs[i]);
    if (oDiv) {
        var arrInputs = oDiv.getElementsByTagName("input");
        var blnFound = false;
        for (var j = 0; j < arrInputs.length; j++) {
            var oInput = arrInputs[j];
            if (oInput.type == "radio" && oInput.checked) {
                alert("The value of selected radio in div '" + arrDivs[i] + "' is: " + oInput.value);
                blnFound = true;
                break;
            }
        }
        if (!blnFound)
            alert("div '" + arrDivs[i] + "' contains no selected radio button");
    }
    else {
        alert("div was not found: " + arrDivs[i]);
    }
}

Collectives™ on Stack Overflow

get html element inside another element in javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related