Copy the value from one element to another after value has changed?

Question

I have two elements on my form and one is input text date picker and second is input text. I want to copy the value from date picker field to second input text box after date changed. My current function will copy current value right when I click on the date picker but after I pick another date that won't affect another input field. What is the best option to approach this problem? Here is my example:

<td>
    <input type="text" name="addDate_dt" id="addDate_dt" maxlength="10" size="12" value="" readonly="readonly">
</td>

<td>
  <input type="text" name="st_begDt" id="st_begDt" maxlength="10" size="12" value="#Dateformat(st_begDt,'mm/dd/yyyy')#" readonly="readonly">
  <img src='calendar.gif' alt='Calendar' onclick="calendar(event,'o_begDt')";
onMouseup="copyBegDt()">
</td>

function copyBegDt(){
        var begDt = document.getElementById('st_begDt').value;

        if(begDt.trim() !== ''){
            document.getElementById('addDate_dt').value = begDt;
        }else{
            document.getElementById('addDate_dt').value = '';
        }
    }

Also I would like to populate the addDate_st field on page load as well. Side note, I don't want to modify my calendar function because it's used on the other pages in my app as well.

Answer 1

If st_begDt is being updated correctly already what about just creating a change watch on that input?

var begDt = document.getElementById('st_begDt');
begDt.onchange = function() {
    //update other input here
};