CoreDo
Reputation: 2891
Apply Javascript code to multiple elements
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:
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>
Upvotes: 0
Views: 128
Answers (1)
JME
Reputation: 3642
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.
Upvotes: 2
Related Questions
- Apply JavaScript function to multiple elements
- apply JavaScript to all elements with id
- apply each function for multiple elements
- Apply jQuery function to multiple elements with same class
- How to apply javascript to more than one element in html document?
- how to repeat same Javascript code over multiple html elements
- Apply jQuery code to divs individually
- Apply function to specific elements
- Apply to function to multiple elements
- apply script to all elements