Adding a field to a form (jQuery)

Question

I'm constructing a form. No problem there. Aside of a submit button, I have another button that, when clicked, adds another field to the form. I am attempting to use javascript (jquery) to do this. Needless to say I am not having any luck. I have tried many different methods, and this is the one I gave up at:

$("#snew").click(function () {  
var container = $("#sblc").add("div");
var content = "<select> <option>Domestic</option><option>Tiger</option><option>Peeled                  Raw</option><option>Cooked Peeled Tail On<option></select><select> <option>1 lbs</option>   <option>2 lbs</option><option>3 lbs</option></select>";

                $(container).attr("class", "opt");
                $(container).append(content); 
                $(container).appendTo("#sblc"); 

            })

Here is the HTML that corresponds: http://pastie.org/3729304 (I couldn't figure out how to get the HTML to display properly on here. Sorry for the link. )

Whenever I try this, I end up either getting a completely white page, or nothing happens at all. Any help would be greatly appreciated.

Answer 1

Try something like below,

DEMO

$("#snew").click(function() {
    var container = $("<div />");
    var content = "<select> <option>Domestic</option><option>Tiger</option><option>Peeled                  Raw</option><option>Cooked Peeled Tail On<option></select><select> <option>1 lbs</option>   <option>2 lbs</option><option>3 lbs</option></select>";

    $(container)
        .attr("class", "opt") //add class to the div container
        .append(content)      //append select to the div
        .appendTo("#sblc");   //append div to #sblc

});

Answer 2

I think you need to do:

var container = $("<div>"); // notice the `<` and `>`

This way, you create new DIV container and append it later (you've already done this)

Answer 3

You have an error with how your appending.

http://jsfiddle.net/NYnYw/

Answer 4

This will work with the code you provided:

$("#snew").click(function () {
    var container = $("#sblc");
    var content = "<div><select> <option>Domestic</option><option>Tiger</option><option>Peeled                  Raw</option><option>Cooked Peeled Tail On<option></select><select> <option>1 lbs</option>   <option>2 lbs</option><option>3 lbs</option></select></div>";

    $(container).attr("class", "opt");
    $(container).append(content);
})

Answer 5

What about simply calling append once:

    $("#sblc").append("<div class=\"opt\"><select><option>Domestic</option><option>Tiger</option><option>Peeled                  Raw</option><option>Cooked Peeled Tail On<option></select><select> <option>1 lbs</option><option>2 lbs</option><option>3 lbs</option></select></div>");

Answer 6

Your logic seems weird... You first declare container as $("#sblc").add("div") which refers to a jQuery collection of objects that includes both #sblc and as many div as it can match. Is this really what you're trying to do?
Then, you double wrap container in jQuery object which is unnecesary.
The part that strikes me as unusual is $(container).appendTo("#sblc"). You're appending the double wrapped container, or #slbc + divs to #slbc?? Don't understand...
You could try something like this:

$("#snew").click(function () {

    var $container =  # ('#slbc'),
        materials = ['Domestic', 'Tiger', 'Peeled Raw', 'Cooked Peeled Tail On'],
        values = ['1 lbs', '2 lbs', '3 lbs'],
        html = '<select><option>' + materials.join('</option><option>') + '</option></select>' +
            '<select><option>' + values.join('</option><option>') + '</option></select>';

    $container.append(html).addClass('opt');

});