CODEWITHSUNDEEP
jquery
EBAG
EBAG

Reputation: 22561

JQuery create a form and add elements to it programmatically

Hi I need to create a form and add elements to it programatically.

$form = $("<form></form>");
$form.append("<input type=button value=button");

this doesn't seem to work right.

Upvotes: 35

Views: 138532

Answers (6)

Jairus
Jairus

Reputation: 846

Using Jquery

Rather than creating temp variables it can be written in a continuous flow pattern as follows:

$('<form/>', { action: url, method: 'POST' }).append(
    $('<input>', {type: 'hidden', id: 'id_field_1', name: 'name_field_1', value: val_field_1}),
    $('<input>', {type: 'hidden', id: 'id_field_2', name: 'name_field_2', value: val_field_2}),
).appendTo('body').submit();

Upvotes: 2

manoj Bhambere
manoj Bhambere

Reputation: 69

function setValToAssessment(id)
{

     $.getJSON("<?= URL.$param->module."/".$param->controller?>/setvalue",{id: id}, function(response)
     {
        var form = $('<form></form>').attr("id",'hiddenForm' ).attr("name", 'hiddenForm'); 
         $.each(response,function(key,value){
            $("<input type='text' value='"+value+"' >")
 .attr("id", key)
 .attr("name", key)
 .appendTo("form");


             });
              $('#hiddenForm').appendTo('body').submit();

        // window.location.href = "<?=URL.$param->module?>/assessment";
    });

}

Upvotes: 7

Shurdoof
Shurdoof

Reputation: 1719

The tag is not closed:

$form.append("<input type=button value=button");

Should be:

$form.append('<input type="button" value="button">');

Upvotes: 5

Sergio Viera
Sergio Viera

Reputation: 601

var form = $("<form/>", 
                 { action:'/myaction' }
            );
form.append( 
    $("<input>", 
         { type:'text', 
           placeholder:'Keywords', 
           name:'keyword', 
           style:'width:65%' }
     )
);

form.append( 
     $("<input>", 
          { type:'submit', 
            value:'Search', 
            style:'width:30%' }
       )
);

$("#someDivId").append(form);

Upvotes: 29

Sarfraz
Sarfraz

Reputation: 382666

You need to append form itself to body too:

$form = $("<form></form>");
$form.append('<input type="button" value="button">');
$('body').append($form);

Upvotes: 53

Arvin
Arvin

Reputation: 1506

The 2nd line should be written as:

$form.append('<input type="button" value="button">');

Upvotes: 32

Related Questions