Form Custom Checkbox Problem

[fpdevco]

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);
      }
    }
  });

[Andrei]

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

[Author]

Posts