I have three drop down lists whose values are been copied to <h:inputHidden> components by the following JavaScript function:

function getBirthDate() {
    var months = document.getElementById("months")
    var hidden1 =  document.getElementById("formsignup:monthField");
    hidden1.value = months.options[months.selectedIndex].text;
    var days = document.getElementById("days");
    var hidden2 = document.getElementById("formsignup:dayField");
    hidden2.value = days.options[days.selectedIndex].value;
    var years = document.getElementById("years");
    var hidden3 = document.getElementById("formsignup:yearField");
    hidden3.value = years.options[years.selectedIndex].value;
}

Here are the three <h:inputHidden> components:

<h:inputHidden value="#{signupBean.month}" id="monthField"/>
<h:inputHidden value="#{signupBean.day}" id="dayField"/>
<h:inputHidden value="#{signupBean.year}" id="yearField"/>

This is the command button that is supposed to invoke the function that copies the values to the inputs and then submits them to the backing bean.

<h:commandButton image="images/images/signup1.png" 
     styleClass="joinnow" 
     id="joinus" action="#{signupBean.save}"
     onclick="getBirthDate()" />

But they arrive as null in the backing bean. How is this caused and how can I solve it?