Changing my code from <option> to <input>

[totallytech]

Hi There,

 

I currently have a piece of code which pulls information from a db via get_option

<select class="ab-formElement ab-select-mobile ab-select-service">
      <option value=""><?php echo esc_html( __( get_option( 'ab_appearance_text_option_service' ), 'ab' ) ) ?></option>
</select>

The code above displays all 8 options in my database.

 

but I need to change the way they display to radio buttons.

 

I've tried:

<input type="radio" name="services" value="'<?php echo esc_html( __( get_option( 'ab_appearance_text_option_service' ), 'ab' ) ) ?>'" />

which just displays the first option, I cannot see how the first set of code finds 8 outputs but the radio code only finds one..

 

Can anyone help me out please?

[seandisanti]

The functions in your code are actually wordpress functions. https://developer.wordpress.org/reference/functions/get_option/ has a listing of the source for get_option if you want to see the other wordpress functions they call behind the scenes so you can repurpose them. There may very well be a wordpress function to do exactly what you're looking for, but finding it will take more than the minute or two I have free right now. I will research further if you're not able to find anything.

[totallytech]

Hey, I'm not sure if this is a php, JS or wordpress issue.

 

This is my site - its the booking area I'm attempting to edit....

 

http://goo.gl/cGHA8Y

 

For example, if I add 

class="ab-formElement ab-select-mobile ab-select-service"

to any code (<select><input> even a <div>) then it adds the <option.....> to it - So I created a <div> and the output is:

<div class="ab-formElement ab-select-mobile ab-select-service" value="Select service">
    <option value="1">Class IV (4) MOT</option>
    <option value="2">Class VII (7) MOT</option>
    <option value="3">Engine Service</option>
    <option value="4">Full Engine Service</option>
    <option value="5">Aircon Leak Test, Re-Gas & Service</option>
    <option value="6">Aircon Re-Gas & Service</option>
    <option value="7">FREE Safety Check</option>
    <option value="8">Engine Diagnostic Check</option>
</div>

however if I view the source of the page it shows:

<!--
Plugin Name: Bookly – Responsive WordPress Appointment Booking and Scheduling Plugin
Plugin URI: http://booking-wp-plugin.com
Version: 7.0.1
-->
<style type="text/css">
    /* Service */
    .ab-label-error {color: #5b3222!important;}
    label.ab-category-title {color: #5b3222!important;}
    .ab-next-step, .ab-mobile-next-step, .ab-mobile-prev-step, li.ab-step-tabs.active div,
    .picker__frame, .ab-first-step .ab-week-days li label {background: #5b3222!important;}
    li.ab-step-tabs.active a {color: #5b3222!important;}
    div.ab-error select {border: 2px solid #5b3222!important;}
    .picker__header {border-bottom: 1px solid #5b3222!important;}
    .picker__nav--next, .pickadate__nav--prev {color: #5b3222!important;}
    .picker__nav--next:before {border-left:  6px solid #5b3222!important;}
    .picker__nav--prev:before {border-right: 6px solid #5b3222!important;}
    .picker__day:hover {color: #5b3222!important;}
    .picker__day--selected:hover {color: #5b3222!important;}
    .picker--focused .picker__day--selected {color: #5b3222!important;}
    .picker--focused .picker__day--highlighted {color: #5b3222!important;}
    .picker__button--clear {color: #5b3222!important;}
    .picker__button--today {color: #5b3222!important;}
    .ab-first-step .ab-week-days li label.active {background: #5b3222 url(http://kerrymotorservices.co.uk/wp-content/plugins/appointment-booking/frontend/resources/images/checkbox.png) 0 0 no-repeat!important;}
    /* Time */
    .ab-columnizer .ab-available-day {
        background: #5b3222!important;
        border: 1px solid #5b3222!important;
    }
    .ab-columnizer .ab-available-hour:hover {
        border: 2px solid #5b3222!important;
        color: #5b3222!important;
    }
    .ab-columnizer .ab-available-hour:hover .ab-hour-icon {
        background: none;
        border: 2px solid #5b3222!important;
        color: #5b3222!important;
    }
    .ab-columnizer .ab-available-hour:hover .ab-hour-icon span {background: #5b3222!important;}
    .ab-time-next {background: #5b3222!important;}
    .ab-time-prev {background: #5b3222!important;}
    .ab-to-first-step {background: #5b3222!important;}
    /* Details */
    label.ab-formLabel {color: #5b3222!important;}
    a.ab-to-second-step {background: #5b3222!important;}
    a.ab-to-fourth-step {background: #5b3222!important;}
    div.ab-error {color: #5b3222!important;}
    input.ab-details-error,
    textarea.ab-details-error {border: 2px solid #5b3222!important;}
    .ab-to-second-step, .ab-to-fourth-step {background: #5b3222!important;}
    /* Payment */
    .btn-apply-coupon {background: #5b3222!important;}
    .ab-to-third-step {background: #5b3222!important;}
    .ab-final-step {background: #5b3222!important;}
</style><div id="ab-booking-form-5616996946098" class="ab-booking-form">
    <div style="text-align: center"><img src="http://kerrymotorservices.co.uk/wp-includes/js/tinymce/skins/lightgray/img/loader.gif" alt="Loading..." /></div>
</div>
<script type="text/javascript">
    (function (win, fn) {
        var done = false, top = true,
            doc = win.document,
            root = doc.documentElement,
            modern = doc.addEventListener,
            add = modern ? 'addEventListener' : 'attachEvent',
            rem = modern ? 'removeEventListener' : 'detachEvent',
            pre = modern ? '' : 'on',
            init = function(e) {
                if (e.type == 'readystatechange') if (doc.readyState != 'complete') return;
                (e.type == 'load' ? win : doc)[rem](pre + e.type, init, false);
                if (!done) { done = true; fn.call(win, e.type || e); }
            },
            poll = function() {
                try { root.doScroll('left'); } catch(e) { setTimeout(poll, 50); return; }
                init('poll');
            };
        if (doc.readyState == 'complete') fn.call(win, 'lazy');
        else {
            if (!modern) if (root.doScroll) {
                try { top = !win.frameElement; } catch(e) { }
                if (top) poll();
            }
            doc[add](pre + 'DOMContentLoaded', init, false);
            doc[add](pre + 'readystatechange', init, false);
            win[add](pre + 'load', init, false);
        }
    })(window, function() {
        window.bookly({
            is_finished    : 0,
            is_cancelled   : 0,
            ajaxurl        : "http:\/\/kerrymotorservices.co.uk\/wp-admin\/admin-ajax.php",
            attributes     : {"hide_categories":"1","category_id":"1","hide_services":false,"service_id":false,"hide_staff_members":"1","staff_member_id":false,"hide_date_and_time":"1","show_number_of_persons":false},
            form_id        : "5616996946098",
            start_of_week  : 1,
            date_min       : 0,
            final_step_url : "",
            custom_fields  : [{"type":"text-field","label":"Vehicle Registration","required":true,"id":73007},{"type":"text-field","label":"Vehicle Make / Model","required":true,"id":1973},{"type":"textarea","label":"Notes or details of any current issues with the vehicle","required":false,"id":1}],
            day_one_column : 1,
            show_calendar  : 0,
            woocommerce    : 0,
            woocommerce_cart_url : ""        });
    });
</script></p>
</div>

I've checked the database to make sure it doesnt specify <option> etc but it doesn't and I've done all sorts of searches via dreamweaver in the code directly to see if I can work out where it adds it but nothing so far...

 

Any ideas?

[maxxd]

What theme are you using? Looks like it may be reading the class name to replace an input type. For instance, the classes you listed are 'ab-select'mobile' and 'ab-select-services'. Notice that both have '-select-' in them - maybe that's what the theme is reading?

 

Without knowing the theme, that's only a theory. It may be a bad one, but it's a theory.

[totallytech]

Its a custom theme that I've designed using artisteer, I've used dreamweaver to check for select, option, ab - just all kinds, I've been searching for around 5 hours using dreamweaver and I've checked the database - I'm now checking the posts table etc to see if anything comes up

[maxxd]

Sorry - I've got nothing for Artisteer...

[totallytech]

I actually think this may be JS.

 

I found this:

 

    // On new category form submit.
    $('#new-category-form').on('submit', function(event) {
        var data = $(this).serialize();
        $.post(ajaxurl, data, function(response) {
            $('.ab-category-item-list').append(response);
            $('#new_category_popup').ab_popup('close');
            // add created category to services
            $.each($('#services_list').find('select[name="category_id"]'), function(key, value) {
                var $new_category = $('.ab-category-item:last');
                $(value).append('<option value="' + $new_category.data('id') + '">'
                    + $new_category.find('input').val() + ' </option>');
            });
        });
        return false;
    });

but thats for creating a new category in the admin section of the plugin - I can't find where it actually places the data for use when displaying on the page...