Question

I am customizing Denis Gritcyuk’s Popup date picker.

1. This pop-up script uses inline Javascript in a href link, to set the selected date into the input field, in the parent window, that is was called for. An example URL looks like:

   <a href="javascript:window.opener.document.formname.field.value='03-10-2011';
            window.close();">3</a>
   

2. The input field name, (e.g. document.formname.field), is passed to the script as a string parameter.

I would like to add things done when that link is clicked (e.g. change background color of field, set flag, etc.). So while this DOES work, it’s getting ugly fast.

<a href="javascript:window.opener.document.formname.field.value='03-10-2011';
         window.opener.document.formname.field.style.backgroundColor='#FFB6C1'; 
         window.close();">3</a>

How would I move these inline commands into a JS function? This would give me much cleaner URLs and code. The URL would now look something like

<a href="javascript:updateField ('document.formname.field', '03-10-2011');">3</a>

with a function like (this example obviously does NOT work):

function updateField (str_target, str_datetime) {
    var fieldName = "window.opener" + str_target;
    [fieldName].value = str_datetime;
    [fieldName].style.backgroundColor = '#FFB6C1';
    // Set flag, etc.
    window.close();
}

So any suggestions on how this can be done, please?

Answer 1

I’d prefer to hide the dom path tracing back from the current window back to the opener. It’s appropriate to bake that into the function since the function will always be used in the context of that child popup. Then your function call is cleaner and more readable. Obviously, replace “myField” with the ID of the field you’re intending to update.

<a href="javascript:window.opener.updateField( '03-10-2011', 'myField' );">3</a>

function updateField ( str_date, str_fieldname ) {

    var fieldToUpdate = document.getElementById( str_fieldname );

    fieldToUpdate.value = str_date;
    fieldToUpdate.style.backgroundColor = '#FFB6C1';

    // Set flag, etc.
    window.close();

}