Apply Javascript code to multiple elements

Question

I'm trying to apply a specific Javascript code to multiple elements at the same time, How i could do this? I've a page which includes forms for adding students, Each student has his own birthday, I've 3 selectors for choosing (Day, Month and year), So 3 selectors and each selector has its value. I want to copy these selectors values to another input, on each change happens to this selectors the data will be updated in that input, I've succeeded to do it, But want to apply this to all elements on the page, There could be 50 students in each page and the code runs only for the first element.

Here's the function which i call on every change happens to each separate selector:

    function copyDiv() {

            var e = document.getElementById("dayb");
            var dayb = e.options[e.selectedIndex].value;

            var e2 = document.getElementById("monthb");
            var monthb = e2.options[e2.selectedIndex].value;

            var e3 = document.getElementById("yearb");
            var yearb = e3.options[e3.selectedIndex].value;
         var typedb = document.getElementById("typedbirthday");

         typedb.value = dayb + " / " + monthb + " / " + yearb;
}

Attached picture of the form:

enter image description here

Here's the HTML code too:

<div class="f-table-bnp">
                        <div class="f-table-header">
                            <div class="table-h-c1">Num.</div>
                            <div class="table-h-c2">Name</div>
                            <div class="table-h-c3">Add Picture</div>
                            <div class="table-h-c4">Birthday</div>
                            <div class="table-h-c5"></div>
                        </div>


                            <div class="f-table-row1">



        <div class="table-h-c1 table-r1-c1">
            <div class="r1-c1-text member_number"> 1 </div>
            <div class="r1-c1-input"><input type="checkbox" checked=""></div>
        </div>
        <div class="table-h-c2 table-r1-c2">
            <div class="r1-c2-input">
                <input type="text" name="family[1][member][1][name]" value="asdsd" placeholder="Add name here" onclick="placeholder=''" onblur="placeholder='Add name here'">
            </div>
        </div>
        <div class="table-h-c3 table-r1-c3">
            <input type="hidden" name="fr" value="11">
            <div class="r1-c3-btn"><input type="file" class="photoimg" id="11" data-family-id="1" data-member-id="1"></div>
            <div id="img11" class="r1-c3-img">

                <input type="hidden" name="family[1][member][1][photo]" value="uploads/14118608306_10200384523890033_1961108332_n.jpg">
            </div>
        </div>



<div class="table-h-c4 table-r1-c4">


                                        <div class="select-date-row">
                                            <select name="family[1][member][1][dob][day]" id="dayb" onchange="copyDiv()">
                                                <option value="">Date</option>
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                                <option>5</option>
                                                <option>6</option>
                                                <option>7</option>
                                                <option>8</option>
                                                <option>9</option>
                                                <option>10</option>
                                                <option>11</option>
                                                <option>12</option>
                                                <option>13</option>
                                                <option>14</option>
                                                <option>15</option>
                                                <option>16</option>
                                                <option>17</option>
                                                <option>18</option>
                                                <option>19</option>
                                                <option>20</option>
                                                <option>21</option>
                                                <option>21</option>
                                                <option>23</option>
                                                <option>24</option>
                                                <option>25</option>
                                                <option>26</option>
                                                <option>27</option>
                                                <option>28</option>
                                                <option>29</option>
                                                <option>30</option>
                                                <option>31</option>
                                            </select>
                                            <select name="family[1][member][1][dob][month]" id="monthb" onchange="copyDiv()">
                                                <option value="">Month</option>
                                                <option>1</option>
                                                <option>2</option>
                                                <option>2</option>
                                                <option>4</option>
                                                <option>5</option>
                                                <option>6</option>
                                                <option>7</option>
                                                <option>8</option>
                                                <option>9</option>
                                                <option>10</option>
                                                <option>11</option>
                                                <option>12</option>
                                            </select>
                                            <select name="family[1][member][1][dob][year]" id="yearb" onchange="copyDiv()">
                                                <option value="">Year</option>
                                                <option>1990</option>


                                                 <option> 1900 </option> <option> 1901 </option> <option> 1902 </option> <option> 1903 </option> <option> 1904 </option> <option> 1905 </option> <option> 1906 </option> <option> 1907 </option> <option> 1908 </option> <option> 1909 </option> <option> 1910 </option> <option> 1911 </option> <option> 1912 </option> <option> 1913 </option> <option> 1914 </option> <option> 1915 </option> <option> 1916 </option> <option> 1917 </option> <option> 1918 </option> <option> 1919 </option> <option> 1920 </option> <option> 1921 </option> <option> 1922 </option> <option> 1923 </option> <option> 1924 </option> <option> 1925 </option> <option> 1926 </option> <option> 1927 </option> <option> 1928 </option> <option> 1929 </option> <option> 1930 </option> <option> 1931 </option> <option> 1932 </option> <option> 1933 </option> <option> 1934 </option> <option> 1935 </option> <option> 1936 </option> <option> 1937 </option> <option> 1938 </option> <option> 1939 </option> <option> 1940 </option> <option> 1941 </option> <option> 1942 </option> <option> 1943 </option> <option> 1944 </option> <option> 1945 </option> <option> 1946 </option> <option> 1947 </option> <option> 1948 </option> <option> 1949 </option> <option> 1950 </option> <option> 1951 </option> <option> 1952 </option> <option> 1953 </option> <option> 1954 </option> <option> 1955 </option> <option> 1956 </option> <option> 1957 </option> <option> 1958 </option> <option> 1959 </option> <option> 1960 </option> <option> 1961 </option> <option> 1962 </option> <option> 1963 </option> <option> 1964 </option> <option> 1965 </option> <option> 1966 </option> <option> 1967 </option> <option> 1968 </option> <option> 1969 </option> <option> 1970 </option> <option> 1971 </option> <option> 1972 </option> <option> 1973 </option> <option> 1974 </option> <option> 1975 </option> <option> 1976 </option> <option> 1977 </option> <option> 1978 </option> <option> 1979 </option> <option> 1980 </option> <option> 1981 </option> <option> 1982 </option> <option> 1983 </option> <option> 1984 </option> <option> 1985 </option> <option> 1986 </option> <option> 1987 </option> <option> 1988 </option> <option> 1989 </option> <option> 1990 </option> <option> 1991 </option> <option> 1992 </option> <option> 1993 </option> <option> 1994 </option> <option> 1995 </option> <option> 1996 </option> <option> 1997 </option> <option> 1998 </option> <option> 1999 </option> <option> 2000 </option> <option> 2001 </option> <option> 2002 </option> <option> 2003 </option> <option> 2004 </option> <option> 2005 </option> <option> 2006 </option> <option> 2007 </option> <option> 2008 </option> <option> 2009 </option> <option> 2010 </option> <option> 2011 </option> <option> 2012 </option> <option> 2013 </option> <option> 2014 </option>                                                

                                            </select>
                                        </div>
                                        <div class="type-date">
                                            <input id="typedbirthday" name="family[1][member][1][dob][date]" value="4 / 11 / 1912" type="text" placeholder="Or type your date here" onclick="placeholder=''" onblur="placeholder='Or type your date here'">
                                        </div>
                                    </div> 
        <div class="table-h-c5 table-r1-c5">
            <p class="deleterow" data-id="1"><a href="#"><img src="images/delete-icon.png" alt="">Delete</a></p>
        </div>
    </div>

        <div class="f-table-row1">



        <div class="table-h-c1 table-r1-c1">
            <div class="r1-c1-text member_number"> 2 </div>
            <div class="r1-c1-input"><input type="checkbox" checked=""></div>
        </div>
        <div class="table-h-c2 table-r1-c2">
            <div class="r1-c2-input">
                <input type="text" name="family[1][member][2][name]" value="asdasdasdas" placeholder="Add name here" onclick="placeholder=''" onblur="placeholder='Add name here'">
            </div>
        </div>
        <div class="table-h-c3 table-r1-c3">
            <input type="hidden" name="fr" value="12">
            <div class="r1-c3-btn"><input type="file" class="photoimg" id="12" data-family-id="1" data-member-id="2"></div>
            <div id="img12" class="r1-c3-img">
                <img style="width:68;height:70;" width="68" height="70" src="images/upload-img.png" alt="">
                <input type="hidden" name="family[1][member][2][photo]" value="">
            </div>
        </div>




<div class="table-h-c4 table-r1-c4">


                                        <div class="select-date-row">
                                            <select name="family[1][member][2][dob][day]" id="dayb" onchange="copyDiv()">
                                                <option value="">Date</option>
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                                <option>5</option>
                                                <option>6</option>
                                                <option>7</option>
                                                <option>8</option>
                                                <option>9</option>
                                                <option>10</option>
                                                <option>11</option>
                                                <option>12</option>
                                                <option>13</option>
                                                <option>14</option>
                                                <option>15</option>
                                                <option>16</option>
                                                <option>17</option>
                                                <option>18</option>
                                                <option>19</option>
                                                <option>20</option>
                                                <option>21</option>
                                                <option>21</option>
                                                <option>23</option>
                                                <option>24</option>
                                                <option>25</option>
                                                <option>26</option>
                                                <option>27</option>
                                                <option>28</option>
                                                <option>29</option>
                                                <option>30</option>
                                                <option>31</option>
                                            </select>
                                            <select name="family[1][member][2][dob][month]" id="monthb" onchange="copyDiv()">
                                                <option value="">Month</option>
                                                <option>1</option>
                                                <option>2</option>
                                                <option>2</option>
                                                <option>4</option>
                                                <option>5</option>
                                                <option>6</option>
                                                <option>7</option>
                                                <option>8</option>
                                                <option>9</option>
                                                <option>10</option>
                                                <option>11</option>
                                                <option>12</option>
                                            </select>
                                            <select name="family[1][member][2][dob][year]" id="yearb" onchange="copyDiv()">
                                                <option value="">Year</option>
                                                <option>1990</option>


                                                 <option> 1900 </option> <option> 1901 </option> <option> 1902 </option> <option> 1903 </option> <option> 1904 </option> <option> 1905 </option> <option> 1906 </option> <option> 1907 </option> <option> 1908 </option> <option> 1909 </option> <option> 1910 </option> <option> 1911 </option> <option> 1912 </option> <option> 1913 </option> <option> 1914 </option> <option> 1915 </option> <option> 1916 </option> <option> 1917 </option> <option> 1918 </option> <option> 1919 </option> <option> 1920 </option> <option> 1921 </option> <option> 1922 </option> <option> 1923 </option> <option> 1924 </option> <option> 1925 </option> <option> 1926 </option> <option> 1927 </option> <option> 1928 </option> <option> 1929 </option> <option> 1930 </option> <option> 1931 </option> <option> 1932 </option> <option> 1933 </option> <option> 1934 </option> <option> 1935 </option> <option> 1936 </option> <option> 1937 </option> <option> 1938 </option> <option> 1939 </option> <option> 1940 </option> <option> 1941 </option> <option> 1942 </option> <option> 1943 </option> <option> 1944 </option> <option> 1945 </option> <option> 1946 </option> <option> 1947 </option> <option> 1948 </option> <option> 1949 </option> <option> 1950 </option> <option> 1951 </option> <option> 1952 </option> <option> 1953 </option> <option> 1954 </option> <option> 1955 </option> <option> 1956 </option> <option> 1957 </option> <option> 1958 </option> <option> 1959 </option> <option> 1960 </option> <option> 1961 </option> <option> 1962 </option> <option> 1963 </option> <option> 1964 </option> <option> 1965 </option> <option> 1966 </option> <option> 1967 </option> <option> 1968 </option> <option> 1969 </option> <option> 1970 </option> <option> 1971 </option> <option> 1972 </option> <option> 1973 </option> <option> 1974 </option> <option> 1975 </option> <option> 1976 </option> <option> 1977 </option> <option> 1978 </option> <option> 1979 </option> <option> 1980 </option> <option> 1981 </option> <option> 1982 </option> <option> 1983 </option> <option> 1984 </option> <option> 1985 </option> <option> 1986 </option> <option> 1987 </option> <option> 1988 </option> <option> 1989 </option> <option> 1990 </option> <option> 1991 </option> <option> 1992 </option> <option> 1993 </option> <option> 1994 </option> <option> 1995 </option> <option> 1996 </option> <option> 1997 </option> <option> 1998 </option> <option> 1999 </option> <option> 2000 </option> <option> 2001 </option> <option> 2002 </option> <option> 2003 </option> <option> 2004 </option> <option> 2005 </option> <option> 2006 </option> <option> 2007 </option> <option> 2008 </option> <option> 2009 </option> <option> 2010 </option> <option> 2011 </option> <option> 2012 </option> <option> 2013 </option> <option> 2014 </option>                                                

                                            </select>
                                        </div>
                                        <div class="type-date">
                                            <input id="typedbirthday" name="family[1][member][2][dob][date]" value="5.5.1905" type="text" placeholder="Or type your date here" onclick="placeholder=''" onblur="placeholder='Or type your date here'">
                                        </div>
                                    </div> 
        <div class="table-h-c5 table-r1-c5">
            <p class="deleterow" data-id="1"><a href="#"><img src="images/delete-icon.png" alt="">Delete</a></p>
        </div>
    </div>

        <div class="f-table-row1">



        <div class="table-h-c1 table-r1-c1">
            <div class="r1-c1-text member_number"> 3 </div>
            <div class="r1-c1-input"><input type="checkbox" checked=""></div>
        </div>
        <div class="table-h-c2 table-r1-c2">
            <div class="r1-c2-input">
                <input type="text" name="family[1][member][3][name]" value="asdasdsadasdasdadd" placeholder="Add name here" onclick="placeholder=''" onblur="placeholder='Add name here'">
            </div>
        </div>
        <div class="table-h-c3 table-r1-c3">
            <input type="hidden" name="fr" value="13">
            <div class="r1-c3-btn"><input type="file" class="photoimg" id="13" data-family-id="1" data-member-id="3"></div>
            <div id="img13" class="r1-c3-img">
                <img style="width:68;height:70;" width="68" height="70" src="images/upload-img.png" alt="">
                <input type="hidden" name="family[1][member][3][photo]" value="">
            </div>
        </div>



<div class="table-h-c4 table-r1-c4">


                                        <div class="select-date-row">
                                            <select name="family[1][member][3][dob][day]" id="dayb" onchange="copyDiv()">
                                                <option value="">Date</option>
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                                <option>5</option>
                                                <option>6</option>
                                                <option>7</option>
                                                <option>8</option>
                                                <option>9</option>
                                                <option>10</option>
                                                <option>11</option>
                                                <option>12</option>
                                                <option>13</option>
                                                <option>14</option>
                                                <option>15</option>
                                                <option>16</option>
                                                <option>17</option>
                                                <option>18</option>
                                                <option>19</option>
                                                <option>20</option>
                                                <option>21</option>
                                                <option>21</option>
                                                <option>23</option>
                                                <option>24</option>
                                                <option>25</option>
                                                <option>26</option>
                                                <option>27</option>
                                                <option>28</option>
                                                <option>29</option>
                                                <option>30</option>
                                                <option>31</option>
                                            </select>
                                            <select name="family[1][member][3][dob][month]" id="monthb" onchange="copyDiv()">
                                                <option value="">Month</option>
                                                <option>1</option>
                                                <option>2</option>
                                                <option>2</option>
                                                <option>4</option>
                                                <option>5</option>
                                                <option>6</option>
                                                <option>7</option>
                                                <option>8</option>
                                                <option>9</option>
                                                <option>10</option>
                                                <option>11</option>
                                                <option>12</option>
                                            </select>
                                            <select name="family[1][member][3][dob][year]" id="yearb" onchange="copyDiv()">
                                                <option value="">Year</option>
                                                <option>1990</option>


                                                 <option> 1900 </option> <option> 1901 </option> <option> 1902 </option> <option> 1903 </option> <option> 1904 </option> <option> 1905 </option> <option> 1906 </option> <option> 1907 </option> <option> 1908 </option> <option> 1909 </option> <option> 1910 </option> <option> 1911 </option> <option> 1912 </option> <option> 1913 </option> <option> 1914 </option> <option> 1915 </option> <option> 1916 </option> <option> 1917 </option> <option> 1918 </option> <option> 1919 </option> <option> 1920 </option> <option> 1921 </option> <option> 1922 </option> <option> 1923 </option> <option> 1924 </option> <option> 1925 </option> <option> 1926 </option> <option> 1927 </option> <option> 1928 </option> <option> 1929 </option> <option> 1930 </option> <option> 1931 </option> <option> 1932 </option> <option> 1933 </option> <option> 1934 </option> <option> 1935 </option> <option> 1936 </option> <option> 1937 </option> <option> 1938 </option> <option> 1939 </option> <option> 1940 </option> <option> 1941 </option> <option> 1942 </option> <option> 1943 </option> <option> 1944 </option> <option> 1945 </option> <option> 1946 </option> <option> 1947 </option> <option> 1948 </option> <option> 1949 </option> <option> 1950 </option> <option> 1951 </option> <option> 1952 </option> <option> 1953 </option> <option> 1954 </option> <option> 1955 </option> <option> 1956 </option> <option> 1957 </option> <option> 1958 </option> <option> 1959 </option> <option> 1960 </option> <option> 1961 </option> <option> 1962 </option> <option> 1963 </option> <option> 1964 </option> <option> 1965 </option> <option> 1966 </option> <option> 1967 </option> <option> 1968 </option> <option> 1969 </option> <option> 1970 </option> <option> 1971 </option> <option> 1972 </option> <option> 1973 </option> <option> 1974 </option> <option> 1975 </option> <option> 1976 </option> <option> 1977 </option> <option> 1978 </option> <option> 1979 </option> <option> 1980 </option> <option> 1981 </option> <option> 1982 </option> <option> 1983 </option> <option> 1984 </option> <option> 1985 </option> <option> 1986 </option> <option> 1987 </option> <option> 1988 </option> <option> 1989 </option> <option> 1990 </option> <option> 1991 </option> <option> 1992 </option> <option> 1993 </option> <option> 1994 </option> <option> 1995 </option> <option> 1996 </option> <option> 1997 </option> <option> 1998 </option> <option> 1999 </option> <option> 2000 </option> <option> 2001 </option> <option> 2002 </option> <option> 2003 </option> <option> 2004 </option> <option> 2005 </option> <option> 2006 </option> <option> 2007 </option> <option> 2008 </option> <option> 2009 </option> <option> 2010 </option> <option> 2011 </option> <option> 2012 </option> <option> 2013 </option> <option> 2014 </option>                                                

                                            </select>
                                        </div>
                                        <div class="type-date">
                                            <input id="typedbirthday" name="family[1][member][3][dob][date]" value="" type="text" placeholder="Or type your date here" onclick="placeholder=''" onblur="placeholder='Or type your date here'">
                                        </div>
                                    </div> 
        <div class="table-h-c5 table-r1-c5">
            <p class="deleterow" data-id="1"><a href="#"><img src="images/delete-icon.png" alt="">Delete</a></p>
        </div>
    </div>


                    </div>

First, you should change your ids as you're using the same ids in each row. An id has to be unique. Simply change the ids to classes as so far it shouldn't be too much that you have to adjust. — matthias_h
– matthias_h, Commented Sep 28, 2014 at 1:02

JME · Accepted Answer · 2014-09-28 02:53:16Z

getElementById() only gets the first element with the specified id. Instead, you should determine the select elements you wish to handle based on select element that was changed.

Personally, I would consider using a library such as jQuery to ease the DOM manipulation, but here's an example of how to do it in plain JavaScript, without any dependencies.

Change all the onchange="copyDiv()" in every select to onchange="copyDiv(this)"

<select name="..." id="..." onchange="copyDiv(this)">

Then use the following JavaScript:

function getSiblings(elem, skip) {
    var r = [],
        n = elem.parentNode.firstChild;

    for ( ; n; n = n.nextSibling ) {
        if ( n.nodeType === 1 && n != skip) {
            r.push( n );
        }
    }

    return r;
}

function copyDiv(elem) {
    var siblings = getSiblings(elem),
        parentSiblings = getSiblings(elem.parentNode),
        typedb, dayb, monthb, yearb;

    for(var i=0; i < siblings.length; i++) {
        if (siblings[i].id === 'dayb') {
            dayb = siblings[i].value;
        }
        if (siblings[i].id === 'monthb') {
            monthb = siblings[i].value;
        }
        if (siblings[i].id === 'yearb') {
            yearb = siblings[i].value;
        }
    }
    for(i=0; i < parentSiblings.length; i++) {
        if (parentSiblings[i].className === 'type-date') {
            typedb = parentSiblings[i].children[0];
            typedb.value = dayb + " / " + monthb + " / " + yearb;
        }
    }
}

This code is very dependent on your current HTML structure, so changes to your HTML may render this code useless. But at least you have idea on how to tackle your issue.

Here's a simplified working Fiddle http://jsfiddle.net/JohnnyEstilles/15nhktbw/. It only has two rows with select-date-row and type-date, but it illustrates my solution.

Collectives™ on Stack Overflow

Apply Javascript code to multiple elements

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related