Member Avatar for hiyatran

When I click on an "Add" button, it would create a new form with the "First Name", "Last Name" field and 2 textboxes, just like the original.
So if I click on the "Add" button 5 times, it would create 5 new forms for me. Same idea applies for the "Delete" button.

Here's my code:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
   <FORM NAME="myForm">
   First Name: <input type="text" name="1stName" ><br />
   Last Name: <input type="text" name="lastName" ><br /><br />
   <input id="bu_add" type="button" value="Add" >
   <input id="bu_delete" type="button" value="Delete">
   </FORM>
</body>
</html>

If you can help me out, I would greatly appreciated. Or if you know what this is call, I can just look it up.

tks

  • 3 Contributors
  • 2 Replies
  • 116 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Bachu
Member Avatar for radow

you would like add new fields in out your the form or create new form with fields described above?

Member Avatar for Bachu

Try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form - Exg</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
<div class="formDiv">
<table id="myTable" width="600px" cellpadding="0px" cellspacing="0px">
  <tr><td>First Name</td><td><input type="text" name="txtFirstName[]" /></td></tr>
  <tr><td>Last Name</td><td><input type="text" name="txtLastName[]" /></td></tr>
</table>
</div>
<hr />
<div class="appendDiv">
</div>
<input class="addNewForm" type="button" value="Add" >
<script type="text/javascript">
$(function(){
    $('.addNewForm').live('click',function(){
        $('.appendDiv').append('<div class="subForm">'+$('.formDiv').html()+'<input class="deleteForm" type="button" value="Delete" ><hr /></div>');
    });
    $('.deleteForm').live('click',function(){
        $(this).closest('.subForm').remove();
    });
});
</script>

</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.