View Full Version : Date of Birth Drop-downs into 1 field

08-26-2010, 05:44 PM
I have a date of birth drop down for 'Day', 'Month' and a text field for Year.

How can I get the select value of the drop down and year text field into a single text field, separated by '-'?

The single text field would need to update if someone changed the drop down / year selections.

Hope someone can help - I'm stumped! :)

08-26-2010, 08:31 PM
Hope this code will help you


function updateDate(){

var date = document.getElementById("date").value;
var month = document.getElementById("month").value;
var year = document.getElementById("year").value;

if(year == ""){
alert("Enter Year");

alert("Year should be numeric");

if(year.length != 4){
alert("Enter valid Year");

document.getElementById("result").value = date + "-" + month + "-" + year;





Date: <select id = "date">
<option value = "01">01</option>
<option value = "02">02</option>
<option value = "03">03</option>
<option value = "04">04</option>
<option value = "05">05</option>
<option value = "06">06</option>
<option value = "07">07</option>
<option value = "08">08</option>
<option value = "09">09</option>
<option value = "10">10</option>


Month: <select id = "month">
<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>


Year <input type = "text" id = "year" value = "2010" />


<input type = "button" onClick = "updateDate()" value = "Update" />

<input type = "text" id = "result" />


Old Pedant
08-26-2010, 08:56 PM
I *might* mildly disagree with Jolly.

If you are going to send your <form> fields to some server code for processing, and you want the server code to be able to read those "raw" dropdown (and text field, for year) values, then you need to give them names!! Fields without names are not sent on to the server.

In which case, instead of using document.getElementById("xxx").value to get those form field values, you would be better off using document.formname.fieldname.value

HOWEVER... If you do *not* want the fields to be sent to the server--if you only want the "results" field to be sent to the server--then Jolly's answer is exactly correct: Only give the fields IDs (no names) and they won't be sent.

This also points out the fact that *NONE* of those field's in Jolly's <form> will be sent to the server. I would think that at a minimum he should have done

<form name="whatever" ...>
<input type="text" id="result" name="result" />

The lack of a <form> would also prevent the info from being sent to the server, of course.

And then I would argue that, in that case, Jolly should have used document.whatever.result.value to put the result in place (just to make sure the "result" field *has* a name, so it will be sent to the server). I dislike giving fields both names and ids unless there is a pretty good reason. (Typically, the only reason is so that they can be the target of a <label for="someid"> ... but of course creating fields that won't be sent to the server is another reason.)

08-26-2010, 09:40 PM
I answered to the question asked by htcilt. If he would have also asked as how do I send the value to the server, I would have definitely added a form tag and attribute name to the result field.

Old Pedant
08-26-2010, 09:55 PM
LOL! Well, that's why my handle is "Old Pedant".

(You'll notice I said I *might* disagree with you...and only mildly at that. Depends on his ultimate aim.)

08-27-2010, 09:23 AM
Thanks for the replies - exactly what I'm after :)

Dont worry guys, I should have been clearer in my question. Only the result field (combination of Day drop-down, Month drop-down and year text input) will be sent to the server/database.

Thanks again.