How to add jquery array into html form to add checkboxes dynamically into dialogue box

Question

i have a jquery array which contains html code for generating checkboxes dyanmically.here is the contents of my jquery array and the name of my array is output

<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 />

Now as per my need i want to add this array called output into jquery dialogue box contained in html form ..

Here is my code..

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

I have to add the array called output in the .html form which i have added like this shown in code but its not showing checkoxes instead it is showing output in the alert box message ..

Any help will be highly appreciated.. Thanks in advance..

score 0 · Answer 1 · answered Oct 30 '13 at 04:44

0

You will have to separate the html into two different parts. For example,

.html('<form id="myform" action="">' + output + '</form>')

answered Oct 30 '13 at 04:44

Sachin Gaur

12,909
9
33
38

thank you sir for your response but it is not showing checkbox in the dialogue box – vimal Oct 30 '13 at 04:50

score 0 · Answer 2 · answered Oct 30 '13 at 04:47

0

Try this,

var $dialog = $('<div></div>')
    .html('<form id="myform" action="">'+$('input:checkbox').clone()+'</form>')
    .....

answered Oct 30 '13 at 04:47

Rohan Kumar

40,431
11
76
106

score 0 · Answer 3 · edited May 23 '17 at 11:50

Try this

$(window).load(function() {
        $.ajax({
            type: 'GET',
            url: 'Sites',
            success: function(data) {
                var city=data.city
                for(var i in city)
                {
                   var output='<input type="checkbox"   id="'+city[i]+'" name="'+city[i]+'" value="'+city[i]+'" />'+city[i]+'<br />'
                }
                consoloe.log(output)
            }
        });
    });

Refer this How to have jQueryUI dialog box dynamically load content

How to add jquery array into html form to add checkboxes dynamically into dialogue box

3 Answers3