Insert more fields onclick using jquery

Question

I'm working on a web application that gives user the chance to input more names as user wishes. the form has a link that has to perform an addition of textboxes on click of that link. i know there is a way to use jquery to do that but currently don't know why cos i just moved to jquery from angularjs

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
      <table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td><div align="right"><strong><a href="#">Add More Fields</a></strong></div></td>
        </tr>
        <tr>
          <td>Name</td>
          <td>Address</td>
          <td>Age</td>
          <td>Phone Number</td>
        </tr>
        <tr>
          <td><input type="text" name="name" id="name"></td>
          <td><input type="text" name="address" id="address"></td>
          <td><input type="text" name="age" id="age"></td>
          <td><input type="text" name="phone_number" id="phone_number"></td>
        </tr>
      </table>
    </form>

Bhargav Chudasama · Accepted Answer · 2017-06-15 13:23:13Z

1

$(document).ready(function()
  {
      $('a').click(function(){
          var id=$(':text').length;
          $('#field').append('<td>Textbox'+id+'</td>');
          $('#more').append('<td><input type="text" id='+id+' name="text'+id+'"></td>');
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
      <table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td><div align="right"><strong><a href="#">Add More Fields</a></strong></div></td>
        </tr>
        <tr id="field">
          <td>Name</td>
          <td>Address</td>
          <td>Age</td>
          <td>Phone Number</td>
        </tr>
        <tr id="more">
          <td><input type="text" name="name" id="name"></td>
          <td><input type="text" name="address" id="address"></td>
          <td><input type="text" name="age" id="age"></td>
          <td><input type="text" name="phone_number" id="phone_number"></td>
        </tr>
      </table>
    </form>

or try this one

$(document).ready(function()
  {
      $('a').click(function(){
          var id=$(':text').length;
          $('#more td').append('<input type="text" id='+id+' name="text'+id+'">');
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
  input{
    margin-bottom: 10px;
  }
</style>
<form name="form1" method="post" action="">
      <table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td><div align="right"><strong><a href="#">Add More Fields</a></strong></div></td>
        </tr>
        <tr id="field">
          <td>Name</td>
          <td>Address</td>
          <td>Age</td>
          <td>Phone Number</td>
        </tr>
        <tr id="more">
          <td><input type="text" name="name" id="name"></td>
          <td><input type="text" name="address" id="address"></td>
          <td><input type="text" name="age" id="age"></td>
          <td><input type="text" name="phone_number" id="phone_number"></td>
        </tr>
      </table>
    </form>

edited Jun 15, 2017 at 13:23

answered Jun 15, 2017 at 12:58

Bhargav Chudasama

7,2256 gold badges24 silver badges41 bronze badges

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

3 Comments

user6579134 Over a year ago

i just tried but when it adds and i check the id's of the textfield, its all the same, but i was thinking i get eg. name2 and on next click name4 etc

user6579134 Over a year ago

because i will be inserting into the database so each has to be unique

Bhargav Chudasama Over a year ago

all field you have want textbox or only name field textbox @user6579134

Ramon Marques · Accepted Answer · 2017-06-15 16:30:50Z

1

First you have to identify better your elements. Let's put an id for table, an id for add more fields link and a class for tr model.

Then we have to copy all html you want to duplicate. Then append it to table.

Remember that doing this, when you submit, all those duplicate parameters will become an array of values.

Let's refactor some bad code here too.

Since we are duplicating fields we need to remove Id attribute of them all.

I'm moving add link outside the table and removing those blank tds. Also write a good table with thead and tbody.

When we want to add field, we want to remove too. So let's create a link to remove.

function cloneTrModel() {
  return $('.model').first().clone();
}

var trModel = cloneTrModel();

function setRemove() {
  $(".remove" ).click(function() {
    $(this).closest('tr').remove();
  });
}

setRemove();

$( "#add" ).click(function() {
  $("#contactTable tbody").append(trModel);
  trModel = cloneTrModel();
  setRemove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form name="form1" method="post" action="">
<strong style="float: right;"><a href="#" id="add">Add More Fields</a></strong>
  <table id="contactTable" width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>Age</th>
      <th>Phone Number</th>
      <th>Action</th>
    </tr>
    </thead>
    <tbody>
    <tr class="model">
      <td class="inner"><input type="text" name="name[]"></td>
      <td><input type="text" name="address[]"></td>
      <td><input type="text" name="age[]"></td>
      <td><input type="text" name="phone_number[]"></td>
      <td><a href="javascript:;" class="remove">Remove</a></td>
    </tr>
    </tbody>
  </table>
</form>

edited Jun 15, 2017 at 16:30

answered Jun 15, 2017 at 12:46

Ramon Marques

3,2842 gold badges26 silver badges36 bronze badges

2 Comments

user6579134 Over a year ago

when i click can i get an increment to the ids and the names of each textbox

Ramon Marques Over a year ago

Yes it's possible. However it's not a good thing to do what you are thinking. The right way is transform every field's name to an array. name="address[]" for example

Jakub Pastorek · Accepted Answer · 2017-06-15 12:32:05Z

Something like that

$( "#add" ).click(function() {
$( ".inner" ).append( "<input type='text' name='name' id='name'>" );

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form name="form1" method="post" action="">
  <table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><div align="right"><strong><a href="#" id="add">Add More Fields</a></strong></div></td>
    </tr>
    <tr>
      <td>Name</td>
      <td>Address</td>
      <td>Age</td>
      <td>Phone Number</td>
    </tr>
    <tr>
      <td class="inner"><input type="text" name="name" id="name"></td>
      <td><input type="text" name="address" id="address"></td>
      <td><input type="text" name="age" id="age"></td>
      <td><input type="text" name="phone_number" id="phone_number"></td>
    </tr>
  </table>
</form>

Collectives™ on Stack Overflow

Insert more fields onclick using jquery

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related