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, Feb 23 '14 at 16:42

score 1 · Answer 1 · answered Feb 23 '14 at 16:50

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/

score 0 · Answer 2 · answered Feb 23 '14 at 16:45

0

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

answered Feb 23 '14 at 16:45

Yene Mulatu

2,226
1
17
13

This is not the way to learn but, since you are new I will try to help you. http://jsfiddle.net/Yene/J7fLY/ check out the link – Yene Mulatu Feb 23 '14 at 16:54

score 0 · Accepted Answer · answered Feb 23 '14 at 16:48

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.. — user3340300, Feb 23 '14 at 16:52
You can do document.getElementById('demo_1').disabled=true; Use this to learn more about it. http://stackoverflow.com/questions/2874688/how-to-disable-an-input-type-text-with-javascript — Hariom Balhara, Feb 23 '14 at 16:56

score 0 · Answer 4 · answered Feb 23 '14 at 16:53

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.. — user3340300, Feb 23 '14 at 16:56

How to generate input fields dynamically

4 Answers4