I want a textbox to be automatically filled in

JavaScript
1

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:


<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

Creating a Date Object

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


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:


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:


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>:


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!).

3

The Date object also allows you to parse a string-based date in to an appropriate value, so you can use the following instead:


var d = new Date(Date.parse('Jan 1, 2013'));
4

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)!

5

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:


var d = new Date(Date.parse('Jan 1, 2013'));

var d = new Date('Jan 1, 2013');