Jquery <br/> issue in radio button while formatting the HTML code

Question

I have this HTML markup for the Radio Button, I am facing awkward issue in this break issue,

<div class='selectorField draggableField radiogroup'>
    <label class="control-label" style="vertical-align: top">Radio buttons</label>
    <div style="display: inline-block;" class="ctrl-radiogroup">
        <label class="radio">
            <input type="radio" name="radioField" value="option1">Option 1</input>
        </label>
        <label class="radio">
            <input type="radio" name="radioField" value="option2">Option 2</input>
        </label>
        <label class="radio">
            <input type="radio" name="radioField" value="option3">Option 3</input>
        </label>
    </div>
</div>

Here is also jquery part that is responsible for loading the values:

load_values.radiogroup = function (ctrl_type, ctrl_id) {
    var form = $("#theForm");
    var div_ctrl = $("#" + ctrl_id);
    var options = '';
    var ctrls = div_ctrl.find("div").find("label");
    var radios = div_ctrl.find("div").find("input");

    ctrls.each(function (i, o) {
        options += $(o).text() + '\n';
    });

    form.find("[name=name]").val(radios[0].name);
    form.find("[name=options]").val($.trim(options));
}

I am showing you the image that show how the radio buttons are getting rendered.

I need to delete the space between the Option1 Option2. It works fine if I never format the code.

are there empty labels you are extracting with div_ctrl.find("div").find("label");? Can you please post the result of console.log(ctrls); ? — nowhere
– nowhere, Commented Oct 20, 2015 at 7:02
This looks more like a CSS issue than extraneous <br /> elements being added to your code. Can you show an example in jsfiddle.net — Rory McCrossan
– Rory McCrossan, Commented Oct 20, 2015 at 7:04
You can resolve that by adding display: block to each option using css. — Parkash Kumar
– Parkash Kumar, Commented Oct 20, 2015 at 7:06
can you create empty fiddle with refrnce of handlebar js , jquery ui and jquery — Jot Dhaliwal
– Jot Dhaliwal, Commented Oct 20, 2015 at 7:10

nowhere · Accepted Answer · 2015-10-20 07:23:02Z

1

I'm not sure why you are trying to add options like that but this is how i would fill in the select element:

ctrls.each(function (i, o) {
        options += "<option value='"+$(o).text()+"'>" + $(o).text() + "</option>";
});

form.find("select").html(options);

I'm not sure of this last step. If your select has an id as:

<select id="selectId></select>

then you could replace my last line with this:

$("#selectID").html(options);

edited Oct 20, 2015 at 7:23

answered Oct 20, 2015 at 7:19

nowhere

1,5481 gold badge12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jot Dhaliwal Over a year ago

let me try this gorg

nowhere Over a year ago

I'm not sure that .find("select") is going to find the right element where you have to add the options so you might have to fix that (maybe by using $("#selectID").html(options);

Jot Dhaliwal Over a year ago

<option value= Option 1> Option 1</option><option value= Option 2> Option 2</option><option value= Option 3> Option 3</option> No luck , this is inside the text area now

nowhere Over a year ago

@Jot i forgot some quotes... i've updated my answer.

Jot Dhaliwal Over a year ago

Ma'm Still the same , please look

|

Collectives™ on Stack Overflow

Jquery <br/> issue in radio button while formatting the HTML code

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related