Feeding JavaScript variables into form fields on submit

Question

I've got this almost working but can't quite complete it. I have a jQuery datepicker on a reservation page that feeds into an "Arrival" field as mm/dd/yyyy. I am using JavaScript to split that into separate mm, dd, and yyyy values, and I am now trying to feed these values back into the Month, Day and Year fields on the form before the form is posted to a third-party processing site.

I can successfully assign values to these fields using JavaScript, but my challenge is making this happen after the submit button has been hit, since I need it to carry the date that the user selected.

To give you all the relevant pieces, here's my submit button:

<input type='submit' onclick='toProcess()' name="submitButton" id='submitButton'
value='Check Availability' />

Here's the function (that does run as it should when the Submit button is clicked) to take the date and split it into the three separate values:

function toProcess(){
    var date = document.getElementById("Arrival").value;
    var splitDate = date.split("/");
    var arrivalMonth = splitDate[0];
    var arrivalDay = splitDate[1];
    var arrivalYear = splitDate[2];
    return [arrivalMonth, arrivalDay, arrivalYear];
}

And here's where I take the returned values to create variables to feed back into the form:

var newDates = toProcess();
arrivalMonth = newDates[0];
arrivalDay = newDates[1];
arrivalYear = newDates[2];

Up to this point, everything works without any problem. By using alerts I've been able to see that the values are definitely feeding through up to this point. But I just haven't been able to get those values to now feed back into the form.

I'm trying to do so using this:

document.getElementById("Month").value = arrivalMonth;
document.getElementById("Day").value =  arrivalDay;
document.getElementById("Year").value =  arrivalYear;

And this approach works fine if I use variables that existed before the Submit button was hit. I just can't get the new values to work.

I suspect that the problem is that, while the function is being properly called by clicking the Submit button, the elements following it are not being executed then, since they're outside the function. I just haven't been able to figure out how to send those values back to the form fields from inside the function.

Have I explained that clearly? Any help on this would be greatly appreciated.

Answer 1

So basically, on clicking the submit button, the output that you have ready is not being displayed in the desired field.

Could you make a fiddle out of it?

Also, one problem I faced when in the past was that I didn't realize that a submit button REFRESHES the page, therefore effectively removing any script use.