Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    New Zealand
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Populate A Text Box Based On A Menu Selection

    Let me explain my situation...

    I have an event search option on a site, people can narrow their search results by entering a start and end date such as:

    Code:
    Search For Events Between:
    <input value="dd/mm/yy"> and <input value="dd/mm/yy">
    Now I also want to have a drop down that lists the next six months, lets say:

    Code:
    <select name="select">
    <option>January</option>
    <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    </select>
    What I would like is that when someone selects a month from the drop down list (say February), the start and end dates of the two input boxes is automatically filled in with the start and end dates of February (or what ever month is selected). So the boxes would look something like this:

    Code:
    Search For Events Between:
    <input value="01/02/04"> and <input value="31/02/04">
    My pages are in PHP so I can dynamically generate the form variables and dates, etc. My problem is that I don't know much javascript and have no idea where to start makeing a script like this.

    Any help is appreciated.

    Thanks
    eTheory - the theory of revolution

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Try something like below (you may remove the //comentaries,they are only for you to see what the code lines are there for:

    PHP Code:
    <html>
    <
    head>
    <
    script>
    function 
    bla(){
    //sets the value of selected index (0-selection.lenght)
    var sel document.forms[0].se.selectedIndex;
    //sets the value of month according to the selected index
    var mm '0'+sel;
    verify if a month is selected
    if (sel == 0){
    alert('choose a month, please!');
    document.forms[0].ini.value 'dd/mm/yy';
    document.forms[0].fin.value 'dd/mm/yy';
    return 
    false
    }
    //sets the last day for Jan, Mar, May
    else if (sel == || sel==|| sel==5){
    var 
    ff=31;
    }
    //sets the last day for Feb
    else if (sel == 2){
    var 
    ff 29;
    }
    //sets the last day for April, June
    else {
    var 
    ff 30;
    }

    //sets the values for the inputs
    var vini '01/'+mm+'/04';
    var 
    vfin ff+'/'+mm+'/04';
    document.forms[0].ini.value vini;
    document.forms[0].fin.value vfin;
    return 
    true;
    }
    </script>
    </head>

    <body>
    <form>
    <select name="se" onchange="return bla()">
    <option selected>select a month</option>
    <option>January</option>
    <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    </select>
    <br>
    <br>
    <input name="ini" value="dd/mm/yy"> and <input name ="fin" value="dd/mm/yy">
    </form>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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