This topic has 1 reply, 2 voices, and was last updated 9 years by Andrei.

  • Author
  • #55808
     fpdevco
    Participant

    Hi,

    I’m using the latest version of Sweetdate, and I’m using custom checkboxes for some of the profile fields. Clicking on the actual square box works fine (it checks and unchecks, visually), but clicking on the label next to the box, or anywhere along the label line, does not check and uncheck the custom checkbox. It will check and uncheck the hidden form checkbox though, which causes a great deal of confusion for users.

    I found the code in jquery.foundation.forms.js inside the assets/scripts folder in Sweetdate, and dropped an alert in there. It never gets called. I tried adding a link to the script in the footer, and my alert fires when I click on the label, but the custom checkbox still does not check and uncheck.

    I don’t understand foundation enough to know what’s not working, or even if the Sweetdate theme works with it. It doesn’t appear to be loading or using the form stuff, instead using custom stuff in app.js??

    Anyway, any help/advice would be appreciated. I only have a handful of bugs like this to iron out before I launch.

    Cheers
    Chris

    This is the code inside \assets\scripts\jquery.foundation.forms.js that gets hit when I load it in the footer. It’s failing on the length test for $associatedElement.length. I have no idea why or if there’s a bunch of other stuff I need to do to enable this functionality.

    COPY CODE
    $(document).on('click', 'form.custom label', function (event) {
        var $associatedElement = $('#' + $(this).attr('for') + '[data-customforms!=disabled]'),
            $customCheckbox,
            $customRadio;
    		alert($associatedElement.length);
        if ($associatedElement.length !== 0) {
          if ($associatedElement.attr('type') === 'checkbox') {
            event.preventDefault();
            $customCheckbox = $(this).find('span.custom.checkbox');
            //the checkbox might be outside after the label
            if ($customCheckbox.length == 0) {
                $customCheckbox = $(this).next('span.custom.checkbox');
            }
            //the checkbox might be outside before the label
            if ($customCheckbox.length == 0) {
                $customCheckbox = $(this).prev('span.custom.checkbox');
            }
            toggleCheckbox($customCheckbox);
          } else if ($associatedElement.attr('type') === 'radio') {
            event.preventDefault();
            $customRadio = $(this).find('span.custom.radio');
            //the radio might be outside after the label
            if ($customRadio.length == 0) {
                $customRadio = $(this).next('span.custom.radio');
            }
            //the radio might be outside before the label
            if ($customRadio.length == 0) {
                $customRadio = $(this).prev('span.custom.radio');
            }
            toggleRadio($customRadio);
          }
        }
      });
    
    #56393
     Andrei
    Moderator

    Could you please post a link to your page where you have this custom form so we can give a look at the issue ?

    Thanks

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

Log in with your credentials

Forgot your details?