PDA

View Full Version : getElementById question



robotman321
07-26-2008, 06:29 PM
hi i'm really REALLY new to Javascript, i'm using a friends code:

<script type="text/javascript">
$ageDate = document.getElementById('ageDateBase');
if ($ageDate.value == '00') {
document.getElementById('00').selected = "selected";
}
else if ($ageDate.value == '01') {
document.getElementById('01').selected = "selected";
}
else if ($ageDate.value == '02') {
document.getElementById('02').selected = "selected";
}
else if ($ageDate.value == '03') {
document.getElementById('03').selected = "selected";
}
else if ($ageDate.value == '04') {
document.getElementById('04').selected = "selected";
}
else if ($ageDate.value == '05') {
document.getElementById('05').selected = "selected";
}
else if ($ageDate.value == '06') {
document.getElementById('06').selected = "selected";
}
else if ($ageDate.value == '07') {
document.getElementById('07').selected = "selected";
}
else if ($ageDate.value == '08') {
document.getElementById('08').selected = "selected";
}
else if ($ageDate.value == '09') {
document.getElementById('09').selected = "selected";
}
else if ($ageDate.value == '10') {
document.getElementById('10').selected = "selected";
}
else if ($ageDate.value == '11') {
document.getElementById('11').selected = "selected";
}
else if ($ageDate.value == '12') {
document.getElementById('12').selected = "selected";
}
else if ($ageDate.value == '13') {
document.getElementById('13').selected = "selected";
}
else if ($ageDate.value == '14') {
document.getElementById('14').selected = "selected";
}
else if ($ageDate.value == '15') {
document.getElementById('15').selected = "selected";
}
else if ($ageDate.value == '16') {
document.getElementById('16').selected = "selected";
}
else if ($ageDate.value == '17') {
document.getElementById('17').selected = "selected";
}
else if ($ageDate.value == '18') {
document.getElementById('18').selected = "selected";
}
else if ($ageDate.value == '19') {
document.getElementById('19').selected = "selected";
}
else if ($ageDate.value == '20') {
document.getElementById('20').selected = "selected";
}
else if ($ageDate.value == '21') {
document.getElementById('21').selected = "selected";
}
else if ($ageDate.value == '22') {
document.getElementById('22').selected = "selected";
}
else if ($ageDate.value == '23') {
document.getElementById('23').selected = "selected";
}
else if ($ageDate.value == '24') {
document.getElementById('24').selected = "selected";
}
else if ($ageDate.value == '25') {
document.getElementById('25').selected = "selected";
}
else if ($ageDate.value == '26') {
document.getElementById('26').selected = "selected";
}
else if ($ageDate.value == '27') {
document.getElementById('27').selected = "selected";
}
else if ($ageDate.value == '28') {
document.getElementById('28').selected = "selected";
}
else if ($ageDate.value == '29') {
document.getElementById('29').selected = "selected";
}
else if ($ageDate.value == '30') {
document.getElementById('30').selected = "selected";
}
else if ($ageDate.value == '31') {
document.getElementById('31').selected = "selected";
}
</script>

Now that is so a form when the mysql DB has been queried it changed the form to the value that the DB provides.. now i want to have multiples of this for each for (this is for birthday Drop downs) for the Day, Month and year.. but when i put more than one it seems to fudge it up and it refuses to work...

any help would be greatly appreciated

`Robot

Jesdisciple
07-26-2008, 07:25 PM
First of all, here's a simplification of the above:
$ageDate = document.getElementById('ageDateBase');
document.getElementById($ageDate.value).selected = "selected";

Also, JavaScript identifiers don't need a $ like those in PHP do.


now i want to have multiples of this for each for[m] (this is for birthday Drop downs) for the Day, Month and year..What is/are Birthday Drop Downs?

Are you going to have multiple dates as well as 3 elements of each date?

The solution to your problem is known as object-oriented programming (if I understand you correctly), but I feel that delving into that before you understand JavaScript itself would be inappropriate. Please read through this tutorial (http://www.w3schools.com/js/default.asp) and reply to this thread when you're done.

robotman321
07-26-2008, 08:11 PM
<select name="ageDate">
<option id="00" value="00">--Day--</option>
<option id="01" value="01" >1</option>
<option id="02" value="02" >2</option>
<option id="03" value="03" >3</option>
<option id="04" value="04" >4</option>
<option id="05" value="05" >5</option>
<option id="06" value="06" >6</option>
<option id="07" value="07" >7</option>
<option id="08" value="08" >8</option>
<option id="09" value="09" >9</option>
<option id="10" value="10" >10</option>
<option id="11" value="11" >11</option>
<option id="12" value="12" >12</option>
<option id="13" value="13" >13</option>
<option id="14" value="14" >14</option>
<option id="15" value="15" >15</option>
<option id="16" value="16" >16</option>
<option id="17" value="17" >17</option>
<option id="18" value="18" >18</option>
<option id="19" value="19" >19</option>
<option id="20" value="20" >20</option>
<option id="21" value="21" >21</option>
<option id="22" value="22" >22</option>
<option id="23" value="23" >23</option>
<option id="24" value="24" >24</option>
<option id="25" value="25" >25</option>
<option id="26" value="26" >26</option>
<option id="27" value="27" >27</option>
<option id="28" value="28" >28</option>
<option id="29" value="29" >29</option>
<option id="30" value="30" >30</option>
<option id="31" value="31" >31</option>
</select>
<script type="text/javascript">
$ageDate = document.getElementById('ageDateBase');
document.getElementById($ageDate.value).selected = "selected";
</script>
<select name="ageMonth">
<option id="00" value="00">--Month--</option>
<option id="01" value="01" >January</option>
<option id="02" value="02" >February</option>
<option id="03" value="03" >March</option>
<option id="04" value="04" >April</option>
<option id="05" value="05" >May</option>
<option id="06" value="06" >June</option>
<option id="07" value="07" >July</option>
<option id="08" value="08" >August</option>
<option id="09" value="09" >September</option>
<option id="10" value="10" >October</option>
<option id="11" value="11" >November</option>
<option id="12" value="12" >December</option>
</select>
<script type="text/javascript">
$ageMonth = document.getElementById('ageMonthBase');
document.getElementById($ageMonth.value).selected = "selected";
</script>
<select name="ageYear">
<option id="0000" value="0000">--Year--</option>
<option id="2005" value="2005" >2005</option>
<option id="2004" value="2004" >2004</option>
<option id="2003" value="2003" >2003</option>
<option id="2002" value="2002" >2002</option>
<option id="2001" value="2001" >2001</option>
<option id="2000" value="2000" >2000</option>
<option id="1999" value="1999" >1999</option>
<option id="1999" value="1998" >1998</option>
<option id="1999" value="1997" >1997</option>
<option id="1999" value="1996" >1996</option>
<option id="1999" value="1995" >1995</option>
<option id="1999" value="1994" >1994</option>
<option id="1999" value="1993" >1993</option>
<option id="1999" value="1992" >1992</option>
<option id="1999" value="1991" >1991</option>
<option id="1999" value="1990" >1990</option>
<option id="1999" value="1989" >1989</option>
<option id="1999" value="1988" >1988</option>
<option id="1999" value="1987" >1987</option>
<option id="1999" value="1986" >1986</option>
<option id="1999" value="1985" >1985</option>
<option id="1999" value="1984" >1984</option>
<option id="1999" value="1983" >1983</option>
<option id="1999" value="1982" >1982</option>
<option id="1999" value="1981" >1981</option>
<option id="1999" value="1980" >1980</option>
<option id="1999" value="1979" >1979</option>
<option id="1999" value="1978" >1978</option>
<option id="1999" value="1977" >1977</option>
<option id="1999" value="1976" >1976</option>
<option id="1999" value="1975" >1975</option>
<option id="1999" value="1974" >1974</option>
<option id="1999" value="1973" >1973</option>
<option id="1999" value="1972" >1972</option>
<option id="1999" value="1971" >1971</option>
<option id="1999" value="1970" >1970</option>
<option id="1999" value="1969" >1969</option>
<option id="1999" value="1968" >1968</option>
<option id="1999" value="1967" >1967</option>
<option id="1999" value="1966" >1966</option>
<option id="1999" value="1965" >1965</option>
<option id="1999" value="1964" >1964</option>
<option id="1999" value="1963" >1963</option>
<option id="1999" value="1962" >1962</option>
<option id="1999" value="1961" >1961</option>
<option id="1999" value="1960" >1960</option>
</select></td>
<script type="text/javascript">
$ageYear = document.getElementById('ageYearBase');
document.getElementById($ageYear.value).selected = "selected";
</script>
the $ identifier is for when they save it takes the given variable and puts it in a hidden form and saves it.

i skimmed over that tutorial.. didnt really see much that would help me besides introducing me to JS.. i have to go to work, i'll read the rest later

Jesdisciple
07-26-2008, 08:29 PM
Because you don't have infinite <option> tags, this modification is probably wise (with a different upper limit for each field):
$ageDate = document.getElementById('ageDateBase');
if(parseInt($ageDate.value) > -1 && parseInt($ageDate.value) < 32){
document.getElementById($ageDate.value).selected = "selected";
}


the $ identifier is for when they save it takes the given variable and puts it in a hidden form and saves it.I think you misunderstand how JavaScript relates to PHP; JavaScript can only pass a value to PHP, not the identifier which JavaScript uses to refer to that value.

EDIT: Wait a sec. This JavaScript is completely unnecessary. In the PHP that writes this page, just add a selected="selected" attribute to the correct <option> element.