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

Recommended Answers

All 2 Replies

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.