How do I make my popup date picker calendar javascript change the text date next to it and update the database?

Question

We use a DHTML calendar picker that only allows you to change the date, which is desired functionality. However, I need to figure out the javascript to change the date next to the calendar picker, as seen in the image below, and popup an "are you sure" message.

The above image is one row in a table, so the JS needs to be aware of which one of potentially 10+ dates it should be editing.

I'm a bit of a javascript n00b. Still learning new things. Feel free to link me to things to read and tips/hints/etc.

If it helps any, we're using PERL with CGI. I guess the JS will have to have an AJAX call to update the database, which I can figure out from other examples in the code base. I just need to figure out how to edit the date on the page for now.

And for clarification, the process is... the person clicks on that calendar icon, gets a DHTML date picker, chooses a date, confirms he wants to change datetime1 to datetime2, and then the change gets applied to the text you see next to the calendar icon and gets put in the database.

Answer 1

Having the actual web page (HTML & JS) would really help here. But, in general, you'll need a way for the JS to "address" the text you'd like to change. The easiest way I know is to wrap the text in a DIV or SPAN, with a unique ID ("datetime1", "datetime2", etc.).

Then, assuming you know which piece of JS is being called when the datepicker runs, access the text item like:

document.getElementById('datetime1').innerHTML = (insert new datetime here);

You'll need a way to pass the ID (datetime1, etc) to the JS, but that should be easy if Perl is generating the 10 datetime rows (i.e., the FOR loop in Perl just sticks in sequential IDs into the DIV/SPANs and again as arguments to the datepicker function).

I assume you know (or can find) how to do "alert()" in JS, so the confirmation should be the easiest part.

It also sounds like you need to send the new dates back into some DB. I suggest a FORM to send it all back to the Perl CGI, which will have to update the DB. Folks more clever than me might be able to tell you how to do that in JS w/ AJAX, etc.