Aligning checkboxes

[Sangharsh Boudhh]

Hi,

Using "checkboxes" types with jQuery.dForm renders "<input>" and "<label>" tag one after the other and display on different line.

JSFiddle: http://jsfiddle.net/sboudhh/cnvLtwnj/1/

I would like to have <input> tag wrapped inside <label> tag and displayed on the same line.

E.g. <label><input type="checkbox" name="checkbox" value="value">Text</label>

Please guide on how to re-structure the JSON OR modify CSS in order to achieve this.

Thanks,

Sangharsh

[Sangharsh Boudhh]

If adding a type or subscriber can achieve desired result, that is also welcome.

[David Luecke]

That can just be done with simply adding another `options` subscriber:

$.dform.subscribe("options", function(options, type) {

    $(this).find('label').each(function() {

        var el = $(this);

        el.prepend(el.prev())

    });

    

    return $(this);

});

See: http://jsfiddle.net/cnvLtwnj/2/

--
You received this message because you are subscribed to the Google Groups "jQuery dForm" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jquery-dform...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Sangharsh Boudhh]

Hi Daff,

This is working fine for wrapping <input> inside <label>.

However, "name" attribute is now missing from <input> tag, which is breaking form encoding on POST.

Can you please suggest, how to have "name" attribute back?

Earlier:

<input type="checkbox" class="ui-dform-checkbox" value="js" name="why">

Now:

<input type="checkbox" class="ui-dform-checkbox" value="js">

[David Luecke]

Hm, this is probably because the [post] subscriber adds the name only to direct children (see https://github.com/daffl/jquery.dform/blob/master/src/dform.core.js#L207). You can add another one that fixes this :

$.dform.subscribe('[post]', function(options, type) {

    if (type === "checkboxes" || type === "radiobuttons") {

        this.find('input').attr('name', options.name);

    }

});

See http://jsfiddle.net/cnvLtwnj/3.

[Sangharsh Boudhh]

Yes. This solves it.

Thanks a lot.