SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I cant make the datetime picker run on my project

    Hi Java script Gurus.

    I've been trying to figure out how to run the date_time picker java script but seems like it doesen't like me :-)

    date and time picker should run when you select MATH and click Date taken text box

    here is my problematic work:

    Code:
    <html>
    <head>
    <link rel="stylesheet" href="images/main.css">
    <script type="text/javascript" src="images/prototype-1.js"></script>
    <script type="text/javascript" src="images/prototype-base-extensions.js"></script>
    <script type="text/javascript" src="images/prototype-date-extensions.js"></script>
    <script type="text/javascript" src="images/behaviour.js"></script>
    <script type="text/javascript" src="images/datepicker.js"></script>
    <link rel="stylesheet" href="images/datepicker.css">
    <script type="text/javascript" src="images/behaviors.js"></script>
    <title>OHAB SCHOOL</title>
    <script type='text/javascript'>
    
    function toggle(tbl_show,total_tbl)
         {
             for (i=1;i<total_tbl+1;i++)
             {
            document.getElementById("thetbl"+i).style.display='none';
            }
             if (tbl_show!="") {     
                 obj=document.getElementById("thetbl"+tbl_show);
                 obj.style.display='';
                 }
         }
    
    function updatehosts(selectedchostgroup){
    hostslist.options.length=0
    if (selectedhostsgroup>0){
    for (i=0; i<hosts[selectedhostsgroup].length; i++)
    hostslist.options[hostslist.options.length]=new Option(hosts[selectedhostgroup][i].split("|")[0], hosts[selectedhostgroup][i].split("|")[1])
    }
    }
    <!-- check Button -->
    function enable_bld_button(buttonSel){    
       document.getElementById(buttonSel).disabled = false;
    }
    function getAllSelections(box) {
    	var options = box.options;
    	var selectedOptions = [];
    	for (var i = 0; i < options.length; i++)
    		if (options[i].selected)
    			selectedOptions.push(options[i].value);
    	return selectedOptions;
    }
    function BuildAlert(buildID) {
    alert("Selected for " + getAllSelections(document.getElementById(buildID)));
          }
    
    
     <!-- ADDED -->
    var ohabo = [];
    ohabo["startList"] = ["addition","subtraction"];
    ohabo["addition"] = ["whole","integer","fraction"];
    ohabo["whole"] = ["whole Stuff 1","whole Stuff 2","whole Stuff 3"];
    ohabo["integer"] = ["integer Stuff 1","integer Stuff 2","integer Stuff 3"];
    ohabo["even"] = ["even Stuff 1","even Stuff 2","even Stuff 3"];
    
    var nLists = 3; // number of select lists in the set
    
    function fillSelect(currCat,currList){
    var step = Number(currList.name.replace(/\D/g,""));
    for (i=step; i<nLists+1; i++) {
    document.forms['pogi']['List'+i].length = 1;
    document.forms['pogi']['List'+i].selectedIndex = 0;
    }
    var nCat = ohabo[currCat];
    for (each in nCat) {
    var nOption = document.createElement('option'); 
    var nData = document.createTextNode(nCat[each]); 
    nOption.setAttribute('value',nCat[each]); 
    nOption.appendChild(nData); 
    currList.appendChild(nOption); 
    } 
    }
    
    function init() {
    fillSelect('startList',document.forms['pogi']['List1'])
    }
    
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
    
    </script>
    </head>
    <body >
    <form name="pogi">
    <table border="1">
      <tr>
        <td width="50%">
          <p>Select Subject</p>
        </td>
        <td>
         <select name="select_task" onchange="toggle(this.value,2)"> 
      <option value="">---SELECT ONE---</option>
      <option value="1">1 - Science</option>
      <option value="2">2 - Math</option>
      <option value="3">3 - Politics</option>
      <option value="4">4 - Pehm</option>
      <option value="5">6 - Others</option>
      </select>
        </td>
    </tr>
    </table>
    </br>
    <table border="1" id="thetbl1" style="display:none">
    <tr>
       <td width="50%" align='center'><p>Select a Subject</p></td>
      <td ><select size="3" name="build_list" multiple="yes" id="build_lst" onfocus="enable_bld_button('button1')"> 
      <option>Phisics</option>
      <option>Chemistry</option>
      <option>Anatomy</option>
      <option>Botany</option>
      <option>Geology</option>
      
      </select></td>
       </td>   
    </tr>
       <tr>
       <td align='center'><p>Exceute</p></td>
       <td align='center'><input id="button1" type='button' name="bld_button" disabled value='COMMIT' onclick="BuildAlert('build_lst')")></td>
       <!--onclick="get_build(getBUILDSelections this.form['build_list'].value)"-->
       </tr>
       </table>     
    <table border="1" id="thetbl2" style="display:none">
    </tr>
    <tr>
       <td><p>Select a Subject</p></td>
       <td><p>Select a Topic</p></td>
       <td><p>Select Topic2</p></td>   
    </tr>
    <tr>
      <tr>
    <td>
    <select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
    <option selected>Choose a Subject</option>
    </select>
    
    <td>
    <select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
    <option selected>Choose a Topic </option>
    </select>
    </td>
      <td>
    <select id="build_2nd" name='List3' size="2"  multiple="yes" onchange="getValue(this.value, this.form['List2'].value, 
    this.form['List1'].value)" onfocus="enable_bld_button('button2')">
    <option selected >Choose Topic2</option>
    </select>
    </td>
      </tr>
      <tr>
       <td align='center'><p>Date Taken</p></td>
       <td align='center' colspan='2'><input size='5' type="text" name="SelectedDate" id="SelectedDate" class="datetimepicker"/>
       </td>
       </tr>
       <tr>
       <td align='center'><p>Exceute</p></td>
       <td align='center' colspan='2'><input id="button2" type='button' name="bld_button2" disabled value='COMMIT' onclick="BuildAlert('build_2nd')")></td>
       </tr>
    </table>
    </form>
    </body>
    </html>
    here is the date_time picker sample that worked:

    Code:
    <html> 
      <head>
        <title>My Web Page!</title>
    	<link rel="stylesheet" href="images/main.css">
    					<script type="text/javascript" language="javascript" src="images/prototype-1.js"></script>
    			<script type="text/javascript" language="javascript" src="images/prototype-base-extensions.js"></script>
    			<script type="text/javascript" language="javascript" src="images/prototype-date-extensions.js"></script>
    			<script type="text/javascript" language="javascript" src="images/behaviour.js"></script>
    							<script type="text/javascript" language="javascript" src="images/datepicker.js"></script>
    										<link rel="stylesheet" href="images/datepicker.css">
    							<script type="text/javascript" language="javascript" src="images/behaviors.js"></script>
      </head>
      <body>
         <!--<input size='5' type="text">-->
    	 
    	 <div style="float:left; width:400px;">Date and time, horizontal layout, 24-hour time:</div> <input class="datetimepicker"/>
    	
    	</form>
      </body>
    </html>
    you may also download the datetimepicker.js here:
    site_1 & site_2

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi javainbegginer,

    Welcome to the forums

    The problem with your code is your method name 'toggle':

    HTML Code:
    <select name="select_task" onchange="toggle(this.value,2)">
    This is a method name used by Prototype and by overwriting it, you are causing things to crash.
    Change 'toggle' to any other name, such as 'updateContent' and this will solve your problem.

    HTH

    P.S. As an aside, you might consider using jQuery's datepicker as an alternative.

  3. #3
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi javainbegginer,

    Welcome to the forums

    The problem with your code is your method name 'toggle':

    HTML Code:
    <select name="select_task" onchange="toggle(this.value,2)">
    This is a method name used by Prototype and by overwriting it, you are causing things to crash.
    Change 'toggle' to any other name, such as 'updateContent' and this will solve your problem.

    HTH

    P.S. As an aside, you might consider using jQuery's datepicker as an alternative.

    Thanks Pullo!

    date time picker works now, I also changed the "toggle" to the one that you have suggested but there is a change on the selection box behavior on the "Select Subject" under MATH

    Code:
    <html>
    <head>
    <link rel="stylesheet" href="images/main.css">
    <script type="text/javascript" src="images/prototype-1.js"></script>
    <script type="text/javascript" src="images/prototype-base-extensions.js"></script>
    <script type="text/javascript" src="images/prototype-date-extensions.js"></script>
    <script type="text/javascript" src="images/behaviour.js"></script>
    <script type="text/javascript" src="images/datepicker.js"></script>
    <link rel="stylesheet" href="images/datepicker.css">
    <script type="text/javascript" src="images/behaviors.js"></script>
    <title>OHAB SCHOOL</title>
    <script type='text/javascript'>
    
    function UpdateContent(tbl_show,total_tbl)
         {
             for (i=1;i<total_tbl+1;i++)
             {
            document.getElementById("thetbl"+i).style.display='none';
            }
             if (tbl_show!="") {     
                 obj=document.getElementById("thetbl"+tbl_show);
                 obj.style.display='';
                 }
         }
    
    function updatehosts(selectedchostgroup){
    hostslist.options.length=0
    if (selectedhostsgroup>0){
    for (i=0; i<hosts[selectedhostsgroup].length; i++)
    hostslist.options[hostslist.options.length]=new Option(hosts[selectedhostgroup][i].split("|")[0], hosts[selectedhostgroup][i].split("|")[1])
    }
    }
    <!-- check Button -->
    function enable_bld_button(buttonSel){    
       document.getElementById(buttonSel).disabled = false;
    }
    function getAllSelections(box) {
    	var options = box.options;
    	var selectedOptions = [];
    	for (var i = 0; i < options.length; i++)
    		if (options[i].selected)
    			selectedOptions.push(options[i].value);
    	return selectedOptions;
    }
    function BuildAlert(buildID) {
    alert("Selected for " + getAllSelections(document.getElementById(buildID)));
          }
    
    
     <!-- ADDED -->
    var ohabo = [];
    ohabo["startList"] = ["addition","subtraction"];
    ohabo["addition"] = ["whole","integer","fraction"];
    ohabo["whole"] = ["whole Stuff 1","whole Stuff 2","whole Stuff 3"];
    ohabo["integer"] = ["integer Stuff 1","integer Stuff 2","integer Stuff 3"];
    ohabo["even"] = ["even Stuff 1","even Stuff 2","even Stuff 3"];
    
    var nLists = 3; // number of select lists in the set
    
    function fillSelect(currCat,currList){
    var step = Number(currList.name.replace(/\D/g,""));
    for (i=step; i<nLists+1; i++) {
    document.forms['pogi']['List'+i].length = 1;
    document.forms['pogi']['List'+i].selectedIndex = 0;
    }
    var nCat = ohabo[currCat];
    for (each in nCat) {
    var nOption = document.createElement('option'); 
    var nData = document.createTextNode(nCat[each]); 
    nOption.setAttribute('value',nCat[each]); 
    nOption.appendChild(nData); 
    currList.appendChild(nOption); 
    } 
    }
    
    function init() {
    fillSelect('startList',document.forms['pogi']['List1'])
    }
    
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
    
    </script>
    </head>
    <body >
    <form name="pogi">
    <table border="1">
      <tr>
        <td width="50%">
          <p>Select Subject</p>
        </td>
        <td>
         <select name="select_task" onchange="UpdateContent(this.value,2)"> 
      <option value="">---SELECT ONE---</option>
      <option value="1">1 - Science</option>
      <option value="2">2 - Math</option>
      <option value="3">3 - Politics</option>
      <option value="4">4 - Pehm</option>
      <option value="5">6 - Others</option>
      </select>
        </td>
    </tr>
    </table>
    </br>
    <table border="1" id="thetbl1" style="display:none">
    <tr>
       <td width="50%" align='center'><p>Select a Subject</p></td>
      <td ><select size="3" name="build_list" multiple="yes" id="build_lst" onfocus="enable_bld_button('button1')"> 
      <option>Phisics</option>
      <option>Chemistry</option>
      <option>Anatomy</option>
      <option>Botany</option>
      <option>Geology</option>
      
      </select></td>
       </td>   
    </tr>
       <tr>
       <td align='center'><p>Exceute</p></td>
       <td align='center'><input id="button1" type='button' name="bld_button" disabled value='COMMIT' onclick="BuildAlert('build_lst')")></td>
       <!--onclick="get_build(getBUILDSelections this.form['build_list'].value)"-->
       </tr>
       </table>     
    <table border="1" id="thetbl2" style="display:none">
    </tr>
    <tr>
       <td><p>Select a Subject</p></td>
       <td><p>Select a Topic</p></td>
       <td><p>Select Topic2</p></td>   
    </tr>
    <tr>
      <tr>
    <td>
    <select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
    <option selected>Choose a Subject</option>
    </select>
    
    <td>
    <select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
    <option selected>Choose a Topic </option>
    </select>
    </td>
      <td>
    <select id="build_2nd" name='List3' size="2"  multiple="yes" onchange="getValue(this.value, this.form['List2'].value, 
    this.form['List1'].value)" onfocus="enable_bld_button('button2')">
    <option selected >Choose Topic2</option>
    </select>
    </td>
      </tr>
      <tr>
       <td align='center'><p>Date Taken</p></td>
       <td align='center' colspan='2'><input size='5' type="text" name="SelectedDate" id="SelectedDate" class="datetimepicker"/>
       </td>
       </tr>
       <tr>
       <td align='center'><p>Exceute</p></td>
       <td align='center' colspan='2'><input id="button2" type='button' name="bld_button2" disabled value='COMMIT' onclick="BuildAlert('build_2nd')")></td>
       </tr>
    </table>
    </form>
    </body>
    </html>

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    M'kay. What is happening with the selection box and what do you want to happen?

  5. #5
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi javainbegginer,

    Welcome to the forums

    The problem with your code is your method name 'toggle':

    HTML Code:
    <select name="select_task" onchange="toggle(this.value,2)">
    This is a method name used by Prototype and by overwriting it, you are causing things to crash.
    Change 'toggle' to any other name, such as 'updateContent' and this will solve your problem.

    HTH

    P.S. As an aside, you might consider using jQuery's datepicker as an alternative.
    Quote Originally Posted by Pullo View Post
    M'kay. What is happening with the selection box and what do you want to happen?
    Hi Pullo,

    This is the initial code that I constructed before I planned to add datetime picker

    Code:
    <html>
    <head>
    
    <title>OHAB SCHOOL</title>
    <script type='text/javascript'>
    
    function toggle(tbl_show,total_tbl)
         {
             for (i=1;i<total_tbl+1;i++)
             {
            document.getElementById("thetbl"+i).style.display='none';
            }
             if (tbl_show!="") {     
                 obj=document.getElementById("thetbl"+tbl_show);
                 obj.style.display='';
                 }
         }
    
    function updatehosts(selectedchostgroup){
    hostslist.options.length=0
    if (selectedhostsgroup>0){
    for (i=0; i<hosts[selectedhostsgroup].length; i++)
    hostslist.options[hostslist.options.length]=new Option(hosts[selectedhostgroup][i].split("|")[0], hosts[selectedhostgroup][i].split("|")[1])
    }
    }
    <!-- check Button -->
    function enable_bld_button(buttonSel){    
       document.getElementById(buttonSel).disabled = false;
    }
    function getAllSelections(box) {
    	var options = box.options;
    	var selectedOptions = [];
    	for (var i = 0; i < options.length; i++)
    		if (options[i].selected)
    			selectedOptions.push(options[i].value);
    	return selectedOptions;
    }
    function BuildAlert(buildID) {
    alert("Selected for " + getAllSelections(document.getElementById(buildID)));
          }
    
    
     <!-- ADDED -->
    var ohabo = [];
    ohabo["startList"] = ["addition","subtraction"];
    ohabo["addition"] = ["whole","integer","fraction"];
    ohabo["whole"] = ["whole Stuff 1","whole Stuff 2","whole Stuff 3"];
    ohabo["integer"] = ["integer Stuff 1","integer Stuff 2","integer Stuff 3"];
    ohabo["even"] = ["even Stuff 1","even Stuff 2","even Stuff 3"];
    
    var nLists = 3; // number of select lists in the set
    
    function fillSelect(currCat,currList){
    var step = Number(currList.name.replace(/\D/g,""));
    for (i=step; i<nLists+1; i++) {
    document.forms['pogi']['List'+i].length = 1;
    document.forms['pogi']['List'+i].selectedIndex = 0;
    }
    var nCat = ohabo[currCat];
    for (each in nCat) {
    var nOption = document.createElement('option'); 
    var nData = document.createTextNode(nCat[each]); 
    nOption.setAttribute('value',nCat[each]); 
    nOption.appendChild(nData); 
    currList.appendChild(nOption); 
    } 
    }
    
    function init() {
    fillSelect('startList',document.forms['pogi']['List1'])
    }
    
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
    
    </script>
    </head>
    <body >
    <form name="pogi">
    <table border="1">
      <tr>
        <td width="50%">
          <p>Select Subject</p>
        </td>
        <td>
         <select name="select_task" onchange="toggle(this.value,2)"> 
      <option value="">---SELECT ONE---</option>
      <option value="1">1 - Science</option>
      <option value="2">2 - Math</option>
      <option value="3">3 - Politics</option>
      <option value="4">4 - Pehm</option>
      <option value="5">6 - Others</option>
      </select>
        </td>
    </tr>
    </table>
    </br>
    <table border="1" id="thetbl1" style="display:none">
    <tr>
       <td width="50%" align='center'><p>Select a Subject</p></td>
      <td ><select size="3" name="build_list" multiple="yes" id="build_lst" onfocus="enable_bld_button('button1')"> 
      <option>Phisics</option>
      <option>Chemistry</option>
      <option>Anatomy</option>
      <option>Botany</option>
      <option>Geology</option>
      
      </select></td>
       </td>   
    </tr>
       <tr>
       <td align='center'><p>Exceute</p></td>
       <td align='center'><input id="button1" type='button' name="bld_button" disabled value='COMMIT' onclick="BuildAlert('build_lst')")></td>
       <!--onclick="get_build(getBUILDSelections this.form['build_list'].value)"-->
       </tr>
       </table>     
    <table border="1" id="thetbl2" style="display:none">
    </tr>
    <tr>
       <td><p>Select a Subject</p></td>
       <td><p>Select a Topic</p></td>
       <td><p>Select Topic2</p></td>   
    </tr>
    <tr>
      <tr>
    <td>
    <select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
    <option selected>Choose a Subject</option>
    </select>
    
    <td>
    <select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
    <option selected>Choose a Topic </option>
    </select>
    </td>
      <td>
    <select id="build_2nd" name='List3' size="2"  multiple="yes" onchange="getValue(this.value, this.form['List2'].value, 
    this.form['List1'].value)" onfocus="enable_bld_button('button2')">
    <option selected >Choose Topic2</option>
    </select>
    </td>
      </tr>
      <tr>
       <td align='center'><p>Date Taken</p></td>
       <td align='center' colspan='2'><input size='5' type="text" name="SelectedDate" id="SelectedDate" class="datetimepicker"/>
       </td>
       </tr>
       <tr>
       <td align='center'><p>Exceute</p></td>
       <td align='center' colspan='2'><input id="button2" type='button' name="bld_button2" disabled value='COMMIT' onclick="BuildAlert('build_2nd')")></td>
       </tr>
    </table>
    </form>
    </body>
    </html>
    as you can see once you selected the MATH every selection box updates on its contents. When I have changed the "toggle" as per you have advised the 1st selection box on "Select Subject" expanded and some strange contents is added. (I'm not good in english explanations) but you can observe it if you compare this code from the previous

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    No probs. i'm just off out the door now, but I'll have a look at it later.
    Shouldn't be too hard to sort out.

  7. #7
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for your help Pullo, I appreciate all of your help

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Short answer:

    Your fillSelect() function was breaking the"Select Subject" dropdown and causing funny things to get written into the option tags.
    You will need to rewrite this.

    The long answer:

    There were quite a few things that could be improved in your script, so I decided to improve them for you in hope of demonstrating some best practises.
    1. Using tables for layout purposes is a no no. It made your code hard to read, so I removed the tables and replaced them with unordered lists instead. This is a lot more semantic and will save you trouble in the long run. Here's a good article in case you want to find out more: http://www.alistapart.com/articles/p...cessibleforms/
    2. Inline JavaScript is also a no no, not least of all because it makes your code much harder to read and maintain. I copied a cross-browser event handler function from Stack Overflow and moved all of your inline JS into event handlers.
    3. It's good practice to put your JavaScript at the end of the document, just before the closing </body> tag. This I also have done.
    4. I did some other small things, like add a DOCTYPE declaration, put the CSS in the <head> section of the document and wrap the hidden fields in a <div>, which makes them easier to target in JS.
    5. I rewrote the fillSelect() function. It now works as well as the code you originally provided (but could probably do with some refactoring).
    6. The datepicker function now works as expected.

    Here's the code.
    Take your time to look through it and just let me know if you have any questions.

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>OHAB SCHOOL</title>
        <script type="text/javascript" src="images/prototype-1.js"></script>
        <script type="text/javascript" src="images/prototype-base-extensions.js"></script>
        <script type="text/javascript" src="images/prototype-date-extensions.js"></script>
        <script type="text/javascript" src="images/behaviour.js"></script>
        <script type="text/javascript" src="images/behaviors.js"></script>
        <script type="text/javascript" src="images/datepicker.js"></script>
        <link rel="stylesheet" href="images/datepicker.css">
        <link rel="stylesheet" href="images/main.css">
        
        <style>
          ul{
            list-style:none;
            padding:0;
            margin:10px;
          }
          
          li{ margin-bottom:10px}
          
          label {
            display: inline-block;
            line-height: 1.8;
            vertical-align: top;
          }
          
          #science, #math{display: none;}
        </style>
      </head>
      
      <body>
        <form name="pogi">
          <ul>
            <li>
              <label for="select_task">Select Subject:</label>
              <select name="select_task" id="select_task"> 
                <option value="">---SELECT ONE---</option>
                <option value="science">1 - Science</option>
                <option value="math">2 - Math</option>
                <option value="politics">3 - Politics</option>
                <option value="pehm">4 - Pehm</option>
                <option value="others">6 - Others</option>
              </select>
            </li>
          </ul>
          
          <div id="contentArea">
            <!--SCIENCE-->
            <ul id="science">
              <li>
                <label for="build_lst">Select a Subject:</label>
                <select name="build_list" multiple="yes" id="build_lst"> 
                  <option>Physics</option>
                  <option>Chemistry</option>
                  <option>Anatomy</option>
                  <option>Botany</option>
                  <option>Geology</option>
                </select>
              </li>
              <li>
                <label for="button1">Exceute</label>
                <input id="button1" type='button' name="bld_button" disabled value='COMMIT' />
              </li>
            </ul>
            <!--END SIENCE-->
            
            <!--MATH-->
            <ul id="math">
              <li>
                <label for="build_lst">Select a Subject:</label>
                <select name='List1' id='List1'>
                  <option selected>Choose a Subject</option>
                </select>
              </li>
              <li>
                <label for="build_lst">Select a Topic:</label>
                <select name='List2' id='List2'>
                  <option selected>Choose a Topic </option>
                </select>
              </li>
              <li>
                <label for="build_lst">Select Topic 2:</label>
                <select id="build_2nd" name='List3' size="2"  multiple="yes">
                  <option selected>Choose Topic2</option>
                </select>
              </li>
              <li>
                <label for="build_lst">Date Taken:</label>
                <input size='5' type="text" name="SelectedDate" id="SelectedDate" class="datetimepicker" />
              </li>
              <li>
                <label for="build_lst">Execute:</label>
                <input id="button2" type='button' name="bld_button2" disabled value='COMMIT' />
              </li>
            </ul>
            <!--END MATH-->
          </div>
        </form>
      
        <script type='text/javascript'>
          //Start cross browser add listener function
          function addEvent(elem, event, fn) {
            function listenHandler(e) {
              var ret = fn.apply(this, arguments);
              if (ret === false) {
                e.stopPropagation();
                e.preventDefault();
              }
              return(ret);
            }
            
            function attachHandler() {
              var ret = fn.call(elem, window.event);   
              if (ret === false) {
                window.event.returnValue = false;
                window.event.cancelBubble = true;
              }
              return(ret);
            }
            
            if (elem.addEventListener) {
              elem.addEventListener(event, listenHandler, false);
            } else {
              elem.attachEvent("on" + event, attachHandler);
            }
          }    
          //End cross browser add listener function
          
          function UpdateContent(){
            var c = document.getElementById("contentArea");
            var items = c.getElementsByTagName("ul");
            for (var i = 0; i < items.length; ++i) {
              if (this.value == items[i].id){
                items[i].style.display = 'block';
              } else {
                items[i].style.display = 'none';
              }
            }
          }
          
          function enable_bld_button(buttonSel){    
             document.getElementById(buttonSel).disabled = false;
          }
          
          function BuildAlert(buildID) {
            alert("You have selected: " + getAllSelections(document.getElementById(buildID)));
          }
          
          function getAllSelections(box) {
            var options = box.options;
            var selectedOptions = [];
            for (var i = 0; i < options.length; i++){
              if (options[i].selected){
                selectedOptions.push(options[i].value);
              }
            }
            return selectedOptions;
          }
          
          function fillSelect(el, arr){
            var select = document.getElementById(el);
            document.getElementById(el).options.length = 1;
            document.getElementById("build_2nd").options.length = 1;
            
            for (var i = 0; i < arr.length; ++i) {
              var option = document.createElement("option");
              option.text = arr[i];
              option.value = arr[i];
              select.appendChild(option);
            }
          }
          
          var ohabo = [];
          ohabo["startList"] = ["addition","subtraction"];
          ohabo["addition"] = ["whole","integer","fraction"];
          ohabo["subtraction"] = ["easy","hard","difficult"];
          ohabo["whole"] = ["whole Stuff 1","whole Stuff 2","whole Stuff 3"];
          ohabo["integer"] = ["integer Stuff 1","integer Stuff 2","integer Stuff 3"];
          ohabo["even"] = ["even Stuff 1","even Stuff 2","even Stuff 3"];
          
          addEvent( document.getElementById("select_task"), 'change', UpdateContent ); 
          addEvent( document.getElementById("build_lst"), 'focus', function(){enable_bld_button('button1')} ); 
          addEvent( document.getElementById("button1"), 'click', function(){BuildAlert('build_lst')} );
          addEvent( document.getElementById("List1"), 'change', function(){fillSelect('List2', ohabo[this.value])} );
          addEvent( document.getElementById("List2"), 'change', function(){fillSelect('build_2nd', ohabo[this.value])} );
          addEvent( document.getElementById("List2"), 'change', function(){fillSelect('build_2nd', ohabo[this.value])} );
          addEvent( document.getElementById("List2"), 'change', function(){fillSelect('build_2nd', ohabo[this.value])} );
          addEvent( document.getElementById("build_2nd"), 'focus', function(){enable_bld_button('button2')} );
          addEvent( document.getElementById("button2"), 'click', function(){BuildAlert('build_2nd')} );
          addEvent( window, 'load', function(){fillSelect('List1', ohabo["startList"])} );
        </script>
      </body>
    </html>

  9. #9
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    Short answer:

    Your fillSelect() function was breaking the"Select Subject" dropdown and causing funny things to get written into the option tags.
    You will need to rewrite this.

    The long answer:

    There were quite a few things that could be improved in your script, so I decided to improve them for you in hope of demonstrating some best practises.
    1. Using tables for layout purposes is a no no. It made your code hard to read, so I removed the tables and replaced them with unordered lists instead. This is a lot more semantic and will save you trouble in the long run. Here's a good article in case you want to find out more: http://www.alistapart.com/articles/p...cessibleforms/
    2. Inline JavaScript is also a no no, not least of all because it makes your code much harder to read and maintain. I copied a cross-browser event handler function from Stack Overflow and moved all of your inline JS into event handlers.
    3. It's good practice to put your JavaScript at the end of the document, just before the closing </body> tag. This I also have done.
    4. I did some other small things, like add a DOCTYPE declaration, put the CSS in the <head> section of the document and wrap the hidden fields in a <div>, which makes them easier to target in JS.
    5. I rewrote the fillSelect() function. It now works as well as the code you originally provided (but could probably do with some refactoring).
    6. The datepicker function now works as expected.

    Here's the code.
    Take your time to look through it and just let me know if you have any questions.

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>OHAB SCHOOL</title>
        <script type="text/javascript" src="images/prototype-1.js"></script>
        <script type="text/javascript" src="images/prototype-base-extensions.js"></script>
        <script type="text/javascript" src="images/prototype-date-extensions.js"></script>
        <script type="text/javascript" src="images/behaviour.js"></script>
        <script type="text/javascript" src="images/behaviors.js"></script>
        <script type="text/javascript" src="images/datepicker.js"></script>
        <link rel="stylesheet" href="images/datepicker.css">
        <link rel="stylesheet" href="images/main.css">
        
        <style>
          ul{
            list-style:none;
            padding:0;
            margin:10px;
          }
          
          li{ margin-bottom:10px}
          
          label {
            display: inline-block;
            line-height: 1.8;
            vertical-align: top;
          }
          
          #science, #math{display: none;}
        </style>
      </head>
      
      <body>
        <form name="pogi">
          <ul>
            <li>
              <label for="select_task">Select Subject:</label>
              <select name="select_task" id="select_task"> 
                <option value="">---SELECT ONE---</option>
                <option value="science">1 - Science</option>
                <option value="math">2 - Math</option>
                <option value="politics">3 - Politics</option>
                <option value="pehm">4 - Pehm</option>
                <option value="others">6 - Others</option>
              </select>
            </li>
          </ul>
          
          <div id="contentArea">
            <!--SCIENCE-->
            <ul id="science">
              <li>
                <label for="build_lst">Select a Subject:</label>
                <select name="build_list" multiple="yes" id="build_lst"> 
                  <option>Physics</option>
                  <option>Chemistry</option>
                  <option>Anatomy</option>
                  <option>Botany</option>
                  <option>Geology</option>
                </select>
              </li>
              <li>
                <label for="button1">Exceute</label>
                <input id="button1" type='button' name="bld_button" disabled value='COMMIT' />
              </li>
            </ul>
            <!--END SIENCE-->
            
            <!--MATH-->
            <ul id="math">
              <li>
                <label for="build_lst">Select a Subject:</label>
                <select name='List1' id='List1'>
                  <option selected>Choose a Subject</option>
                </select>
              </li>
              <li>
                <label for="build_lst">Select a Topic:</label>
                <select name='List2' id='List2'>
                  <option selected>Choose a Topic </option>
                </select>
              </li>
              <li>
                <label for="build_lst">Select Topic 2:</label>
                <select id="build_2nd" name='List3' size="2"  multiple="yes">
                  <option selected>Choose Topic2</option>
                </select>
              </li>
              <li>
                <label for="build_lst">Date Taken:</label>
                <input size='5' type="text" name="SelectedDate" id="SelectedDate" class="datetimepicker" />
              </li>
              <li>
                <label for="build_lst">Execute:</label>
                <input id="button2" type='button' name="bld_button2" disabled value='COMMIT' />
              </li>
            </ul>
            <!--END MATH-->
          </div>
        </form>
      
        <script type='text/javascript'>
          //Start cross browser add listener function
          function addEvent(elem, event, fn) {
            function listenHandler(e) {
              var ret = fn.apply(this, arguments);
              if (ret === false) {
                e.stopPropagation();
                e.preventDefault();
              }
              return(ret);
            }
            
            function attachHandler() {
              var ret = fn.call(elem, window.event);   
              if (ret === false) {
                window.event.returnValue = false;
                window.event.cancelBubble = true;
              }
              return(ret);
            }
            
            if (elem.addEventListener) {
              elem.addEventListener(event, listenHandler, false);
            } else {
              elem.attachEvent("on" + event, attachHandler);
            }
          }    
          //End cross browser add listener function
          
          function UpdateContent(){
            var c = document.getElementById("contentArea");
            var items = c.getElementsByTagName("ul");
            for (var i = 0; i < items.length; ++i) {
              if (this.value == items[i].id){
                items[i].style.display = 'block';
              } else {
                items[i].style.display = 'none';
              }
            }
          }
          
          function enable_bld_button(buttonSel){    
             document.getElementById(buttonSel).disabled = false;
          }
          
          function BuildAlert(buildID) {
            alert("You have selected: " + getAllSelections(document.getElementById(buildID)));
          }
          
          function getAllSelections(box) {
            var options = box.options;
            var selectedOptions = [];
            for (var i = 0; i < options.length; i++){
              if (options[i].selected){
                selectedOptions.push(options[i].value);
              }
            }
            return selectedOptions;
          }
          
          function fillSelect(el, arr){
            var select = document.getElementById(el);
            document.getElementById(el).options.length = 1;
            document.getElementById("build_2nd").options.length = 1;
            
            for (var i = 0; i < arr.length; ++i) {
              var option = document.createElement("option");
              option.text = arr[i];
              option.value = arr[i];
              select.appendChild(option);
            }
          }
          
          var ohabo = [];
          ohabo["startList"] = ["addition","subtraction"];
          ohabo["addition"] = ["whole","integer","fraction"];
          ohabo["subtraction"] = ["easy","hard","difficult"];
          ohabo["whole"] = ["whole Stuff 1","whole Stuff 2","whole Stuff 3"];
          ohabo["integer"] = ["integer Stuff 1","integer Stuff 2","integer Stuff 3"];
          ohabo["even"] = ["even Stuff 1","even Stuff 2","even Stuff 3"];
          
          addEvent( document.getElementById("select_task"), 'change', UpdateContent ); 
          addEvent( document.getElementById("build_lst"), 'focus', function(){enable_bld_button('button1')} ); 
          addEvent( document.getElementById("button1"), 'click', function(){BuildAlert('build_lst')} );
          addEvent( document.getElementById("List1"), 'change', function(){fillSelect('List2', ohabo[this.value])} );
          addEvent( document.getElementById("List2"), 'change', function(){fillSelect('build_2nd', ohabo[this.value])} );
          addEvent( document.getElementById("List2"), 'change', function(){fillSelect('build_2nd', ohabo[this.value])} );
          addEvent( document.getElementById("List2"), 'change', function(){fillSelect('build_2nd', ohabo[this.value])} );
          addEvent( document.getElementById("build_2nd"), 'focus', function(){enable_bld_button('button2')} );
          addEvent( document.getElementById("button2"), 'click', function(){BuildAlert('build_2nd')} );
          addEvent( window, 'load', function(){fillSelect('List1', ohabo["startList"])} );
        </script>
      </body>
    </html>

    Pullo,

    This is really perfect, you really saved me on my three days struggle to make it done. I'm seeing my teacher would be impressed to see this and I might get a high score on the result. I cant say more, even thanking you might not be enough. But many many thanks for your help, I'll keep in mind your advises on the proper usage of java scripting.


    Thanks again

    -- Juan


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
  •