We just purchased Amelia last week. Our service requires that we pre-populate fields in the appointment booking form with custom user meta data.

We have created custom fields in Amelia and successfully pre-filled them automatically using simple jQuery. However, while the fields are populated in the browser, the values does not seem to register with the plugin?

When submitting/trying to submit the form, populated fields triggers a required notice even though they are not empty, and non-required fields show up empty in the booking emails.

Only when i manually fill out fields or edit the pre-filled values are they recognized by the plugin.

I have never come across this issue before. Please advice.

Thank you,

<script>

    (function($) {

        $('body').on('click', '#am-button-wrapper-0', function(){
            $('#am-confirm-booking .am-cf-7 .el-form-item__content').append('<select class="select-horse">' +
            '<option selected disabled>Select...</option>' +
            '<option>Option 1</option>' +
            '<option>Option 2</option>' +
            '</select>');

            $('#am-confirm-booking .am-cf-1 .el-textarea__inner').text('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.').change();
        });

        $('body').on('change', '.select-horse', function() {
            var horse = $('.select-horse option:selected').text();
                text = $('body .am-cf-7 .el-input__inner');

                text.val(horse).change();
        });

    })(jQuery);
</script>

See this screen recording: http://convertor.se/files/screenrecording.mov

I have also auto filled a textarea with sample text.

As you can see in the screen recording, both imput fields register as empty unless i manually edit them or interact with the field first before changing them.

Seems like Vue is making som kind of dirty/validation check each individual form field that only triggers on manual input. I have tried triggering a change with multiple methods, including vanilla js, but no luck.

Is there an easy way o bypass this check or trigger the dirty flag programmatically?

Thank you!

I will give this a try.

Hello,

this works great with the Booking Form 1.0. Is there a way to use such an approach for Step by Step Booking Form 2.0? Because the beforeConfirmBookingLoaded is not fired there.

Thanks