Copying Fields in JS Component

[Thomas Deliduka]

I'm extremely new to Component development. I am still learning but I can't find this answer in the standard documentation.

My admin section has a form that is entering an event. There is a start date and end date.

I would like to choose the Start Date and onChange. it will copy to the end date. Easy right?

So, I added this to the "setDocument()" function in the view:

$document->addScriptDeclaration('function changeEndDate() {
document.getElementById(\'jform_evenddate\').value = document.getElementById(\'jform_evstartdate\').value;
}');

Then I added in the field:
<field
name="evstartdate"
onchange="changeEndDate()"
type="calendar"
label="Start Date"
filter="server_utc "
minyear="0"
format="%Y-%m-%d"
/>

On the surface is appears to work. However, the "evenddate" field is blanked out when I click "Save & Close". Also, you can tell that it doesn't recognize that the data was copied because if I click the calendar, it starts back on today's date and not the date that was copied to the field.

What should I do?

[Anibal]

Hi Thomas,

A routine triggered onChange is not going enough for what you are looking for since you have to support all cases where the End Date is modified. 

As you have confirmed when you Save, the page is posted and the field value is retrieved empty.

Additionally, the Calendar field changes the value according to other events.

You can check how the calendar field works here to define how to initialize the End Date: media/system/js/fields/calendar-uncompressed.js

Regards,

[Thomas Deliduka]

I'm not triggering the onChange on the End Date, only on the Start date. I can decide to change end date all I like and it won't affect start.

What I don't get is that I copy value from start to end and it blanks out on submit. How do I get the form to recognize that I changed it? Will that be in the Javascript you posted?

[Thomas Deliduka]

I figured out the answer. I needed to change the data-alt-value as well. I changed it to use jquery here:

        $document->addScriptDeclaration('function changeEndDate() {

           dateValue = document.getElementById(\'jform_evstartdate\').value;

           jQuery(\'#adminForm input[id=jform_evenddate]\').val(dateValue);

           jQuery(\'#adminForm input[id=jform_evenddate]\').attr(\'data-alt-value\',dateValue);

        }');

That works.

[Anibal Sanchez]

Glad to hear you managed to get it working.

--
You received this message because you are subscribed to a topic in the Google Groups "Joomla! General Development" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/joomla-dev-general/k9E-3vZLKm8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to joomla-dev-general+unsub...@googlegroups.com.
To post to this group, send email to joomla-dev-general@googlegroups.com.
Visit this group at https://groups.google.com/group/joomla-dev-general.
For more options, visit https://groups.google.com/d/optout.