JAVASCRIPT: I cant make the datetime picker run on my school project

javainbegginer · 01-24-2013, 04:39 AM

Hi Java Script Gurus.

I've been trying to figure out how to run the date_time picker java script but seems like it doesn'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 >
      <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" >
<tr>
   <td  ><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 ><p>Exceute</p></td>
   <td ><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" >
</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 ><p>Date Taken</p></td>
   <td  ><input size='5' type="text" name="SelectedDate" id="SelectedDate" class="datetimepicker"/>
   </td>
   </tr>
   <tr>
   <td ><p>Exceute</p></td>
   <td  ><input id="button2" type='button' name="bld_button2" disabled value='COMMIT' onclick="BuildAlert('build_2nd')")></td>
   </tr>
</table>
</form>
</body>
</html>

here is a sample of working date_time picker that that I want to insert in text box:

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

ButterflyMelissa · 01-25-2013, 01:40 PM

Umm...dont hate me for pointing this out...but we are not in the habit of helping out with homework. The aim of this type of projects is that you learn while struggling to the answer....

So, just as a matter of curiosity: just what have you done so far to make it work. If you're stuck on a copy-n-paste job, then this only means you have not gotten to the fundamentals yet...
I will NOT try to RTFM you and are eager to help...but if we serve a microwaveoven-solution (ready in a minute)...you may not learn anything, and subsequently fail some future tests, I for one wish you a brighter future...

Oh, welcome to the forums, by the way...and, yes, we'll try to help...where permitted...

BTW - thanks for being honest about the homework

Thor
Edit - I may have a clue: check the folders. Try to run it with the Python simple HTTPserver:

Quote:

python -m SimpleHTTPServer

and look at the feedback, if there's a 404 (or something to the like) chances are some stuff camnnot be found...