How to create an HTML Input dynamically using jQuery?

Question

I want to create below html inputs dynamically using jQuery inside the form. Is this possible using jQuery?

<div class="form-group">
  <label class="col-sm-2 control-label">Enter Name</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" id="nameId" name="fullNme" placeholder="Enter full Name">
  </div>
</div>

I want to place the above dynamic div and texbox under div class="box-body"

<form id="myform" class="form-horizontal" method="post">
  <div class="box-body">


  </div>
</form>

Can someone help how can I achieve in Jquery/Javascript?

Appreciate your help in advance!

$('YOURCLICK').on('click',function(e){ $('box-body').append('<input type="text" class="YOURCLASS" name="YOURNAME[]">') }) — Maninderpreet Singh
– Maninderpreet Singh, Commented May 10, 2016 at 7:07

Anoop Joshi P · Accepted Answer · 2016-05-10 07:05:40Z

3

You can do,

var formgroup = $("<div/>", {
  class: "form-group"
});
formgroup.append($("<label>", {
  class: "col-sm-2 control-label",
  text: "Enter Name"
}));
var colsm = $("<div/>", {
  class: "col-sm-10"
});
var input = $("<input/>", {
  type: "text",
  class: "form-control",
  id: "nameId",
  placeholder: "Enter Full Namee"
});
colsm.append(input);
formgroup.append(colsm);
$(".box-body").append(formgroup);

Fiddle

You can give any number of attributes like this.

answered May 10, 2016 at 7:05

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aju John · Accepted Answer · 2016-05-10 07:05:25Z

1

You can do like this:

<script>
    var html = '<div class="form-group"><label  class="col-sm-2 control-label">Enter Name</label><div class="col-sm-10"><input type="text" class="form-control" id="nameId" name="fullNme" placeholder="Enter full Name"></div></div>';

    $('.box-body').html(html);
</script>

Another way is:

<div id="container-bkp" style="display:none">
<div class="form-group">
  <label class="col-sm-2 control-label">Enter Name</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" id="nameId" name="fullNme" placeholder="Enter full Name">
  </div>
</div>
</div>

<script>
    $('.box-body').html($('#container-bkp').html());
</script>

answered May 10, 2016 at 7:05

Aju John

2,2441 gold badge14 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to create an HTML Input dynamically using jQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related