onchange date script

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Amos0907
    New Member
    • Mar 2007
    • 1
    #1

    onchange date script

    Dear All,
    I am a learner of Javascript. I got an assignment as below. Could anyone give me a suggestion for fixing the function of "onChangeColumn 4()".
    The original requirement of the start date of this practice is 1985 09 20.
    When user click different year and different month, then the "Index Number" will display different number. (actually, every season is the same index number".)
    I used a data hierarchy approach to program it, but it seems not working very well.
    If anyone can give me suggestion, I deeply appreciate.

    Best Wishes!

    Aleck

    -----------------------------------------------------------------------
    [HTML]<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>test</title>

    <style type="text/css">
    <!--
    body {
    background-color: #CCCCCC;
    }

    .style3 {
    font-size: 24px;
    font-weight: bold;
    }

    .style4 {
    color: #660000;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    }
    -->
    </style>

    <script>

    function node(name, child){
    this.name=name;
    this.child=chil d;
    }

    function dataHierarchy() {

    // before 1985
    var b1985=new Array();
    var i=0;
    b1985[i++]=new node(" ", [" "]);

    // 1985
    var y1985=new Array();
    var i=0;
    y1985[i++]=new node(" ", [" "]);
    y1985[i++]=new node("09", [" 71.3"]);
    y1985[i++]=new node("10", [" 72.7"]);
    y1985[i++]=new node("11", [" 72.7"]);
    y1985[i++]=new node("12", [" 72.7"]);

    // 1986
    var y1986=new Array();
    var i=0;
    y1986[i++]=new node(" ", [" "]);
    y1986[i++]=new node("01", [" 74.4"]);
    y1986[i++]=new node("02", [" 74.4"]);
    y1986[i++]=new node("03", [" 74.4"]);
    y1986[i++]=new node("04", [" 75.6"]);
    y1986[i++]=new node("05", [" 75.6"]);
    y1986[i++]=new node("06", [" 75.6"]);
    y1986[i++]=new node("07", [" 77.6"]);
    y1986[i++]=new node("08", [" 77.6"]);
    y1986[i++]=new node("09", [" 77.6"]);
    y1986[i++]=new node("10", [" 79.8"]);
    y1986[i++]=new node("11", [" 79.8"]);
    y1986[i++]=new node("12", [" 79.8"]);



    // year
    var output=new Array();
    var i=0;
    output[i++]=new node(" ", b1985);
    output[i++]=new node("1985", y1985);
    output[i++]=new node("1986", y1986);
    return(output);
    }
    dataTree=dataHi erarchy();

    //
    function onChangeColumn3 (){
    updatePath();
    }

    //
    function onChangeColumn2 (){
    form=document.t heForm;
    index1=form.col umn1.selectedIn dex;
    index2=form.col umn2.selectedIn dex;
    index3=form.col umn3.selectedIn dex;
    // Create options for column 3
    for (i=0;i<dataTree[index1].child[index2].child.length;i ++)
    form.column3.op tions[i]=new Option(dataTree[index1].child[index2].child[i], dataTree[index1].child[index2].child[i]);
    form.column3.op tions.length=da taTree[index1].child[index2].child.length;
    form.column4.va lue="";
    updatePath();
    }

    //
    function onChangeColumn1 () {
    form=document.t heForm;
    index1=form.col umn1.selectedIn dex;
    index2=form.col umn2.selectedIn dex;
    index3=form.col umn3.selectedIn dex;
    // Create options for column 2
    for (i=0;i<dataTree[index1].child.length;i ++)
    form.column2.op tions[i]=new Option(dataTree[index1].child[i].name, dataTree[index1].child[i].name);
    form.column2.op tions.length=da taTree[index1].child.length;
    // Clear column 3
    form.column3.op tions.length=0;
    form.column4.va lue="";
    updatePath();
    }

    //
    function updatePath(){
    form=document.t heForm;
    index1=form.col umn1.selectedIn dex;
    index2=form.col umn2.selectedIn dex;
    index3=form.col umn3.selectedIn dex;
    if ((index1>=0) && (index2>=0) && (index3>=0)) {
    text1=form.colu mn1.options[index1].text;
    text2=form.colu mn2.options[index2].text;
    text3=form.colu mn3.options[index3].text;
    form.path.value =text1+" ==> "+text2+" ==> "+text3;
    } else
    form.path.value ="";
    }

    function onChangeColumn4 (){
    node ();
    dataHierarchy() ;
    form=document.t heForm;
    index1=form.col umn1.selectedIn dex;
    index2=form.col umn2.selectedIn dex;

    if ((index2 == "09") && (index1 == "1985"))
    {
    for (var d=20; d <=30; d++)
    document.writel n("<option value=" + d + ">" + d + "</option>");
    }

    else {
    for (var d=1; d <=31; d++)
    document.writel n("<option value=" + d + ">" + d + "</option>");
    }


    }
    </script>
    </head>

    <body>
    <table width="94%" border="0" align="center">

    <tr>
    <td colspan="2">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </td>
    </tr>

    <tr>
    <td colspan="2">
    <form id="theForm" name="theForm" method="post" action="">
    <table width="341" border="0" align="center" cellpadding="3" cellspacing="3" bordercolor="#0 00000">
    <tr align="center" bgcolor="lightg rey">
    <td width="173" height="25" bgcolor="#99999 9" class="style4">
    <div align="center">
    <u>Date of Acquisition</u>
    </div>
    </td>
    <td width="147" bgcolor="#99999 9" class="style4">
    <div align="center">
    <u>Index Number</u>
    </div>
    </td>
    </tr>

    <tr bgcolor="white" >
    <td>
    <div align="center">
    <table align=center border=0>
    <tr>
    <td align=center>
    <select name="column1" onChange="onCha ngeColumn1();">
    <script>
    for (i=0; i<dataTree.leng th; i++)
    document.writel n("<option value=\""+dataT ree[i].name+"\">"+dat aTree[i].name);
    </script>
    </select>
    </td>

    <td align=center>
    <select name="column2" onChange="onCha ngeColumn2();">

    </select>
    </td>

    <td>

    <select name="column4">
    <option selected="selec ted"> </option>
    <script>
    onChangeColumn4 ();
    </script>
    </select>

    </td>


    <td align=center>
    <div align="center"> </div>
    </td>
    </tr>
    </table>
    </div>
    </td>
    <td>
    <div align="center">
    <select name="column3" size="1" onChange="onCha ngeColumn3();">
    </select>
    </div>
    </td>
    </tr>
    </table>


    </form>
    </td>
    </tr>
    </table>
    </body>
    </html>[/HTML]
    Last edited by acoder; Mar 14 '07, 09:30 AM. Reason: Code in tags
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      Changed title

        Comment

        • acoder
          Recognized Expert MVP
          • Nov 2006
          • 16032
          #3
          You can't call onChangeColumn4 like that. You will have to call it when one of the other select options onchange fires.

            Comment

            • mohsenhosseini
              New Member
              • Mar 2007
              • 28
              #4
              hi dear
              if your mean is , you want show the Data of selected day , so why you dont give the actual day Data like it : ?

              [HTML]
              y1986[i++]=new node("12", ["01"," 79.8"]);
              y1986[i++]=new node("12", ["02"," 75.5"]);
              y1986[i++]=new node("12", ["03"," 80.3"]);
              y1986[i++]=new node("12", ["10"," 71.2"]);
              y1986[i++]=new node("12", ["23"," 72.6"]);
              y1986[i++]=new node("12", ["30"," 70.8"]);
              [/HTML]

              best regards.
              mh

                Comment

                Previous template Next
                Working...