CSS Codes
CSS Layouts
Results 1 to 4 of 4

Thread: getElementById question

  1. 07-26-2008, 06:29 PM #1
    robotman321
    robotman321 is offline New Comer (less than 5 posts)
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default getElementById question

    hi i'm really REALLY new to Javascript, i'm using a friends code:
    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
    Reply With Quote Reply With Quote
  2. 07-26-2008, 07:25 PM #2
    Jesdisciple's Avatar
    Jesdisciple
    Jesdisciple is offline Senior Coders
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    First of all, here's a simplification of the above:
    Code:
    $ageDate = document.getElementById('ageDateBase');
document.getElementById($ageDate.value).selected = "selected";
    Also, JavaScript identifiers don't need a $ like those in PHP do.

    Quote Originally Posted by robotman321 View Post
    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 and reply to this thread when you're done.
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.
    Reply With Quote Reply With Quote
  3. 07-26-2008, 08:11 PM #3
    robotman321
    robotman321 is offline New Comer (less than 5 posts)
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    HTML Code:
    <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
    Reply With Quote Reply With Quote
  4. 07-26-2008, 08:29 PM #4
    Jesdisciple's Avatar
    Jesdisciple
    Jesdisciple is offline Senior Coders
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    Because you don't have infinite <option> tags, this modification is probably wise (with a different upper limit for each field):
    Code:
    $ageDate = document.getElementById('ageDateBase');
if(parseInt($ageDate.value) > -1 && parseInt($ageDate.value) < 32){
    document.getElementById($ageDate.value).selected = "selected";
}
    Quote Originally Posted by robotman321 View Post
    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.
    Last edited by Jesdisciple; 07-26-2008 at 08:43 PM.
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules