How to generate input fields dynamically

Question

I have a form with input fields.

Once,I clicked on submit button I want to generate 2 input fields with a "plus / +" icon. So, when I click on "+" icon it will generate input fields.

Here is the html part:

 <label>Name</label>
 <input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium"/>
 <label>Id</label>
 <input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">

<button id="demo_submit" class="btn" name="demo_submit" type="button">Submit</button>

What have you tried? What don't you understand? Are you asking how to handle events? How to create new elements? — SLaks
– SLaks, Commented Feb 23, 2014 at 16:42

JohanVdR · Accepted Answer · 2014-02-23 16:50:32Z

1

I suggest to have a look at existing plugins (For example - Jquery SheepIt! Plugin) and see how that is coded.

To add dynamically form elements this can be done with the clone() method and DocumentFragment - http://ejohn.org/blog/dom-documentfragments/

answered Feb 23, 2014 at 16:50

JohanVdR

2,8781 gold badge17 silver badges16 bronze badges

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

Comments

Hariom Balhara · Accepted Answer · 2014-02-23 16:48:38Z

Working example at http://plnkr.co/edit/szYoU4GCeLWX8b9DcsYT

<script type="text/javascript">
  function addFields () {
  var newNode1 = document.createElement('input'),
     newNode2 = document.createElement('input');
   newNode1.type = newNode2.type = "text"; document.forms[0].appendChild(newNode1);
    document.forms[0].appendChild(newNode2);
  }
</script>
  <form>  
  <label>Name</label>
    <input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium"/>
    <label>Id</label>
    <input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">

   <button id="demo_submit" class="btn" name="demo_submit" type="button" onclick="addFields()">Submit</button>
</form>

This is what am looking for. However,I need the 1st fields with value Jim and 123 to be disabled once sumbit is clicked..
You can do document.getElementById('demo_1').disabled=true; Use this to learn more about it. stackoverflow.com/questions/2874688/…

Yene Mulatu · Accepted Answer · 2014-02-23 16:45:11Z

0

$(".addInput").click(function { $("form").append( PUT INPUT ELEMNT HERE); });

answered Feb 23, 2014 at 16:45

Yene Mulatu

2,2661 gold badge17 silver badges13 bronze badges

1 Comment

Yene Mulatu Over a year ago

This is not the way to learn but, since you are new I will try to help you. jsfiddle.net/Yene/J7fLY check out the link

Bhavik · Accepted Answer · 2014-02-23 16:53:53Z

Check this out.
HTML

<label>Name</label>
<input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium" />
<label>Id</label>
<input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">
<button id="demo_submit" class="btn" name="demo_submit" type="button">Submit</button>
<button id="demo_add" class="btn" name="demo_add" type="button">Add more</button>
<div id='add'></div>

jQuery

$('#demo_add').click(function () {
    $inputName = "<input type='text' placeholder='Name'/>";
    $inputId = "<input type='text' placeholder='Id'/>";
    $br = "<br/>";
    $('#add').append($inputName);
    $('#add').append($inputId);
    $('#add').append($br);
});

Hopefully it helps.

once submit is clicked i want the first fields to get disabled so we cannot change the input..

Collectives™ on Stack Overflow

How to generate input fields dynamically

4 Answers 4

Comments

2 Comments

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

1 Comment

Linked

Related