SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 33
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How can I change a selected item in one select box based on a choice from another sel

    How can I change a selected item in one select box based on a choice from another select box?

    I am creating a form that you allows you to specify travel times.

    the first option is "single Trip" or "Return" based on your selection my current script hides or show certain info. eg.

    it shows for single only the "outward travel" fields.

    If return is selected it displays the fields for the Return Travel dates. each has 4 drop down lists, day, month, minutes and hour like so.

    Date Starts:

    Day | Month | Min | Hour

    Date Return:

    Day | Month | Min | Hour

    What I want to happen is, when a person selects Return I want the values from the start fields to be set as the selected values of the return fields.

    any help would be apprciated as I have spent a few hours looking and am now banging my poor head

    Cheers

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi partylancer, Welcome to SPF!

    Without seeing the html I can only give general advice. Can you give us a link to the page, or post the relevant html?

    Here's the general idea:
    Code:
    function tripTypeOnChange()
    {
      var f = document.forms['tripInfoForm'];
      f.rDay.selectedIndex = f.sDay.selectedIndex;
      f.rMonth.selectedIndex = f.sMonth.selectedIndex;
      etc...
    }

  3. #3
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again

    First here is the current script I am using to hide show the "return fields", this is followed by the html. I only want the Dates and times in the "return fields" to update when the "return" option is selected.

    I have also attached an image

    Code:
    // JavaScript Document
    
    	document.write("<style type=\"text/css\"> #retCH { display:none; }<\/style> ");
    
    function changeThis(dropdown)
    {
    	var myindex  = dropdown.selectedIndex;
    	var SelValue = dropdown.options[myindex].value;
    	
    	
    	if(SelValue!="return")
    	{
    		document.getElementById("retCH").style.display = "none";
    	}
    	else
    	{
    		document.getElementById("retCH").style.display = "block";
    
    	}
    
    		if(document.form1.out_day[i].value == “value”) {
    		document.form1.retHourField[i].selected = true;}
    	
    }
    Here is the HTML

    Code:
    <form action="#" id="form1" name="form1">
    
    <label for="sing_ret" style="width:auto;">Journey type</label><select id="sing_ret" name="sing_ret" onchange="changeThis(this.form.sing_ret)"><option value="single" selected>Single</option><option value="return">Return</option><option value="open">Open return</option></select>
    
    <hr />
    <!-- -->
    
    <fieldset>
    <legend>Outward</legend>
    
    <label for="out_day">day</label>
    <select name="out_day" id="out_day">
    
                    <option value="1">01 </option>
                    <option value="2">02 </option>
    
                    <option value="3">03 </option>
                    <option value="4">04 </option>
                    <option value="5">05 </option>
                    <option value="6">06 </option>
                    <option value="7">07 </option>
                    <option value="8">08 </option>
    
                    <option value="9">09 </option>
                    <option value="10">10 </option>
                    <option value="11">11 </option>
                    <option value="12">12 </option>
                    <option value="13">13 </option>
                    <option value="14">14 </option>
    
                    <option value="15">15 </option>
                    <option value="16">16 </option>
                    <option value="17">17 </option>
                    <option value="18">18 </option>
                    <option value="19">19 </option>
                    <option value="20">20 </option>
    
                    <option value="21">21 </option>
                    <option value="22">22 </option>
                    <option value="23">23 </option>
    		<option value="24">24 </option>
                    <option value="25">25 </option>
                    <option value="26">26 </option>
    
                    <option value="27">27 </option>
                    <option value="28">28 </option>
                    <option value="29">29 </option>
                    <option value="30">30 </option>
                    <option value="31">31 </option>
            </select>
    
    
    <label for="outmonthField">month</label>
    
    <select name="outmonthField" id="outmonthField">
    
                    <option value="jan">Jan</option>
                    <option value="feb">Feb</option>
                    <option value="mar">Mar</option>
                    <option value="apr">Apr</option>
    
                    <option value="may">May</option>
                    <option value="jun">Jun</option>
                    <option value="jul">Jul</option>
                    <option value="aug">Aug</option>
                    <option value="sep">Sep</option>
                    <option value="oct">Oct</option>
    
                    <option value="nov">Nov</option>
                    <option value="dec">Dec</option>
            </select>
    
    
    <label for="outHourField">hr</label>
    <select name="outHourField" id="outHourField">
    
                    <option>00 </option>
                    <option>01 </option>
                    <option>02 </option>
                    <option>03 </option>
                    <option>04 </option>
                    <option>05 </option>
    
                    <option>06 </option>
                    <option>07 </option>
                    <option>08 </option>
                    <option selected="selected">09 </option>
                    <option>10 </option>
                    <option>11 </option>
    
                    <option>12 </option>
                    <option>13 </option>
                    <option>14 </option>
                    <option>15 </option>
                    <option>16 </option>
                    <option>17 </option>
    
                    <option>18 </option>
                    <option>19 </option>
                    <option>20 </option>
                    <option>21 </option>
                    <option>22 </option>
                    <option>23 </option>
    
            </select>
    
    <label for="outMinuteField">min</label>
    <select name="outMinuteField" id="outMinuteField">
      <option selected="selected">00 </option>
      <option>15 </option>
      <option>30 </option>
      <option>45 </option>
    
    </select>
    
    
    </fieldset>
    <!-- -->
    
    <!-- -->
    <fieldset id="retCH">
    <legend>Return <noscript>(Leave blank for single journeys)</noscript></legend>
    
    <label for="return_day">day</label>
    <select name="return_day" id="return_day">
    
    <option selected="true">&nbsp;</option>
          <option value="1">01 </option>
                    <option value="2">02 </option>
                    <option value="3">03 </option>
                    <option value="4">04 </option>
                    <option value="5">05 </option>
                    <option value="6">06 </option>
    
                    <option value="7">07 </option>
                    <option value="8">08 </option>
                    <option value="9">09 </option>
                    <option value="10">10 </option>
                    <option value="11">11 </option>
                    <option value="12">12 </option>
    
                    <option value="13">13 </option>
                    <option value="14">14 </option>
                    <option value="15">15 </option>
                    <option value="16">16 </option>
                    <option value="17">17 </option>
                    <option value="18">18 </option>
    
                    <option value="19">19 </option>
                    <option value="20">20 </option>
                    <option value="21">21 </option>
                    <option value="22">22 </option>
                    <option value="23">23 </option>
    		<option value="24">24 </option>
    
                    <option value="25">25 </option>
                    <option value="26">26 </option>
                    <option value="27">27 </option>
                    <option value="28">28 </option>
                    <option value="29">29 </option>
                    <option value="30">30 </option>
    
                    <option value="31">31 </option>
            </select>
    
    <label for="return_month">month</label>
    
    <select name="return_month" id="return_month">
    <option selected="true">&nbsp;</option>
                    <option>Jan</option>
                    <option>Feb</option>
    
                    <option>Mar</option>
                    <option>Apr</option>
                    <option>May</option>
                    <option>Jun</option>
                    <option>Jul</option>
                    <option>Aug</option>
    
                    <option>Sep</option>
                    <option>Oct</option>
                    <option>Nov</option>
                    <option>Dec</option>
            </select>
    
    
    <label for="return_hour">hr</label>
    <select name="return_hour" id="return_hour">
    <option selected="true">&nbsp;</option>
                    <option>00 </option>
                    <option>01 </option>
                    <option>02 </option>
                    <option>03 </option>
    
                    <option>04 </option>
                    <option>05 </option>
                    <option>06 </option>
                    <option>07 </option>
                    <option>08 </option>
                    <option>09 </option>
    
                    <option>10 </option>
                    <option>11 </option>
                    <option>12 </option>
                    <option>13 </option>
                    <option>14 </option>
                    <option>15 </option>
    
                    <option>16 </option>
                    <option>17 </option>
                    <option>18 </option>
                    <option>19 </option>
                    <option>20 </option>
                    <option>21 </option>
    
                    <option>22 </option>
                    <option>23 </option>
            </select>
    
    <label for="returnMinute">min</label><select name="returnMinute" id="returnMinute">
    <option selected="true">&nbsp;</option>
                    <option>00 </option>
                    <option>15 </option>
    
                    <option>30 </option>
                    <option>45 </option>
                  </select>
    
    </fieldset>
    <!-- -->
    <input name="GetTimes" type="submit" id="GetTimes" tabindex="850" value="Get train times" />
    
    
    
    </form>
    Attached Images Attached Images

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a little confusing with the day, month and hour selects all named outHourField/retHourField. Is that what you have to work with? Can we change them to something like outDay/retDay, outMonth/retMonth, outHour/retHour and outMinute/retMinute?

  5. #5
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah sorry about that, I kind of working on the fly here and being shoved code from other people, too many cooks

    Basically name it what every you like and i will fiddle with namign later

    Thanks for your input, greatly appreciated.

  6. #6
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hope this helps I have updated the names

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try the following. Note that, for this technique to work, corresponding Selects have to have the same options (so that their indeces correspond).
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <script type='text/javascript'>
    document.write("<style type=\"text/css\"> #retCH { display:none; }<\/style> ");
    xOnLoad(
      function() {
        var s = document.getElementById('sing_ret');
        if (s) s.onchange = changeThis;
      }
    );
    function changeThis()
    {
      if (this.options[this.selectedIndex].value != "return") {
        document.getElementById("retCH").style.display = "none";
      }
      else {
        document.getElementById("retCH").style.display = "block";
        var f = this.form;
        f.retDay.selectedIndex = f.outDay.selectedIndex + 1;
        f.retMonth.selectedIndex = f.outMonth.selectedIndex + 1;
        f.retHour.selectedIndex = f.outHour.selectedIndex + 1;
        f.retMinute.selectedIndex = f.outMinute.selectedIndex + 1;
      }
    }
    function xOnLoad(f) // http://cross-browser.com/
    {
      var o = window.onload;
      window.onload = typeof o == 'function' ? function(){o();f();} : f;
    }
    </script>
    </head>
    <body>
    
    <form action="#" id="form1" name="form1">
    
    <label for="sing_ret" style="width:auto;">Journey type</label>
    <select id="sing_ret" name="sing_ret">
    <option value="single" selected='true'>Single</option>
    <option value="return">Return</option>
    <option value="open">Open return</option></select>
    
    <hr />
    <!-- -->
    
    <fieldset>
    <legend>Outward</legend>
    
    <label for="outDay">day</label>
    <select name="outDay" id="outDay">
    <option value="1">01 </option>
    <option value="2">02 </option>
    <option value="3">03 </option>
    <option value="4">04 </option>
    <option value="5">05 </option>
    <option value="6">06 </option>
    <option value="7">07 </option>
    <option value="8">08 </option>
    <option value="9">09 </option>
    <option value="10">10 </option>
    <option value="11">11 </option>
    <option value="12">12 </option>
    <option value="13">13 </option>
    <option value="14">14 </option>
    <option value="15">15 </option>
    <option value="16">16 </option>
    <option value="17">17 </option>
    <option value="18">18 </option>
    <option value="19">19 </option>
    <option value="20">20 </option>
    <option value="21">21 </option>
    <option value="22">22 </option>
    <option value="23">23 </option>
    <option value="24">24 </option>
    <option value="25">25 </option>
    <option value="26">26 </option>
    <option value="27">27 </option>
    <option value="28">28 </option>
    <option value="29">29 </option>
    <option value="30">30 </option>
    <option value="31">31 </option>
    </select>
    
    
    <label for="outMonth">month</label>
    <select name="outMonth" id="outMonth">
    <option value="jan">Jan</option>
    <option value="feb">Feb</option>
    <option value="mar">Mar</option>
    <option value="apr">Apr</option>
    <option value="may">May</option>
    <option value="jun">Jun</option>
    <option value="jul">Jul</option>
    <option value="aug">Aug</option>
    <option value="sep">Sep</option>
    <option value="oct">Oct</option>
    <option value="nov">Nov</option>
    <option value="dec">Dec</option>
    </select>
    
    
    <label for="outHour">hr</label>
    <select name="outHour" id="outHour">
    <option>00 </option>
    <option>01 </option>
    <option>02 </option>
    <option>03 </option>
    <option>04 </option>
    <option>05 </option>
    <option>06 </option>
    <option>07 </option>
    <option>08 </option>
    <option selected="selected">09 </option>
    <option>10 </option>
    <option>11 </option>
    <option>12 </option>
    <option>13 </option>
    <option>14 </option>
    <option>15 </option>
    <option>16 </option>
    <option>17 </option>
    <option>18 </option>
    <option>19 </option>
    <option>20 </option>
    <option>21 </option>
    <option>22 </option>
    <option>23 </option>
    </select>
    
    <label for="outMinute">min</label>
    <select name="outMinute" id="outMinute">
    <option selected="selected">00 </option>
    <option>15 </option>
    <option>30 </option>
    <option>45 </option>
    </select>
    
    </fieldset>
    <!-- -->
    
    <!-- -->
    <fieldset id="retCH">
    <legend>Return <noscript>(Leave blank for single journeys)</noscript></legend>
    
    <label for="retDay">day</label>
    <select name="retDay" id="retDay">
    <option value="0">&nbsp;</option>
    <option value="1">01 </option>
    <option value="2">02 </option>
    <option value="3">03 </option>
    <option value="4">04 </option>
    <option value="5">05 </option>
    <option value="6">06 </option>
    <option value="7">07 </option>
    <option value="8">08 </option>
    <option value="9">09 </option>
    <option value="10">10 </option>
    <option value="11">11 </option>
    <option value="12">12 </option>
    <option value="13">13 </option>
    <option value="14">14 </option>
    <option value="15">15 </option>
    <option value="16">16 </option>
    <option value="17">17 </option>
    <option value="18">18 </option>
    <option value="19">19 </option>
    <option value="20">20 </option>
    <option value="21">21 </option>
    <option value="22">22 </option>
    <option value="23">23 </option>
    <option value="24">24 </option>
    <option value="25">25 </option>
    <option value="26">26 </option>
    <option value="27">27 </option>
    <option value="28">28 </option>
    <option value="29">29 </option>
    <option value="30">30 </option>
    <option value="31">31 </option>
    </select>
    
    <label for="retMonth">month</label>
    <select name="retMonth" id="retMonth">
    <option value="0">&nbsp;</option>
    <option value="jan">Jan</option>
    <option value="feb">Feb</option>
    <option value="mar">Mar</option>
    <option value="apr">Apr</option>
    <option value="may">May</option>
    <option value="jun">Jun</option>
    <option value="jul">Jul</option>
    <option value="aug">Aug</option>
    <option value="sep">Sep</option>
    <option value="oct">Oct</option>
    <option value="nov">Nov</option>
    <option value="dec">Dec</option>
    </select>
    
    
    <label for="retHour">hr</label>
    <select name="retHour" id="retHour">
    <option value="0">&nbsp;</option>
    <option>00 </option>
    <option>01 </option>
    <option>02 </option>
    <option>03 </option>
    <option>04 </option>
    <option>05 </option>
    <option>06 </option>
    <option>07 </option>
    <option>08 </option>
    <option>09 </option>
    <option>10 </option>
    <option>11 </option>
    <option>12 </option>
    <option>13 </option>
    <option>14 </option>
    <option>15 </option>
    <option>16 </option>
    <option>17 </option>
    <option>18 </option>
    <option>19 </option>
    <option>20 </option>
    <option>21 </option>
    <option>22 </option>
    <option>23 </option>
    </select>
    
    <label for="retMinute">min</label>
    <select name="retMinute" id="retMinute">
    <option value="0">&nbsp;</option>
    <option>00 </option>
    <option>15 </option>
    <option>30 </option>
    <option>45 </option>
    </select>
    
    </fieldset>
    <!-- -->
    <input name="GetTimes" type="submit" id="GetTimes" tabindex="850" value="Get train times" />
    
    </form>
    
    </body>
    </html>
    Last edited by MikeFoster; Feb 15, 2007 at 12:27. Reason: changed code per the next couple of posts

  8. #8
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I aint one to sit on my ****, so I have had a go

    I basically tried your code in my existing one and it seems to work (Great ). but I get a a number one lower. eg. if I select the 16th day and then select return, the return field shows the 15th.

    I believe this is because I have
    Code:
    <option selected="true">&nbsp;</option>
    as the first option for all return fields. unfortunately I can't remove that as the outward fields must always have something selected and the Return fields must have the option to select nothing.

    I am wondering if just using a -1 will work some how. how would I put this in the code?


    Code:
    // JavaScript Document
    
    	document.write("<style type=\"text/css\"> #retCH { display:none; }<\/style> ");
    
    function changeThis(dropdown)
    {
    	var myindex  = dropdown.selectedIndex;
    	var SelValue = dropdown.options[myindex].value;
    	var f = document.forms['form1'];
    	
    	if(SelValue!="return")
    	{
    		document.getElementById("retCH").style.display = "none";
    	}
    	else
    	{
    		document.getElementById("retCH").style.display = "block";
    		f.return_day.selValue = f.out_day.selectedIndex;
    	}
    	
    }

  9. #9
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol, you beat me to the post.

    corresponding Selects have to have the same options (so that their indeces correspond).
    this will be a problem as I have to have a blank option in the Return Fields so the user can select nothing if they want. but the outward fields must always have somthing selected?

    can I Minus the index by 1. ???

    other then the one empty space option. they should all be the same.

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can I Minus the index by 1. ???
    Yes, indeed. Good idea.
    Code:
        f.retDay.selectedIndex = f.outDay.selectedIndex + 1;
        f.retMonth.selectedIndex = f.outMonth.selectedIndex + 1;
        f.retHour.selectedIndex = f.outHour.selectedIndex + 1;
        f.retMinute.selectedIndex = f.outMinute.selectedIndex + 1;
    I have updated the code in my previous post.


  11. #11
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have given the code a go and it work perfectly.

    Thank you so much for helping Mike! I can give my poor head a rest for a while.

    Cheers!

  12. #12
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  13. #13
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again

    It has just occured to me that the script fails in one place. When I select "single" or "open return" there are still values set in "Return" which would affect the sending of the form.

    So I have made this change and it seems to work, but for peace of mind can someone please confirm there is nothing incorrect in how I have done this.

    Cheers.

    I have modified this line of Mikes code.

    Code:
      
    if (this.options[this.selectedIndex].value != "return") {
        document.getElementById("retCH").style.display = "none";
      }
    To this

    Code:
    if (this.options[this.selectedIndex].value != "return") {
        document.getElementById("retCH").style.display = "none";
        var f = this.form;
        f.retDay.selectedIndex = 0;
        f.retMonth.selectedIndex = 0;
        f.retHour.selectedIndex = 0;
        f.retMinute.selectedIndex = 0;
      }
    Not sure if there was a better way of doing that, but as long as it will not cause any problems. it doesn't seem to

    Here is the full code rewritten with above change.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <script type='text/javascript'>
    document.write("<style type=\"text/css\"> #retCH { display:none; }<\/style> ");
    xOnLoad(
      function() {
        var s = document.getElementById('sing_ret');
        if (s) s.onchange = changeThis;
      }
    );
    function changeThis()
    {
      if (this.options[this.selectedIndex].value != "return") {
        document.getElementById("retCH").style.display = "none";
        var f = this.form;
        f.retDay.selectedIndex = 0;
        f.retMonth.selectedIndex = 0;
        f.retHour.selectedIndex = 0;
        f.retMinute.selectedIndex = 0;
      }
      else {
        document.getElementById("retCH").style.display = "block";
        var f = this.form;
        f.retDay.selectedIndex = f.outDay.selectedIndex + 1;
        f.retMonth.selectedIndex = f.outMonth.selectedIndex + 1;
        f.retHour.selectedIndex = f.outHour.selectedIndex + 1;
        f.retMinute.selectedIndex = f.outMinute.selectedIndex + 1;
      }
    }
    function xOnLoad(f) // http://cross-browser.com/
    {
      var o = window.onload;
      window.onload = typeof o == 'function' ? function(){o();f();} : f;
    }
    </script>
    </head>
    <body>
    
    <form action="#" id="form1" name="form1">
    
    <label for="sing_ret" style="width:auto;">Journey type</label>
    <select id="sing_ret" name="sing_ret">
    <option value="single" selected='true'>Single</option>
    <option value="return">Return</option>
    <option value="open">Open return</option></select>
    
    <hr />
    <!-- -->
    
    <fieldset>
    <legend>Outward</legend>
    
    <label for="outDay">day</label>
    <select name="outDay" id="outDay">
    <option value="1">01 </option>
    <option value="2">02 </option>
    <option value="3">03 </option>
    <option value="4">04 </option>
    <option value="5">05 </option>
    <option value="6">06 </option>
    <option value="7">07 </option>
    <option value="8">08 </option>
    <option value="9">09 </option>
    <option value="10">10 </option>
    <option value="11">11 </option>
    <option value="12">12 </option>
    <option value="13">13 </option>
    <option value="14">14 </option>
    <option value="15">15 </option>
    <option value="16">16 </option>
    <option value="17">17 </option>
    <option value="18">18 </option>
    <option value="19">19 </option>
    <option value="20">20 </option>
    <option value="21">21 </option>
    <option value="22">22 </option>
    <option value="23">23 </option>
    <option value="24">24 </option>
    <option value="25">25 </option>
    <option value="26">26 </option>
    <option value="27">27 </option>
    <option value="28">28 </option>
    <option value="29">29 </option>
    <option value="30">30 </option>
    <option value="31">31 </option>
    </select>
    
    
    <label for="outMonth">month</label>
    <select name="outMonth" id="outMonth">
    <option value="jan">Jan</option>
    <option value="feb">Feb</option>
    <option value="mar">Mar</option>
    <option value="apr">Apr</option>
    <option value="may">May</option>
    <option value="jun">Jun</option>
    <option value="jul">Jul</option>
    <option value="aug">Aug</option>
    <option value="sep">Sep</option>
    <option value="oct">Oct</option>
    <option value="nov">Nov</option>
    <option value="dec">Dec</option>
    </select>
    
    
    <label for="outHour">hr</label>
    <select name="outHour" id="outHour">
    <option>00 </option>
    <option>01 </option>
    <option>02 </option>
    <option>03 </option>
    <option>04 </option>
    <option>05 </option>
    <option>06 </option>
    <option>07 </option>
    <option>08 </option>
    <option selected="selected">09 </option>
    <option>10 </option>
    <option>11 </option>
    <option>12 </option>
    <option>13 </option>
    <option>14 </option>
    <option>15 </option>
    <option>16 </option>
    <option>17 </option>
    <option>18 </option>
    <option>19 </option>
    <option>20 </option>
    <option>21 </option>
    <option>22 </option>
    <option>23 </option>
    </select>
    
    <label for="outMinute">min</label>
    <select name="outMinute" id="outMinute">
    <option selected="selected">00 </option>
    <option>15 </option>
    <option>30 </option>
    <option>45 </option>
    </select>
    
    </fieldset>
    <!-- -->
    
    <!-- -->
    <fieldset id="retCH">
    <legend>Return <noscript>(Leave blank for single journeys)</noscript></legend>
    
    <label for="retDay">day</label>
    <select name="retDay" id="retDay">
    <option value="0">&nbsp;</option>
    <option value="1">01 </option>
    <option value="2">02 </option>
    <option value="3">03 </option>
    <option value="4">04 </option>
    <option value="5">05 </option>
    <option value="6">06 </option>
    <option value="7">07 </option>
    <option value="8">08 </option>
    <option value="9">09 </option>
    <option value="10">10 </option>
    <option value="11">11 </option>
    <option value="12">12 </option>
    <option value="13">13 </option>
    <option value="14">14 </option>
    <option value="15">15 </option>
    <option value="16">16 </option>
    <option value="17">17 </option>
    <option value="18">18 </option>
    <option value="19">19 </option>
    <option value="20">20 </option>
    <option value="21">21 </option>
    <option value="22">22 </option>
    <option value="23">23 </option>
    <option value="24">24 </option>
    <option value="25">25 </option>
    <option value="26">26 </option>
    <option value="27">27 </option>
    <option value="28">28 </option>
    <option value="29">29 </option>
    <option value="30">30 </option>
    <option value="31">31 </option>
    </select>
    
    <label for="retMonth">month</label>
    <select name="retMonth" id="retMonth">
    <option value="0">&nbsp;</option>
    <option value="jan">Jan</option>
    <option value="feb">Feb</option>
    <option value="mar">Mar</option>
    <option value="apr">Apr</option>
    <option value="may">May</option>
    <option value="jun">Jun</option>
    <option value="jul">Jul</option>
    <option value="aug">Aug</option>
    <option value="sep">Sep</option>
    <option value="oct">Oct</option>
    <option value="nov">Nov</option>
    <option value="dec">Dec</option>
    </select>
    
    
    <label for="retHour">hr</label>
    <select name="retHour" id="retHour">
    <option value="0">&nbsp;</option>
    <option>00 </option>
    <option>01 </option>
    <option>02 </option>
    <option>03 </option>
    <option>04 </option>
    <option>05 </option>
    <option>06 </option>
    <option>07 </option>
    <option>08 </option>
    <option>09 </option>
    <option>10 </option>
    <option>11 </option>
    <option>12 </option>
    <option>13 </option>
    <option>14 </option>
    <option>15 </option>
    <option>16 </option>
    <option>17 </option>
    <option>18 </option>
    <option>19 </option>
    <option>20 </option>
    <option>21 </option>
    <option>22 </option>
    <option>23 </option>
    </select>
    
    <label for="retMinute">min</label>
    <select name="retMinute" id="retMinute">
    <option value="0">&nbsp;</option>
    <option>00 </option>
    <option>15 </option>
    <option>30 </option>
    <option>45 </option>
    </select>
    
    </fieldset>
    <!-- -->
    <input name="GetTimes" type="submit" id="GetTimes" tabindex="850" value="Get train times" />
    
    </form>
    
    </body>
    </html>

  14. #14
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent! Good work, partylancer

  15. #15
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I just made my life a lot harder.

    I now attempting/Playing/blatently failing to use the above script with a .net based CMS.

    unfortunately the ID tags are written something like this.

    Code:
    ID="prefix_module.control"
    for example

    Code:
    id="gfh_ctr1003_MyGenericForm_OutwardReturnDate.OutwardDateDay"
    This part still works fine, showing and hiding the "return date"

    Code:
      function() {
        var s = document.getElementById('gfh_ctr1003_MyGenericForm_OutwardReturnDate.JourneyTypeListBox');
        if (s) s.onchange = changeThis;
      }
    But this part really doesn't like having the extra "." in the ID.

    Code:
      else {
        document.getElementById("retCH").style.display = "block";
        var f = this.form;
        f.retDay.selectedIndex = f.gfh_ctr1003_MyGenericForm_OutwardReturnDate.OutwardDateDay.selectedIndex;
        f.retMonth.selectedIndex = f.outMonth.selectedIndex;
        f.retHour.selectedIndex = f.outHour.selectedIndex;
        f.retMinute.selectedIndex = f.outMinute.selectedIndex;
      }
    So is there a way around this or am i up the creek..... .

    I can only think I need to convert the ID to a variable or something, but am not sure how to put it together to spit out the correct info,

    Maybe something like this - or am I way off lol.
    Code:
    var outday = document.getElementById('gfh_ctr1003_MyGenericForm_OutwardReturnDate.OutwardDateDay');
    Again thanks for help so far Mike.

    Time to hit google and start searching .net and javascript

  16. #16
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If "gfh_ctr1003_MyGenericForm_OutwardReturnDate.OutwardDateDay" is the ID of the Select, then yes you're right about doing it this way:
    Code:
    document.getElementById('id of ret select').selectedIndex = document.getElementById('id of out select').selectedIndex;

  17. #17
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have finished the script now and tested it again it seems to work fine.

    A couple of questions:

    1. I left the "f." off the beginning of each one as it breaks the code when used. this was the correct thing to do?

    This:
    Code:
    f.document.getElementById('mybigform_OutwardReturnDate.ReturnDateDay').selectedIndex = 0;
    To this:
    Code:
    document.getElementById('mybigform_OutwardReturnDate.ReturnDateDay').selectedIndex = 0;
    2. now that we are using document.getElementById to grab the correct ID. does this make the whole var f = this.form; unnecessary. I have removed both instances of this in the code and it seems to still work? (left it in the below sample code)

    3. I am not sure what the line xOnLoad does (besides guessing) is there a link to a good example I should check out.


    Here is the new script:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <script type='text/javascript'>
    document.write("<style type=\"text/css\"> #retCH { display:none; }<\/style> ");
    xOnLoad(
      function() {
        var s = document.getElementById('mybigform_OutwardReturnDate.JourneyTypeListBox');
        if (s) s.onchange = changeThis;
      }
    );
    function changeThis()
    {
      if (this.options[this.selectedIndex].value != "return") {
        document.getElementById("retCH").style.display = "none";
        var f = this.form;
        document.getElementById('mybigform_OutwardReturnDate.ReturnDateDay').selectedIndex = 0;
        document.getElementById('mybigform_OutwardReturnDate.ReturnDateMonth').selectedIndex = 0;
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour').selectedIndex = 0;
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute').selectedIndex = 0;
      }
      else {
        document.getElementById("retCH").style.display = "block";
        var f = this.form;
        document.getElementById('mybigform_OutwardReturnDate.ReturnDateDay').selectedIndex =             
    
        document.getElementById('mybigform_OutwardReturnDate.OutwardDateDay').selectedIndex + 1;
        document.getElementById('mybigform_OutwardReturnDate.ReturnDateMonth').selectedIndex =             
    
        document.getElementById('mybigform_OutwardReturnDate.OutwardDateMonth').selectedIndex + 1;
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour').selectedIndex =             
    
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour').selectedIndex + 1;
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute').selectedIndex =             
    
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute').selectedIndex + 1;
      }
    }
    function xOnLoad(f) // http://cross-browser.com/
    {
      var o = window.onload;
      window.onload = typeof o == 'function' ? function(){o();f();} : f;
    }
    </script>
    </head>
    <body>
    
    <form action="#" id="form1" name="form1">
    
    <label for="mybigform_OutwardReturnDate.JourneyTypeListBox" style="width:auto;">Journey type</label>
    <select id="mybigform_OutwardReturnDate.JourneyTypeListBox" name="mybigform_OutwardReturnDate.JourneyTypeListBox">
    <option value="single" selected='true'>Single</option>
    <option value="return">Return</option>
    <option value="open">Open return</option></select>
    
    <hr />
    <!-- -->
    
    <fieldset>
    <legend>Outward</legend>
    
    <label for="mybigform_OutwardReturnDate.OutwardDateDay">day</label>
    <select name="mybigform_OutwardReturnDate.OutwardDateDay" id="mybigform_OutwardReturnDate.OutwardDateDay">
    <option value="1">01 </option>
    <option value="2">02 </option>
    <option value="3">03 </option>
    <option value="4">04 </option>
    <option value="5">05 </option>
    <option value="6">06 </option>
    <option value="7">07 </option>
    <option value="8">08 </option>
    <option value="9">09 </option>
    <option value="10">10 </option>
    <option value="11">11 </option>
    <option value="12">12 </option>
    <option value="13">13 </option>
    <option value="14">14 </option>
    <option value="15">15 </option>
    <option value="16">16 </option>
    <option value="17">17 </option>
    <option value="18">18 </option>
    <option value="19">19 </option>
    <option value="20">20 </option>
    <option value="21">21 </option>
    <option value="22">22 </option>
    <option value="23">23 </option>
    <option value="24">24 </option>
    <option value="25">25 </option>
    <option value="26">26 </option>
    <option value="27">27 </option>
    <option value="28">28 </option>
    <option value="29">29 </option>
    <option value="30">30 </option>
    <option value="31">31 </option>
    </select>
    
    
    <label for="mybigform_OutwardReturnDate.OutwardDateMonth">month</label>
    <select name="mybigform_OutwardReturnDate.OutwardDateMonth" id="mybigform_OutwardReturnDate.OutwardDateMonth">
    <option value="jan">Jan</option>
    <option value="feb">Feb</option>
    <option value="mar">Mar</option>
    <option value="apr">Apr</option>
    <option value="may">May</option>
    <option value="jun">Jun</option>
    <option value="jul">Jul</option>
    <option value="aug">Aug</option>
    <option value="sep">Sep</option>
    <option value="oct">Oct</option>
    <option value="nov">Nov</option>
    <option value="dec">Dec</option>
    </select>
    
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour">hr</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour" id="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour">
    <option>00 </option>
    <option>01 </option>
    <option>02 </option>
    <option>03 </option>
    <option>04 </option>
    <option>05 </option>
    <option>06 </option>
    <option>07 </option>
    <option>08 </option>
    <option selected="selected">09 </option>
    <option>10 </option>
    <option>11 </option>
    <option>12 </option>
    <option>13 </option>
    <option>14 </option>
    <option>15 </option>
    <option>16 </option>
    <option>17 </option>
    <option>18 </option>
    <option>19 </option>
    <option>20 </option>
    <option>21 </option>
    <option>22 </option>
    <option>23 </option>
    </select>
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute">min</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute" id="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute">
    <option selected="selected">00 </option>
    <option>15 </option>
    <option>30 </option>
    <option>45 </option>
    </select>
    
    </fieldset>
    <!-- -->
    
    <!-- -->
    <fieldset id="retCH">
    <legend>Return <noscript>(Leave blank for single journeys)</noscript></legend>
    
    <label for="mybigform_OutwardReturnDate.ReturnDateDay">day</label>
    <select name="mybigform_OutwardReturnDate.ReturnDateDay" id="mybigform_OutwardReturnDate.ReturnDateDay">
    <option value="0">&nbsp;</option>
    <option value="1">01 </option>
    <option value="2">02 </option>
    <option value="3">03 </option>
    <option value="4">04 </option>
    <option value="5">05 </option>
    <option value="6">06 </option>
    <option value="7">07 </option>
    <option value="8">08 </option>
    <option value="9">09 </option>
    <option value="10">10 </option>
    <option value="11">11 </option>
    <option value="12">12 </option>
    <option value="13">13 </option>
    <option value="14">14 </option>
    <option value="15">15 </option>
    <option value="16">16 </option>
    <option value="17">17 </option>
    <option value="18">18 </option>
    <option value="19">19 </option>
    <option value="20">20 </option>
    <option value="21">21 </option>
    <option value="22">22 </option>
    <option value="23">23 </option>
    <option value="24">24 </option>
    <option value="25">25 </option>
    <option value="26">26 </option>
    <option value="27">27 </option>
    <option value="28">28 </option>
    <option value="29">29 </option>
    <option value="30">30 </option>
    <option value="31">31 </option>
    </select>
    
    <label for="mybigform_OutwardReturnDate.ReturnDateMonth">month</label>
    <select name="mybigform_OutwardReturnDate.ReturnDateMonth" id="mybigform_OutwardReturnDate.ReturnDateMonth">
    <option value="0">&nbsp;</option>
    <option value="jan">Jan</option>
    <option value="feb">Feb</option>
    <option value="mar">Mar</option>
    <option value="apr">Apr</option>
    <option value="may">May</option>
    <option value="jun">Jun</option>
    <option value="jul">Jul</option>
    <option value="aug">Aug</option>
    <option value="sep">Sep</option>
    <option value="oct">Oct</option>
    <option value="nov">Nov</option>
    <option value="dec">Dec</option>
    </select>
    
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour">hr</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour" id="mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour">
    <option value="0">&nbsp;</option>
    <option>00 </option>
    <option>01 </option>
    <option>02 </option>
    <option>03 </option>
    <option>04 </option>
    <option>05 </option>
    <option>06 </option>
    <option>07 </option>
    <option>08 </option>
    <option>09 </option>
    <option>10 </option>
    <option>11 </option>
    <option>12 </option>
    <option>13 </option>
    <option>14 </option>
    <option>15 </option>
    <option>16 </option>
    <option>17 </option>
    <option>18 </option>
    <option>19 </option>
    <option>20 </option>
    <option>21 </option>
    <option>22 </option>
    <option>23 </option>
    </select>
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute">min</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute" id="mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute">
    <option value="0">&nbsp;</option>
    <option>00 </option>
    <option>15 </option>
    <option>30 </option>
    <option>45 </option>
    </select>
    
    </fieldset>
    <!-- -->
    <input name="GetTimes" type="submit" id="GetTimes" tabindex="850" value="Get train times" />
    
    </form>
    
    </body>
    </html>

  18. #18
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok just to make this challenging, I am now looking at using radio buttons to select single or return.

    Code:
    <input type="radio" id="mybigform_OutwardReturnDate.JourneyTypesing" name="mybigform_OutwardReturnDate.JourneyTypeListBox" value="single" checked/>
    <label for="sing">Single/open</label>
    
    <input type="radio" id="mybigform_OutwardReturnDate.JourneyTyperet" name="mybigform_OutwardReturnDate.JourneyTypeListBox" value="return" />
    <label for="ret">Return</label>
    But I am not sure how to rewrite the show hide part.

    here is how the code has been changed, but it fails as the "show/hide" part doesn't work.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <script type='text/javascript'>
    document.write("<style type=\"text/css\"> #retCH { display:none; }<\/style> ");
    xOnLoad(
      function() {
        var s = document.getElementById('mybigform_OutwardReturnDate.JourneyTyperet');
        if (s) s.onchange = changeThis;
      }
    );
    function changeThis()
    {
      if (this.options[this.selectedIndex].value != "return") {
        document.getElementById("retCH").style.display = "none";
        var f = this.form;
        document.getElementById('mybigform_OutwardReturnDate.ReturnDateDay').selectedIndex = 0;
        document.getElementById('mybigform_OutwardReturnDate.ReturnDateMonth').selectedIndex = 0;
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour').selectedIndex = 0;
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute').selectedIndex = 0;
      }
      else {
        document.getElementById("retCH").style.display = "block";
        var f = this.form;
        document.getElementById('mybigform_OutwardReturnDate.ReturnDateDay').selectedIndex =                 
    
    document.getElementById('mybigform_OutwardReturnDate.OutwardDateDay').selectedIndex + 1;
        document.getElementById('mybigform_OutwardReturnDate.ReturnDateMonth').selectedIndex =                 
    
    document.getElementById('mybigform_OutwardReturnDate.OutwardDateMonth').selectedIndex + 1;
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour').selectedIndex =                 
    
    document.getElementById('mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour').selectedIndex + 1;
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute').selectedIndex =                 
    
    document.getElementById('mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute').selectedIndex + 1;
      }
    }
    function xOnLoad(f) // http://cross-browser.com/
    {
      var o = window.onload;
      window.onload = typeof o == 'function' ? function(){o();f();} : f;
    }
    </script>
    </head>
    <body>
    
    <form action="#" id="form1" name="form1">
    
    
    
    <input type="radio" id="mybigform_OutwardReturnDate.JourneyTypesing" name="mybigform_OutwardReturnDate.JourneyTypeListBox" value="single" 
    
    checked/>
    <label for="sing">Single/open</label>
    
    <input type="radio" id="mybigform_OutwardReturnDate.JourneyTyperet" name="mybigform_OutwardReturnDate.JourneyTypeListBox" value="return" />
    <label for="ret">Return</label>
    
    <hr />
    <!-- -->
    
    <fieldset>
    <legend>Outward</legend>
    
    <label for="mybigform_OutwardReturnDate.OutwardDateDay">day</label>
    <select name="mybigform_OutwardReturnDate.OutwardDateDay" id="mybigform_OutwardReturnDate.OutwardDateDay">
    <option value="1">01 </option>
    <option value="2">02 </option>
    <option value="3">03 </option>
    <option value="4">04 </option>
    <option value="5">05 </option>
    <option value="6">06 </option>
    <option value="7">07 </option>
    <option value="8">08 </option>
    <option value="9">09 </option>
    <option value="10">10 </option>
    <option value="11">11 </option>
    <option value="12">12 </option>
    <option value="13">13 </option>
    <option value="14">14 </option>
    <option value="15">15 </option>
    <option value="16">16 </option>
    <option value="17">17 </option>
    <option value="18">18 </option>
    <option value="19">19 </option>
    <option value="20">20 </option>
    <option value="21">21 </option>
    <option value="22">22 </option>
    <option value="23">23 </option>
    <option value="24">24 </option>
    <option value="25">25 </option>
    <option value="26">26 </option>
    <option value="27">27 </option>
    <option value="28">28 </option>
    <option value="29">29 </option>
    <option value="30">30 </option>
    <option value="31">31 </option>
    </select>
    
    
    <label for="mybigform_OutwardReturnDate.OutwardDateMonth">month</label>
    <select name="mybigform_OutwardReturnDate.OutwardDateMonth" id="mybigform_OutwardReturnDate.OutwardDateMonth">
    <option value="jan">Jan</option>
    <option value="feb">Feb</option>
    <option value="mar">Mar</option>
    <option value="apr">Apr</option>
    <option value="may">May</option>
    <option value="jun">Jun</option>
    <option value="jul">Jul</option>
    <option value="aug">Aug</option>
    <option value="sep">Sep</option>
    <option value="oct">Oct</option>
    <option value="nov">Nov</option>
    <option value="dec">Dec</option>
    </select>
    
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour">hr</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour" id="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour">
    <option>00 </option>
    <option>01 </option>
    <option>02 </option>
    <option>03 </option>
    <option>04 </option>
    <option>05 </option>
    <option>06 </option>
    <option>07 </option>
    <option>08 </option>
    <option selected="selected">09 </option>
    <option>10 </option>
    <option>11 </option>
    <option>12 </option>
    <option>13 </option>
    <option>14 </option>
    <option>15 </option>
    <option>16 </option>
    <option>17 </option>
    <option>18 </option>
    <option>19 </option>
    <option>20 </option>
    <option>21 </option>
    <option>22 </option>
    <option>23 </option>
    </select>
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute">min</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute" id="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute">
    <option selected="selected">00 </option>
    <option>15 </option>
    <option>30 </option>
    <option>45 </option>
    </select>
    
    </fieldset>
    <!-- -->
    
    <!-- -->
    <fieldset id="retCH">
    <legend>Return <noscript>(Leave blank for single journeys)</noscript></legend>
    
    <label for="mybigform_OutwardReturnDate.ReturnDateDay">day</label>
    <select name="mybigform_OutwardReturnDate.ReturnDateDay" id="mybigform_OutwardReturnDate.ReturnDateDay">
    <option value="0">&nbsp;</option>
    <option value="1">01 </option>
    <option value="2">02 </option>
    <option value="3">03 </option>
    <option value="4">04 </option>
    <option value="5">05 </option>
    <option value="6">06 </option>
    <option value="7">07 </option>
    <option value="8">08 </option>
    <option value="9">09 </option>
    <option value="10">10 </option>
    <option value="11">11 </option>
    <option value="12">12 </option>
    <option value="13">13 </option>
    <option value="14">14 </option>
    <option value="15">15 </option>
    <option value="16">16 </option>
    <option value="17">17 </option>
    <option value="18">18 </option>
    <option value="19">19 </option>
    <option value="20">20 </option>
    <option value="21">21 </option>
    <option value="22">22 </option>
    <option value="23">23 </option>
    <option value="24">24 </option>
    <option value="25">25 </option>
    <option value="26">26 </option>
    <option value="27">27 </option>
    <option value="28">28 </option>
    <option value="29">29 </option>
    <option value="30">30 </option>
    <option value="31">31 </option>
    </select>
    
    <label for="mybigform_OutwardReturnDate.ReturnDateMonth">month</label>
    <select name="mybigform_OutwardReturnDate.ReturnDateMonth" id="mybigform_OutwardReturnDate.ReturnDateMonth">
    <option value="0">&nbsp;</option>
    <option value="jan">Jan</option>
    <option value="feb">Feb</option>
    <option value="mar">Mar</option>
    <option value="apr">Apr</option>
    <option value="may">May</option>
    <option value="jun">Jun</option>
    <option value="jul">Jul</option>
    <option value="aug">Aug</option>
    <option value="sep">Sep</option>
    <option value="oct">Oct</option>
    <option value="nov">Nov</option>
    <option value="dec">Dec</option>
    </select>
    
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour">hr</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour" id="mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour">
    <option value="0">&nbsp;</option>
    <option>00 </option>
    <option>01 </option>
    <option>02 </option>
    <option>03 </option>
    <option>04 </option>
    <option>05 </option>
    <option>06 </option>
    <option>07 </option>
    <option>08 </option>
    <option>09 </option>
    <option>10 </option>
    <option>11 </option>
    <option>12 </option>
    <option>13 </option>
    <option>14 </option>
    <option>15 </option>
    <option>16 </option>
    <option>17 </option>
    <option>18 </option>
    <option>19 </option>
    <option>20 </option>
    <option>21 </option>
    <option>22 </option>
    <option>23 </option>
    </select>
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute">min</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute" id="mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute">
    <option value="0">&nbsp;</option>
    <option>00 </option>
    <option>15 </option>
    <option>30 </option>
    <option>45 </option>
    </select>
    
    </fieldset>
    <!-- -->
    <input name="GetTimes" type="submit" id="GetTimes" tabindex="850" value="Get train times" />
    
    </form>
    
    </body>
    </html>

  19. #19
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. Yes.

    2. Yes, you can remove it.

    3. xOnLoad is a very simple little function that I sometimes use in demos and answering forum questions. Mainly, I intend for it to remind people not to forget to properly manage all code that needs to run when the "load" event occurs. I used to just assume that people would do this - but they don't.

    If this is the only code you have that needs to run 'onload', then you can use the following, and then will not need the xOnLoad function.
    Code:
    window.onload = function()
    {
      var s = document.getElementById('mybigform_OutwardReturnDate.JourneyTyperet');
      if (s) s.onchange = changeThis;
    };
    4. Haven't had a chance to look at your latest post - will soon.

  20. #20
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    3. xOnLoad is a very simple little function that I sometimes use in demos and answering forum questions. Mainly, I intend for it to remind people not to forget to properly manage all code that needs to run when the "load" event occurs. I used to just assume that people would do this - but they don't.
    Cheers for that, as you have probably guessed my Javascript coding aint that good. So I very likely fall in to that group of people


    Thought I might be heading the right way with this but doesn't work so still scratching my head :P

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    
    
    
    
    
    <script type='text/javascript'>
    document.write("<style type=\"text/css\"> #retCH { display:none; }<\/style> ");
    xOnLoad(
      function() {
        var s = document.getElementById('mybigform_OutwardReturnDate.JourneyTypesing');
        if (s) s.onchange = hideThis;
      }
      function() {
        var t = document.getElementById('mybigform_OutwardReturnDate.JourneyTyperet');
        if (t) t.onchange = showThis;
      }
    );
    
    
    
    function hidethis()
    {
         if (this.options[this.selectedIndex].value = "single")
         {
        document.getElementById("retCH").style.display = "none";
        document.getElementById('mybigform_OutwardReturnDate.ReturnDateDay').selectedIndex = 0;
        document.getElementById('mybigform_OutwardReturnDate.ReturnDateMonth').selectedIndex = 0;
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour').selectedIndex = 0;
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute').selectedIndex = 0;
         }
    }
    
    
    function showthis()
    {
         if (this.options[this.selectedIndex].value = "return")
         {
        document.getElementById("retCH").style.display = "block";
        document.getElementById('mybigform_OutwardReturnDate.ReturnDateDay').selectedIndex =             
        document.getElementById('mybigform_OutwardReturnDate.OutwardDateDay').selectedIndex + 1;
        document.getElementById('mybigform_OutwardReturnDate.ReturnDateMonth').selectedIndex =             
        document.getElementById('mybigform_OutwardReturnDate.OutwardDateMonth').selectedIndex + 1;
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour').selectedIndex =             
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour').selectedIndex + 1;
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute').selectedIndex =             
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute').selectedIndex + 1;
         }
    }
    
    
    function xOnLoad(f) 
    {
      var o = window.onload;
      window.onload = typeof o == 'function' ? function(){o();f();} : f;
    }
    </script>
    
    
    
    
    
    
    </head>
    <body>
    
    <form action="#" id="form1" name="form1">
    
    
    
    
    <input type="radio" id="mybigform_OutwardReturnDate.JourneyTypesing" name="JourneyTypeListBox" value="single" checked />
    <label for="sing">Single/open</label>
    
    <input type="radio" id="mybigform_OutwardReturnDate.JourneyTyperet" name="JourneyTypeListBox" value="return"/>
    <label for="ret">Return</label>
    
    
    
    <hr />
    <!-- -->
    
    <fieldset>
    <legend>Outward</legend>
    
    <label for="mybigform_OutwardReturnDate.OutwardDateDay">day</label>
    <select name="mybigform_OutwardReturnDate.OutwardDateDay" id="mybigform_OutwardReturnDate.OutwardDateDay">
    <option value="1">01 </option>
    <option value="2">02 </option>
    <option value="3">03 </option>
    <option value="4">04 </option>
    <option value="5">05 </option>
    <option value="6">06 </option>
    <option value="7">07 </option>
    <option value="8">08 </option>
    <option value="9">09 </option>
    <option value="10">10 </option>
    <option value="11">11 </option>
    <option value="12">12 </option>
    <option value="13">13 </option>
    <option value="14">14 </option>
    <option value="15">15 </option>
    <option value="16">16 </option>
    <option value="17">17 </option>
    <option value="18">18 </option>
    <option value="19">19 </option>
    <option value="20">20 </option>
    <option value="21">21 </option>
    <option value="22">22 </option>
    <option value="23">23 </option>
    <option value="24">24 </option>
    <option value="25">25 </option>
    <option value="26">26 </option>
    <option value="27">27 </option>
    <option value="28">28 </option>
    <option value="29">29 </option>
    <option value="30">30 </option>
    <option value="31">31 </option>
    </select>
    
    
    <label for="mybigform_OutwardReturnDate.OutwardDateMonth">month</label>
    <select name="mybigform_OutwardReturnDate.OutwardDateMonth" id="mybigform_OutwardReturnDate.OutwardDateMonth">
    <option value="jan">Jan</option>
    <option value="feb">Feb</option>
    <option value="mar">Mar</option>
    <option value="apr">Apr</option>
    <option value="may">May</option>
    <option value="jun">Jun</option>
    <option value="jul">Jul</option>
    <option value="aug">Aug</option>
    <option value="sep">Sep</option>
    <option value="oct">Oct</option>
    <option value="nov">Nov</option>
    <option value="dec">Dec</option>
    </select>
    
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour">hr</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour" id="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour">
    <option>00 </option>
    <option>01 </option>
    <option>02 </option>
    <option>03 </option>
    <option>04 </option>
    <option>05 </option>
    <option>06 </option>
    <option>07 </option>
    <option>08 </option>
    <option selected="selected">09 </option>
    <option>10 </option>
    <option>11 </option>
    <option>12 </option>
    <option>13 </option>
    <option>14 </option>
    <option>15 </option>
    <option>16 </option>
    <option>17 </option>
    <option>18 </option>
    <option>19 </option>
    <option>20 </option>
    <option>21 </option>
    <option>22 </option>
    <option>23 </option>
    </select>
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute">min</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute" id="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute">
    <option selected="selected">00 </option>
    <option>15 </option>
    <option>30 </option>
    <option>45 </option>
    </select>
    
    </fieldset>
    <!-- -->
    
    <!-- -->
    <fieldset id="retCH">
    <legend>Return <noscript>(Leave blank for single journeys)</noscript></legend>
    
    <label for="mybigform_OutwardReturnDate.ReturnDateDay">day</label>
    <select name="mybigform_OutwardReturnDate.ReturnDateDay" id="mybigform_OutwardReturnDate.ReturnDateDay">
    <option value="0">&nbsp;</option>
    <option value="1">01 </option>
    <option value="2">02 </option>
    <option value="3">03 </option>
    <option value="4">04 </option>
    <option value="5">05 </option>
    <option value="6">06 </option>
    <option value="7">07 </option>
    <option value="8">08 </option>
    <option value="9">09 </option>
    <option value="10">10 </option>
    <option value="11">11 </option>
    <option value="12">12 </option>
    <option value="13">13 </option>
    <option value="14">14 </option>
    <option value="15">15 </option>
    <option value="16">16 </option>
    <option value="17">17 </option>
    <option value="18">18 </option>
    <option value="19">19 </option>
    <option value="20">20 </option>
    <option value="21">21 </option>
    <option value="22">22 </option>
    <option value="23">23 </option>
    <option value="24">24 </option>
    <option value="25">25 </option>
    <option value="26">26 </option>
    <option value="27">27 </option>
    <option value="28">28 </option>
    <option value="29">29 </option>
    <option value="30">30 </option>
    <option value="31">31 </option>
    </select>
    
    <label for="mybigform_OutwardReturnDate.ReturnDateMonth">month</label>
    <select name="mybigform_OutwardReturnDate.ReturnDateMonth" id="mybigform_OutwardReturnDate.ReturnDateMonth">
    <option value="0">&nbsp;</option>
    <option value="jan">Jan</option>
    <option value="feb">Feb</option>
    <option value="mar">Mar</option>
    <option value="apr">Apr</option>
    <option value="may">May</option>
    <option value="jun">Jun</option>
    <option value="jul">Jul</option>
    <option value="aug">Aug</option>
    <option value="sep">Sep</option>
    <option value="oct">Oct</option>
    <option value="nov">Nov</option>
    <option value="dec">Dec</option>
    </select>
    
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour">hr</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour" id="mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour">
    <option value="0">&nbsp;</option>
    <option>00 </option>
    <option>01 </option>
    <option>02 </option>
    <option>03 </option>
    <option>04 </option>
    <option>05 </option>
    <option>06 </option>
    <option>07 </option>
    <option>08 </option>
    <option>09 </option>
    <option>10 </option>
    <option>11 </option>
    <option>12 </option>
    <option>13 </option>
    <option>14 </option>
    <option>15 </option>
    <option>16 </option>
    <option>17 </option>
    <option>18 </option>
    <option>19 </option>
    <option>20 </option>
    <option>21 </option>
    <option>22 </option>
    <option>23 </option>
    </select>
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute">min</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute" id="mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute">
    <option value="0">&nbsp;</option>
    <option>00 </option>
    <option>15 </option>
    <option>30 </option>
    <option>45 </option>
    </select>
    
    </fieldset>
    <!-- -->
    <input name="GetTimes" type="submit" id="GetTimes" tabindex="850" value="Get train times" />
    
    </form>
    
    </body>
    </html>

  21. #21
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK this seems to work. but is there a better way of doing it?
    I have noticed that when the page is Refreshed the the Return radio box remains selected instead of changing back to Single?

    I have tested in FF2.0, IE7, IE6, IE5.5 and IE5 script works in all.

    If the way I have done this is fine should i be doing anything else, ie.
    Code:
    window.onload = function()
    Thanks for the feedback and help

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    
    
    <script type="text/JavaScript">
    document.write("<style type=\"text/css\"> #retCH { display:none; }<\/style> ");
        <!--
            function showlayer(changeLayer) {
        document.getElementById(changeLayer).style.display = 'block';
        document.getElementById('mybigform_OutwardReturnDate.ReturnDateDay').selectedIndex =             
        document.getElementById('mybigform_OutwardReturnDate.OutwardDateDay').selectedIndex + 1;
        document.getElementById('mybigform_OutwardReturnDate.ReturnDateMonth').selectedIndex =             
        document.getElementById('mybigform_OutwardReturnDate.OutwardDateMonth').selectedIndex + 1;
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour').selectedIndex =             
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour').selectedIndex + 1;
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute').selectedIndex =             
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute').selectedIndex + 1;
            }
    
            function hidelayer(changeLayer) {
        document.getElementById(changeLayer).style.display = 'none';
        document.getElementById('mybigform_OutwardReturnDate.ReturnDateDay').selectedIndex = 0;
        document.getElementById('mybigform_OutwardReturnDate.ReturnDateMonth').selectedIndex = 0;
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour').selectedIndex = 0;
        document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute').selectedIndex = 0;
            }
        //-->
        </script>
    
    
    </head>
    <body>
    
    <form action="#" id="form1" name="form1">
    
    
    
    <input type="radio" id="mybigform_OutwardReturnDate.JourneyTypesing" name="JourneyTypeListBox" value="single" 
    
    onFocus="hidelayer('retCH');return false;" checked />
    <label for="sing">Single/open</label>
    
    <input type="radio" id="mybigform_OutwardReturnDate.JourneyTyperet" name="JourneyTypeListBox" value="return" 
    
    onFocus="showlayer('retCH');return true;""/>
    <label for="ret">Return</label>
    
    
    
    <hr />
    <!-- -->
    
    <fieldset>
    <legend>Outward</legend>
    
    <label for="mybigform_OutwardReturnDate.OutwardDateDay">day</label>
    <select name="mybigform_OutwardReturnDate.OutwardDateDay" id="mybigform_OutwardReturnDate.OutwardDateDay">
    <option value="1">01 </option>
    <option value="2">02 </option>
    <option value="3">03 </option>
    <option value="4">04 </option>
    <option value="5">05 </option>
    <option value="6">06 </option>
    <option value="7">07 </option>
    <option value="8">08 </option>
    <option value="9">09 </option>
    <option value="10">10 </option>
    <option value="11">11 </option>
    <option value="12">12 </option>
    <option value="13">13 </option>
    <option value="14">14 </option>
    <option value="15">15 </option>
    <option value="16">16 </option>
    <option value="17">17 </option>
    <option value="18">18 </option>
    <option value="19">19 </option>
    <option value="20">20 </option>
    <option value="21">21 </option>
    <option value="22">22 </option>
    <option value="23">23 </option>
    <option value="24">24 </option>
    <option value="25">25 </option>
    <option value="26">26 </option>
    <option value="27">27 </option>
    <option value="28">28 </option>
    <option value="29">29 </option>
    <option value="30">30 </option>
    <option value="31">31 </option>
    </select>
    
    
    <label for="mybigform_OutwardReturnDate.OutwardDateMonth">month</label>
    <select name="mybigform_OutwardReturnDate.OutwardDateMonth" id="mybigform_OutwardReturnDate.OutwardDateMonth">
    <option value="jan">Jan</option>
    <option value="feb">Feb</option>
    <option value="mar">Mar</option>
    <option value="apr">Apr</option>
    <option value="may">May</option>
    <option value="jun">Jun</option>
    <option value="jul">Jul</option>
    <option value="aug">Aug</option>
    <option value="sep">Sep</option>
    <option value="oct">Oct</option>
    <option value="nov">Nov</option>
    <option value="dec">Dec</option>
    </select>
    
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour">hr</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour" id="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour">
    <option>00 </option>
    <option>01 </option>
    <option>02 </option>
    <option>03 </option>
    <option>04 </option>
    <option>05 </option>
    <option>06 </option>
    <option>07 </option>
    <option>08 </option>
    <option selected="selected">09 </option>
    <option>10 </option>
    <option>11 </option>
    <option>12 </option>
    <option>13 </option>
    <option>14 </option>
    <option>15 </option>
    <option>16 </option>
    <option>17 </option>
    <option>18 </option>
    <option>19 </option>
    <option>20 </option>
    <option>21 </option>
    <option>22 </option>
    <option>23 </option>
    </select>
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute">min</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute" id="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute">
    <option selected="selected">00 </option>
    <option>15 </option>
    <option>30 </option>
    <option>45 </option>
    </select>
    
    </fieldset>
    <!-- -->
    
    <!-- -->
    <fieldset id="retCH">
    <legend>Return <noscript>(Leave blank for single journeys)</noscript></legend>
    
    <label for="mybigform_OutwardReturnDate.ReturnDateDay">day</label>
    <select name="mybigform_OutwardReturnDate.ReturnDateDay" id="mybigform_OutwardReturnDate.ReturnDateDay">
    <option value="0">&nbsp;</option>
    <option value="1">01 </option>
    <option value="2">02 </option>
    <option value="3">03 </option>
    <option value="4">04 </option>
    <option value="5">05 </option>
    <option value="6">06 </option>
    <option value="7">07 </option>
    <option value="8">08 </option>
    <option value="9">09 </option>
    <option value="10">10 </option>
    <option value="11">11 </option>
    <option value="12">12 </option>
    <option value="13">13 </option>
    <option value="14">14 </option>
    <option value="15">15 </option>
    <option value="16">16 </option>
    <option value="17">17 </option>
    <option value="18">18 </option>
    <option value="19">19 </option>
    <option value="20">20 </option>
    <option value="21">21 </option>
    <option value="22">22 </option>
    <option value="23">23 </option>
    <option value="24">24 </option>
    <option value="25">25 </option>
    <option value="26">26 </option>
    <option value="27">27 </option>
    <option value="28">28 </option>
    <option value="29">29 </option>
    <option value="30">30 </option>
    <option value="31">31 </option>
    </select>
    
    <label for="mybigform_OutwardReturnDate.ReturnDateMonth">month</label>
    <select name="mybigform_OutwardReturnDate.ReturnDateMonth" id="mybigform_OutwardReturnDate.ReturnDateMonth">
    <option value="0">&nbsp;</option>
    <option value="jan">Jan</option>
    <option value="feb">Feb</option>
    <option value="mar">Mar</option>
    <option value="apr">Apr</option>
    <option value="may">May</option>
    <option value="jun">Jun</option>
    <option value="jul">Jul</option>
    <option value="aug">Aug</option>
    <option value="sep">Sep</option>
    <option value="oct">Oct</option>
    <option value="nov">Nov</option>
    <option value="dec">Dec</option>
    </select>
    
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour">hr</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour" id="mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour">
    <option value="0">&nbsp;</option>
    <option>00 </option>
    <option>01 </option>
    <option>02 </option>
    <option>03 </option>
    <option>04 </option>
    <option>05 </option>
    <option>06 </option>
    <option>07 </option>
    <option>08 </option>
    <option>09 </option>
    <option>10 </option>
    <option>11 </option>
    <option>12 </option>
    <option>13 </option>
    <option>14 </option>
    <option>15 </option>
    <option>16 </option>
    <option>17 </option>
    <option>18 </option>
    <option>19 </option>
    <option>20 </option>
    <option>21 </option>
    <option>22 </option>
    <option>23 </option>
    </select>
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute">min</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute" id="mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute">
    <option value="0">&nbsp;</option>
    <option>00 </option>
    <option>15 </option>
    <option>30 </option>
    <option>45 </option>
    </select>
    
    </fieldset>
    <!-- -->
    <input name="GetTimes" type="submit" id="GetTimes" tabindex="850" value="Get train times" />
    
    </form>
    
    </body>
    </html>

  22. #22
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi partylancer,

    Great job!

    No, you don't need a 'load' listener now. But if you do want to get the Js out of the html, then use this:
    Code:
    window.onload = function() {
      document.getElementById('mybigform_OutwardReturnDate.JourneyTypesing').onfocus = function() {
        hidelayer('retCH');
        //return false;
      };
      document.getElementById('mybigform_OutwardReturnDate.JourneyTyperet').onfocus = function() {
        showlayer('retCH');
        //return false;
      };
    };
    Excellent work

  23. #23
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhhh. not sure how I am doing this wrong.

    must be showing my lack of experience with Javascript

    I tried inserting the javascript into an external .js file and linking that into the html page. but for some reason no matter how I use the new code you gave me it doesn't work.

    Would you be able to post a working example of both the Html and external .js file - sorry about that.

    Will keep trying and post if I get it working.

    Cheers

  24. #24
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>partylancer</title>
    <script type="text/javascript" src='partylancer.js'></script>
    </head>
    <body>
    
    <form action="#" id="form1" name="form1">
    <input type="radio" id="mybigform_OutwardReturnDate.JourneyTypesing" name="JourneyTypeListBox" value="single" checked>
    <label for="sing">Single/open</label>
    <input type="radio" id="mybigform_OutwardReturnDate.JourneyTyperet" name="JourneyTypeListBox" value="return">
    <label for="ret">Return</label>
    
    <hr>
    <!-- -->
    
    <fieldset>
    <legend>Outward</legend>
    
    <label for="mybigform_OutwardReturnDate.OutwardDateDay">day</label>
    <select name="mybigform_OutwardReturnDate.OutwardDateDay" id="mybigform_OutwardReturnDate.OutwardDateDay">
    <option value="1">01 </option>
    <option value="2">02 </option>
    <option value="3">03 </option>
    <option value="4">04 </option>
    <option value="5">05 </option>
    <option value="6">06 </option>
    <option value="7">07 </option>
    <option value="8">08 </option>
    <option value="9">09 </option>
    <option value="10">10 </option>
    <option value="11">11 </option>
    <option value="12">12 </option>
    <option value="13">13 </option>
    <option value="14">14 </option>
    <option value="15">15 </option>
    <option value="16">16 </option>
    <option value="17">17 </option>
    <option value="18">18 </option>
    <option value="19">19 </option>
    <option value="20">20 </option>
    <option value="21">21 </option>
    <option value="22">22 </option>
    <option value="23">23 </option>
    <option value="24">24 </option>
    <option value="25">25 </option>
    <option value="26">26 </option>
    <option value="27">27 </option>
    <option value="28">28 </option>
    <option value="29">29 </option>
    <option value="30">30 </option>
    <option value="31">31 </option>
    </select>
    
    
    <label for="mybigform_OutwardReturnDate.OutwardDateMonth">month</label>
    <select name="mybigform_OutwardReturnDate.OutwardDateMonth" id="mybigform_OutwardReturnDate.OutwardDateMonth">
    <option value="jan">Jan</option>
    <option value="feb">Feb</option>
    <option value="mar">Mar</option>
    <option value="apr">Apr</option>
    <option value="may">May</option>
    <option value="jun">Jun</option>
    <option value="jul">Jul</option>
    <option value="aug">Aug</option>
    <option value="sep">Sep</option>
    <option value="oct">Oct</option>
    <option value="nov">Nov</option>
    <option value="dec">Dec</option>
    </select>
    
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour">hr</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour" id="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour">
    <option>00 </option>
    <option>01 </option>
    <option>02 </option>
    <option>03 </option>
    <option>04 </option>
    <option>05 </option>
    <option>06 </option>
    <option>07 </option>
    <option>08 </option>
    <option selected="selected">09 </option>
    <option>10 </option>
    <option>11 </option>
    <option>12 </option>
    <option>13 </option>
    <option>14 </option>
    <option>15 </option>
    <option>16 </option>
    <option>17 </option>
    <option>18 </option>
    <option>19 </option>
    <option>20 </option>
    <option>21 </option>
    <option>22 </option>
    <option>23 </option>
    </select>
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute">min</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute" id="mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute">
    <option selected="selected">00 </option>
    <option>15 </option>
    <option>30 </option>
    <option>45 </option>
    </select>
    
    </fieldset>
    <!-- -->
    
    <!-- -->
    <fieldset id="retCH">
    <legend>Return <noscript>(Leave blank for single journeys)</noscript></legend>
    
    <label for="mybigform_OutwardReturnDate.ReturnDateDay">day</label>
    <select name="mybigform_OutwardReturnDate.ReturnDateDay" id="mybigform_OutwardReturnDate.ReturnDateDay">
    <option value="0">&nbsp;</option>
    <option value="1">01 </option>
    <option value="2">02 </option>
    <option value="3">03 </option>
    <option value="4">04 </option>
    <option value="5">05 </option>
    <option value="6">06 </option>
    <option value="7">07 </option>
    <option value="8">08 </option>
    <option value="9">09 </option>
    <option value="10">10 </option>
    <option value="11">11 </option>
    <option value="12">12 </option>
    <option value="13">13 </option>
    <option value="14">14 </option>
    <option value="15">15 </option>
    <option value="16">16 </option>
    <option value="17">17 </option>
    <option value="18">18 </option>
    <option value="19">19 </option>
    <option value="20">20 </option>
    <option value="21">21 </option>
    <option value="22">22 </option>
    <option value="23">23 </option>
    <option value="24">24 </option>
    <option value="25">25 </option>
    <option value="26">26 </option>
    <option value="27">27 </option>
    <option value="28">28 </option>
    <option value="29">29 </option>
    <option value="30">30 </option>
    <option value="31">31 </option>
    </select>
    
    <label for="mybigform_OutwardReturnDate.ReturnDateMonth">month</label>
    <select name="mybigform_OutwardReturnDate.ReturnDateMonth" id="mybigform_OutwardReturnDate.ReturnDateMonth">
    <option value="0">&nbsp;</option>
    <option value="jan">Jan</option>
    <option value="feb">Feb</option>
    <option value="mar">Mar</option>
    <option value="apr">Apr</option>
    <option value="may">May</option>
    <option value="jun">Jun</option>
    <option value="jul">Jul</option>
    <option value="aug">Aug</option>
    <option value="sep">Sep</option>
    <option value="oct">Oct</option>
    <option value="nov">Nov</option>
    <option value="dec">Dec</option>
    </select>
    
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour">hr</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour" id="mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour">
    <option value="0">&nbsp;</option>
    <option>00 </option>
    <option>01 </option>
    <option>02 </option>
    <option>03 </option>
    <option>04 </option>
    <option>05 </option>
    <option>06 </option>
    <option>07 </option>
    <option>08 </option>
    <option>09 </option>
    <option>10 </option>
    <option>11 </option>
    <option>12 </option>
    <option>13 </option>
    <option>14 </option>
    <option>15 </option>
    <option>16 </option>
    <option>17 </option>
    <option>18 </option>
    <option>19 </option>
    <option>20 </option>
    <option>21 </option>
    <option>22 </option>
    <option>23 </option>
    </select>
    
    <label for="mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute">min</label>
    <select name="mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute" id="mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute">
    <option value="0">&nbsp;</option>
    <option>00 </option>
    <option>15 </option>
    <option>30 </option>
    <option>45 </option>
    </select>
    
    </fieldset>
    <!-- -->
    <input name="GetTimes" type="submit" id="GetTimes" tabindex="850" value="Get train times">
    
    </form>
    
    </body>
    </html>
    Javascript:
    Code:
    window.onload = function() {
      document.getElementById('mybigform_OutwardReturnDate.JourneyTypesing').onfocus = function() {
        hidelayer('retCH');
      };
      document.getElementById('mybigform_OutwardReturnDate.JourneyTyperet').onfocus = function() {
        showlayer('retCH');
      };
    };
    document.write("<style type=\"text/css\"> #retCH { display:none; }<\/style> ");
    function showlayer(changeLayer) {
      document.getElementById(changeLayer).style.display = 'block';
      document.getElementById('mybigform_OutwardReturnDate.ReturnDateDay').selectedIndex =             
      document.getElementById('mybigform_OutwardReturnDate.OutwardDateDay').selectedIndex + 1;
      document.getElementById('mybigform_OutwardReturnDate.ReturnDateMonth').selectedIndex =             
      document.getElementById('mybigform_OutwardReturnDate.OutwardDateMonth').selectedIndex + 1;
      document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour').selectedIndex =             
      document.getElementById('mybigform_OutwardReturnDate.LeaveAfterOutboundTimeHour').selectedIndex + 1;
      document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute').selectedIndex =             
      document.getElementById('mybigform_OutwardReturnDate.LeaveAfterOutboundTimeMinute').selectedIndex + 1;
    }
    function hidelayer(changeLayer) {
      document.getElementById(changeLayer).style.display = 'none';
      document.getElementById('mybigform_OutwardReturnDate.ReturnDateDay').selectedIndex = 0;
      document.getElementById('mybigform_OutwardReturnDate.ReturnDateMonth').selectedIndex = 0;
      document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeHour').selectedIndex = 0;
      document.getElementById('mybigform_OutwardReturnDate.LeaveAfterInboundTimeMinute').selectedIndex = 0;
    }

  25. #25
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks you!!!

    I swear I tried that, just how you have it written and it didn't work

    But a straight copy and paste has worked so no idea what I did wrong, but it works perfectly so again thank you for your time and patience


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
  •