Radio buttons instead of dropdown menu in Appointments+

Is it possible to change the menu in which you select a service from a dropdown menu to radiobuttons? (see screenshot)

Thank you in advance for your answer!

  • Anang
    • New Recruit

    Hi @jeroen

    Thanks for contacting us :slight_smile:

    I see the only way to do this without change the core files of appointment+ is using jquery. You can try put this code on your themes footer.php before </body>

    <script>
    jQuery('.app_select_services').each(function(i, select){
    var $select = jQuery(select);
    $select.find('option').each(function(j, option){
    var $option = jQuery(option);
    // Create a radio:
    var $radio = jQuery('<input type="radio" />');
    // Set name and value:
    $radio.attr('name', $select.attr('name')).attr('value', $option.val());
    // Set checked if the option was selected
    if ($option.attr('selected')) $radio.attr('checked', 'checked');
    // Insert radio before select box:
    $select.before($radio);
    // Insert a label:
    $select.before(
    jQuery("<label />").attr('for', $select.attr('name')).text($option.text())
    );
    // Insert a <br />:
    //$select.before("<br/>");
    });
    jQuery(".app_services_button").before("<br />");
    $select.remove();
    });
    </script>

    Let me know the result :slight_smile:

    Best Regards

  • Jeroen
    • Flash Drive

    Hi Anang,

    First of all, thank you for your fast reply!

    I put the code in the footer and the radiobuttons appear instead of the dropdown menu.

    But when I click one of the options, the available times aren't displayed (only 9.00, see the image I attached ) and if I click te "show available times" button, it jumps back to the first option.

  • Jeroen
    • Flash Drive

    Hi Anang,

    In the meantime I found the problem.

    When a radiobutton is clicked the url changes to ?app_service_id=undefined instead of ?app_service_id=1 or ?app_service_id=2.

    When I change the URL manually, it shows the right schedule.

    Do you know what to add to the jQuery code to make the url change correctly when the radio buttons are clicked?

  • Anang
    • New Recruit

    Hi @jeroen

    Add this code after $select.remove() line

    var id=0;
    jQuery("body").on("click","input[name=app_select_services]",function(e){
    id=jQuery(this).val();
    });
    jQuery(".app_services_button").addClass("new_services_button");
    jQuery(".app_services_button").removeClass("app_services_button");
    jQuery(".new_services_button").click(function(e){
    e.preventDefault();
    window.location.href="?app_service_id="+id;
    });

    Let me know if it’s worked or not :slight_smile:

    Best Regards

  • Jeroen
    • Flash Drive

    Hi Anang,

    Works like a charm!

    I only changed var id to 1 because when it’s 0 and you click “show available times” without clicking a radiobutton first it doesn’t show the correct times.

    Now it seems to work allright but is it gonna cause problems to change it to 1?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.