2

I am setting up an RSForm! Pro form using Radio buttons, but I want to hide the radio buttons input and use the label for the selection, the HTML for the question is:

<div class="rsform-block rsform-block-question">
    <div class="formControlLabel">This is the question...?</div>
    <div class="formControls">
        <div class="formBody">
            <p class="rsformVerticalClear">
                <input type="radio" id="Question0" value="First Answer" name="form[Question]">
                <label for="Question0">First Answer</label>
            </p>

            <p class="rsformVerticalClear">
                <input type="radio" id="Question1" value="Second Answer" name="form[Question]">
                <label for="Question1">Second Answer</label>
            </p>

            <p class="rsformVerticalClear">
                <input type="radio" id="Question2" value="Third Answer" name="form[Question]">
                <label for="Question2">Third Answer</label>
            </p>
        </div>
    </div>
</div>

Is there anyway I can do this with jQuery?

Through CSS, I want to change the background of the selected label (when clicked on), the input radio button changes, but I can't work out how to change the label to active/focus.

I think the following should work, but it doesn't seem to, as the label doesn't have a class associated with it.

$("input:radio[name='form[Question]']").change(function(){
    $("label").removeClass("selected");
    $("label[for='" + this.id + "']").toggleClass("selected", this.checked);
});

Any ideas please?

2

First, be sure the jQuery library is being loaded. Using the browser developer tools inspect the rendered head and verify it is being loaded. If not, you will need to load either from your template, or by doing a template override for the component view handling the page rendering in question. Either way, you'll need to add the following to the top.

JHtml::_('jquery.framework');

I've edited the code snippet below, wrapping in an IIFE, passing in the jQuery object to the function as $. The reason we need to do this is Joomla is still using Mootools, although it is being phased out, which also uses the $ to access library methods. This conflict requires either the use of an IIFE or to use jQuery in noConflict() mode.

Referencing the clicked target in you callback function to find the label and toggle the class should solve this for you.

(function($) {
    $(document).ready(function(){
        $('input:radio[name="form[Question]"]').change(function(){
            console.log('Change event callback fired!');
            $(this).next().toggleClass("selected", $(this).prop("checked"));
        });
    });
})(jQuery);

Also changed the qualifier from this.checked to $(this).prop("checked"). A common mistake is to assume native JavaScript object properties and methods are available in jQuery objects of the same element.

I've edited the answer to reflect wrapping function inside jQuery's document ready method to ensure the DOM is fully loaded.

  • Thanks for your answer, this isn't working unfortunately. I've tred the following but it's not working either: <script> $(document).on('click', 'input[type=radio]').click(function() { $("label[for='" + this.id + "']").toggleClass('active', this.checked); }); </script> – RustyJoomla Sep 26 '14 at 16:10
  • I made two edits to my answer. First I wrapped in a document ready method and second I inversed the single/double quotes inside the change event listener select string to match what RS Forms renders. See if that works. I also added a console.log event inside the change event callback. This way we can look at the browsers console log to ensure the event is firing at least. – Brian Bolli Sep 29 '14 at 14:34
  • Thanks Brian, I have tried this but it's not working correctly still. The label class doesn't change. – RustyJoomla Sep 29 '14 at 14:51
  • I am getting the following in the Console: TypeError: $(...).ready is not a function – RustyJoomla Sep 29 '14 at 14:59
  • Sounds like jQuery is conflicting with Mootools. Edited answer to reflect loading jQuery library and wrapping IIFE to prevent conflicts. This should resolve your issue. – Brian Bolli Sep 29 '14 at 15:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.