Insert value into database

[Moussa El-hallak]

Hello,

I would like to add extra field (date_of_birth) into the customer data. I was able to add the field into the Booking Page wizard and the new edit Customers page. I also added a new column (date_of_birth) into the ea_users database. 

However, I was not able to inset the field value into the database and it does not show in the Customers page when I manually add a value into the database. Of note, I edited the frontend_book.js to include the new field:

        data.customer = {

            last_name: $('#last-name').val(),

            first_name: $('#first-name').val(),

            date_of_birth: $('#date_of_birth').val(),            

            email: $('#email').val(),

            phone_number: $('#phone-number').val(),

            address: $('#address').val(),

            city: $('#city').val(),

            zip_code: $('#zip-code').val(),

            timezone: $('#select-timezone').val()

        };

Any suggestion?

[Alex Tselegidis]

Hello! 

You are on the right track but have to make sure the fields is present in html and that its ID is properly set like "date_of_birth". 

Your jQuery selector $('#date_of_birth').val() may not return any element and thus provide no value. 

Alex Tselegidis, Easy!Appointments Creator   Need a customization? Contact me in person!

[Moussa El-hallak]

Thank you, Alex, for the feedback. To simplify things I decided to use "dob" to avoid the use of underscore this also include the column in the ea_users database

In the views >> backend >> customers.php I defined the added field as:

                    <div class="form-group">
                        <label class="control-label" for="dob">
                            Date of Birth:
                        </label>
                        <input class="form-control" id="dob" >
                    </div>

In the backend_customers_helper.js I edited the Save Add/Edit Customer Operation as follow:

        $('#customers').on('click', '#save-customer', function () {
            var customer = {
                first_name: $('#first-name').val(),
                last_name: $('#last-name').val(),
                dob: $('#dob').val(),

                email: $('#email').val(),
                phone_number: $('#phone-number').val(),
                address: $('#address').val(),
                city: $('#city').val(),
                zip_code: $('#zip-code').val(),

                notes: $('#notes').val(),
                timezone: $('#timezone').val(),
                language: $('#language').val() || 'english'
            };

I also edited the backend_customers_helper.min.js to add these:

....,dob:$("#dob").val(),....$("#dob").val(e.dob),....

I am still not able to send the new data to the database not retrieve the data that is manually added to the ea_users database

Again I appreciate any input or direction

[Moussa El-hallak]

I was able to add a field by using sublim text to search the files for "last-name" and replicate the code associated with this keyword.

Clearing the browser History is a key to see the results

[Temi B]

Is there a guide on doing this in 1.5.2? I want to add a date of birth field then use that to verify unique users in addition to their email. Though I guess that might not be enough if someone is registering twins with the same email ...

[Temi B]

What I did was modify one of the custom fields to be for date. Took a while to figure out how flatpickr was being initialized. It starts with functions in assets/js/utils/ui.js

In /application/views/components/custom_fields.php I had it check if the field name had the word date in it. If it did it would set the date class to include "custom-date-field"

AI generated code

=============================================

<?php
/**
 * Local variables.
 *
 * @var bool $disabled (false)
 */

$disabled = $disabled ?? false; ?>

<?php for ($i = 1; $i <= 5; $i++): ?>
    <?php if (setting('display_custom_field_' . $i)): ?>
        <?php
            // Get the label text
            $label = setting('label_custom_field_' . $i) ?: lang('custom_field') . ' #' . $i;

            // Decide if this is a date field
            $isDateField = (stripos($label, 'date') !== false);
        ?>
        <div class="mb-3">
            <label for="custom-field-<?= $i ?>" class="form-label">
                <?= $label ?>
                <?php if (setting('require_custom_field_' . $i)): ?>
                    <span class="text-danger" <?= $disabled ? 'hidden' : '' ?>>*</span>
                <?php endif; ?>
            </label>
            <input type="text" id="custom-field-<?= $i ?>"
<Field ? ' custom-date-field' : '' ?>"
                   maxlength="120" <?= $disabled ? 'disabled' : '' ?>/>
        </div>
    <?php endif; ?>
<?php endfor; ?>
==============================================

Then in assets/js/pages/booking.js

I added  

==========================================

const $customDates = $('.custom-date-field'); 

=========================================

where the variables are.

In the same file above the 

======================================

App.Utils.UI.initializeDatePicker($selectDate, {

=======================================

I added 

=============================================

App.Utils.UI.initializeDatePicker($customDates);

=============================================

Which triggers date picker for fields with the class custom-date-fields. Seems to work well. I will try to do the same or similar in the backend form for editing appointments. It doesn't change the database field type or anything but it should be fine. No need to get more complicated if you have custom fields available IMO. I think if you change ID instead of class it might break it getting inserted into the database, not sure. 

[Temi B]

The software is well organized. Thanks. All I had to do to add the change to the appointments modal in the backend is add the same js changes to assets/js/components/appointments_modal.js as I did to booking.js. The custom_fields.php changes already show up there and apply the class to custom fields that include date in their name. 

I modified the booking.min.js and appointments_modal.min.js files with minified versions of the originals as well. then purged whatever cache I could. 

[Alex Tselegidis]

Hello! 

Glad to know that you figured this one out. 

Alex Tselegidis, Easy!Appointments Creator
Need a customization? Get a free quote!