SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I want a textbox to be automatically filled in

    Hi,

    Hopefully this makes sense but I what I want to happen is that when I select the date through the drop down menus for day, month and year, I want the semester textbox to automatically fill in the semester depending on the date chosen.

    e.g. If the user chose the date 23rd June 2012 from the drop down menus, then the semester textbox below should automatically be filled in with the semester 'Summer'. Is this actually possible in javascript?

    Below is the dates and semester:

    1st September - 30th November = Autumn
    1st December - 28th February = Winter
    1st March - 31st May = Spring
    1st June - 30th August = Summer


    Below is my form:

    Code:
    <form action="create_session.php" method="post">
                <table>
                <tr>
                <th>Date:</th>
                <td>Day</td>
                <td><select name="day" class="daysDrop">
                <option value=""></option>
    			<option value="1">1</option>
    			<option value="2">2</option>
    			<option value="3">3</option>
    			<option value="4">4</option>
    			<option value="5">5</option>
    			<option value="6">6</option>
    			<option value="7">7</option>
    			<option value="8">8</option>
    			<option value="9">9</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></td>
    			<td></td>
                <td>Month</td>
                <td><select name="month" class="monthsDrop">
                <option value=""></option>
    			<option value="January">January</option>
    			<option value="February">February</option>
    			<option value="March">March</option>
    			<option value="April">April</option>
    			<option value="May">May</option>
    			<option value="June">June</option>
    			<option value="July">July</option>
    			<option value="August">August</option>
    			<option value="September">September</option>
    			<option value="October">October</option>
    			<option value="November">November</option>
    			<option value="December">December</option>
    			</select></td>
    			<td></td>
                <td>Year</td>
                <td><select name="year" class="yearsDrop">
                <option value=""></option>
    			<option value="2012">2012</option>
    			<option value="2013">2013</option>
    			</select></td>
                </tr>
                </table>
                <p><strong>Semester:</strong> <input type="text" name="semester"></p>      <!-- Enter Semester here-->
            </form>

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Creating a Date Object

    You can make a new date object with the year, month, and day like so:

    Code JavaScript:
    var d = new Date(2013, 0, 1) // January 1st, 2013

    Note that you have to use numbers for months instead of their names, and that the numbers start at 0 (0=January, 1=February, etc). So in your case, when the user inputs a date and you try to make a Date object, you'll have to convert between the text name in your form and the number.

    If it were me, I would just change the "value" attribute of each <option> to be the number instead of the name. But you could also create a simple lookup table, if you prefer:

    Code JavaScript:
    var monthValues = {
        January: 0,
        February: 1,
        // ...
    };

    Comparing Date Objects

    One of the handy things about JS is that you can just compare two Date objects to each other, to see if one comes first. For example:

    Code JavaScript:
    var d1 = new Date(2013, 0, 1),
        d2 = new Date(2013, 0, 2);
     
    alert(d1 < d2); // alerts "true"

    You can use this to figure out which semester the user's date falls under. E.g., if the date is between September 1st and November 30th, 2012, then you can update the "semester" <input>'s "value" to "Autumn". (In order to get that <input> in the first place, by the way, you'll need to use "getElementsByName".)

    When does all this happen?

    All of the above suggestions assume that we have a complete date to work with: a day, a month, and a year. So you're going to want to monitor the "onchange" event of each <select> element. Whenever one is changed, check to see if any of them are still blank. If we have all three values, then let's go!

    Interesting factoid: The "change" event bubbles up. So instead of watching the "change" event on three different elements, you could just look for it on the <form>:

    Code JavaScript:
    function checkAllThree() {
        if (/* we have a day, month, and year value */) {
            // figure out which semester
        }
    }
     
    // event handler
    yourForm.onchange = checkAllThree;
     
    // OR: event listener with jQuery
    $(yourForm).change(checkAllThree);

    I kind of suck at explaining stuff.

    Don't be afraid to ask more questions about any of these points if you need more help (but do remember to include any code that you tried!).
    I'm the web overlord for Graphic Business Systems

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sdleihssirhc View Post
    Creating a Date Object

    You can make a new date object with the year, month, and day like so:

    Code JavaScript:
    var d = new Date(2013, 0, 1) // January 1st, 2013

    Note that you have to use numbers for months instead of their names, and that the numbers start at 0 (0=January, 1=February, etc). So in your case, when the user inputs a date and you try to make a Date object, you'll have to convert between the text name in your form and the number.
    The Date object also allows you to parse a string-based date in to an appropriate value, so you can use the following instead:

    Code JavaScript:
    var d = new Date(Date.parse('Jan 1, 2013'));
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I totally forgot about Date.parse... It's so much nicer than a lookup table (just keep in mind that Date.parse can be touchy)!
    I'm the web overlord for Graphic Business Systems

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sdleihssirhc View Post
    I totally forgot about Date.parse... It's so much nicer than a lookup table (just keep in mind that Date.parse can be touchy)!
    Yes, timezone issues do needs to be kept in mind, and tested for where appropriate.

    It's nice to know though that the following two statements end up as the same result:

    Code javascript:
    var d = new Date(Date.parse('Jan 1, 2013'));
     
    var d = new Date('Jan 1, 2013');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •