CODEWITHSUNDEEP
javascriptjqueryhtml
user6579134
user6579134

Reputation: 839

Insert more fields onclick using jquery

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>

Upvotes: 1

Views: 74

Answers (3)

Ramon Marques
Ramon Marques

Reputation: 3264

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>

Upvotes: 1

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7161

$(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>

Upvotes: 1

Jakub Pastorek
Jakub Pastorek

Reputation: 94

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>

Upvotes: 0

Related Questions