Jquery
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, Oct 20 '15 at 07:02
This looks more like a CSS issue than extraneous `
` elements being added to your code. Can you show an example in http://jsfiddle.net — Rory McCrossan, Oct 20 '15 at 07:04
@ParkashKumar if i never add \n then the whole options are in one line — Jot Dhaliwal, Oct 20 '15 at 07:05
You can resolve that by adding display: block to each option using css. — Parkash Kumar, Oct 20 '15 at 07:06
@nowhere \n is for one line break but it is getting two right now , one is when after i format the code — Jot Dhaliwal, Oct 20 '15 at 07:06
@ParkashKumar these are dynamic values so how can i add display property any idea — Jot Dhaliwal, Oct 20 '15 at 07:07
Can you create a fiddle of your code, so that we can investigate it further? — Parkash Kumar, Oct 20 '15 at 07:09
also input type radios are self closing elements. you don't need to close it with ``. — Jai, Oct 20 '15 at 07:09
can you create empty fiddle with refrnce of handlebar js , jquery ui and jquery — Jot Dhaliwal, Oct 20 '15 at 07:10
I tried minifying the code , thatas work fine but when over the page i document anything this minified code also unminfied — Jot Dhaliwal, Oct 20 '15 at 07:13
@ParkashKumar i added a picture of my console with the debugger,, plese have a look , hope that may help you — Jot Dhaliwal, Oct 20 '15 at 07:19
@ParkashKumar are you arround , I am following this https://github.com/anupshinde/demos/tree/gh-pages/form-builder-part2 plugin — Jot Dhaliwal, Oct 20 '15 at 07:38
Have a look at http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery#answer-171007 — Parkash Kumar, Oct 20 '15 at 07:40
And this one: http://stackoverflow.com/questions/4969754/jquery-append-to-select-with-an-array#answer-4969773 — Parkash Kumar, Oct 20 '15 at 07:47

nowhere · Accepted Answer · 2015-10-20T07:23:02.983

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 '15 at 07:23

answered Oct 20 '15 at 07:19

nowhere

1,558
1
12
31

let me try this gorg – Jot Dhaliwal Oct 20 '15 at 07:20
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); – nowhere Oct 20 '15 at 07:22
Option 1 No luck , this is inside the text area now – Jot Dhaliwal Oct 20 '15 at 07:22
@Jot i forgot some quotes... i've updated my answer. – nowhere Oct 20 '15 at 07:23
Ma'm Still the same , please look – Jot Dhaliwal Oct 20 '15 at 07:27
I can't skype now :/ The rest of the office wouldn't be happy. With the new quotes you should get something like instead! Isn't that what you want? – nowhere Oct 20 '15 at 07:38

Jquery issue in radio button while formatting the HTML code

1 Answers1

Jquery
issue in radio button while formatting the HTML code