CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Adi
Adi

Reputation: 1455

How to append a jQuery variable value inside the .html tag

I have a jquery variable which contains html tags to create checkboxes dynamically. Now as per my need i have to add this variable inside the .html tag of jquery to show the checkboxes inside the dialogue box ..Also my .html contains form tag to include the checkboxes code inside the form..

Here is my variabel which contains the html tags..

var chbx=<input type="checkbox"   id="Mumbai" name="Mumbai" value="Mumbai" />Mumbai<br />
<input type="checkbox"   id=" Delhi" name=" Delhi" value=" Delhi" /> Delhi<br />\
<input type="checkbox"   id=" Bangalore" name=" Bangalore" value=" Bangalore" /> Bangalore<br />

And here is my .html tag containing form ..

var $dialog = $('<div></div>').html("<form id='myform'>" +chbx+ "</form>")
        .dialog({
            autoOpen: false,
            title: 'Select Sites',
            buttons: {
                "Submit": function() {  $('form#myform').submit();},
                "Cancel": function() {$(this).dialog("close");}
            }
        });

i tried to append the variable like +chbx+ but its not happening and showing empty dialogue box..

Upvotes: 11

Views: 113104

Answers (2)

Md Ashaduzzaman
Md Ashaduzzaman

Reputation: 4038

HTML :

<div id="myDiv">
    <form id="myForm">
    </form> 
</div>

jQuery :

var chbx='<input type="checkbox" id="Mumbai" name="Mumbai" value="Mumbai" />Mumbai<br /> <input type="checkbox" id=" Delhi" name=" Delhi" value=" Delhi" /> Delhi<br/><input type="checkbox" id=" Bangalore" name=" Bangalore" value=" Bangalore"/>Bangalore<br />';

$("#myDiv form#myForm").html(chbx);

//to insert dynamically created form 
$("#myDiv").html("<form id='dynamicForm'>" +chbx + "'</form>");

Demo

Upvotes: 16

Mahmoude Elghandour
Mahmoude Elghandour

Reputation: 2931

See this Link

HTML

<div id="products"></div>

JS

var someone = {
"name":"Mahmoude Elghandour",
"price":"174 SR",
"desc":"WE Will BE WITH YOU"
 };
 var name = $("<div/>",{"text":someone.name,"class":"name"
});

var price = $("<div/>",{"text":someone.price,"class":"price"});
var desc = $("<div />", {   
"text": someone.desc,
"class": "desc"
});
$("#products").fadeIn(1500);
$("#products").append(name).append(price).append(desc);

Upvotes: 3

Related Questions