is this possible?

javacript newbie

[cantona]

I have 3 date drop down select menus. One for day, month and year. But all of them have the name and ID of: Date[]
I know this would probably be easier if I named them different, but for this task that is not possible.

I want to auto-populate a text field below these selects with the date. So in other words, if I click in the text field, it will get all three Date[] values and populate the box.

Not sure if I can use getElementById() with an array...?

[Dabrowski]

You can't have 3 elements with the same ID.

I think you're confusing HTML <select> elements and Javascript array's here. getElementById will return a HTML element. The HTML element has numerous JavaScript properties, of which some may be arrays.

Let me show you, I'm guessing you have something like this...

<select id='day' name='date'> 
<option>1st  
<option>2nd  
<option>3rd  
<option>etc  
</select> 

<!-- I've given these options values so we can convert to a numberic date --> 
<select id='month' name='date'> 
<option value='1'>Jan 
<option value='2'>Feb  
<option value='3'>Mar  
<option>etc  
</select> 

<select id='year' name='date'> 
<option>2000 
<option>2001  
<option>2002  
<option>etc  
</select> 

<input id='thedate' name='thedate' type='text' onFocus='setTheDate()'> 

Note I've change the id's to be unique. This is a must, multiple ID's are not valid. However the name can be the same, but I'd like to see how you're handling this when the form is submitted.

These are all HTML elements, no mention of JavaScript yet apart from the onFocus on the input box? This instructs the browser to call the function 'setTheDate' when the box becomes active.

Now lets look at that function...

// Wrap this all in a function 
function setTheDate() { 
// We're looking up a single element by it's ID 
// If you have more than one, it *might* return the first one, or nothing at all 
var dayField = document.getElementById( "day"); 

// Now dayField is a JavaScript representation of the HTML element 
// One of it's properties tells us which option is selected: 
var daySelected = dayField.selectedIndex; 

// That's all we need, if we add 1 to this value, we'll get the day of month 
// We need to add 1 as the first entry will be 0 
var theDay = daySelected +1; 

// Now the month, start off the same but without adding 1... 
var monthField = document.getElementById( "month"); 
var monthSelected = monthField.selectedIndex; 

// monthField will also contain an array of Javascript objects 
// These objects will represent your <option> elements 
// The array is called 'options' 
var monthOption = monthField.options[ monthSelected]; 

// Because we assigned values to our options we can look this up now 
// using the value property of the Javascript object 
var theMonth = monthOption.value; 

// Now for the year, again start the same way... 
var yearField = document.getElementById( "year"); 
var yearSelected = yearField.selectedIndex; 
var yearOption = yearField.options[ yearOption]; 

// Now to look the year up we'll read the text from the option object 
// using the text property. 
// NOTE, this is very risky as we can't guarantee it won't contain a space 
// or other non numeric charater 
var theYear = yearOption.text; 

//Now to put it in your input box.... 
// Note you can access elements directly without having to look them up first 
// But for the most part it's easier to 
theDate.value = theDay +"/"+ theMonth +"/"+ theYear; 
} 

Hopefully that should do what you need!

[DrDoc]

I know this would probably be easier if I named them different, but for this task that is not possible.

I don't believe you :)

Why is it not possible to change them and make them different? You can keep the name attributes the way they are. It's only the IDs that must be changed.

[Dabrowski]

cantona, any luck?