I want to know how we make a duplicate copy of html form on button click with different Id

Question

2.33/5 (2 votes)

See more:

HTML

<div id="contact">
 <div class="row">
 <div class="col-sm-4">
 <div class="form-group">
 <span class="input-icon icon-right">
 <input type="text" class="form-control" placeholder="Business Phone id="BusinessPhone" ng-model="vm.clientinfo.BusinessPhone">

 </span>
  </div>
  </div>
   <div class="col-sm-4">
  <div class="form-group">
  <span class="input-icon icon-right">
 <input type="text" class="form-control" placeholder="Fax" id="Fax" ng-model="vm.clientinfo.Fax">
    ^__i class="fa fa-lock circular">
 </span>
   </div>
 </div>
 <div class="col-sm-4">
<label>
<input type="checkbox" id="checkbox1" value=1 ng-model="vm.clientinfo.assign">
 <span class="text">Assign Password and Personal Contact Information</span>
 </label>
  </div>
  </div>
<input id="addcontactbutton" type="button" value="Add Another Contact" class="btn btn-blue" />
 <input id="removecontactbutton" type="button" value="Remove This Contact" class="btn btn-blue" />
  </div>

i want help for

1) in the above code i want to add a copy of this form on addcontactbutton with different id and different ng-modelof all the controls on above form.
2) and remove the added on button removecontactbutton click.

using jquery

thanks in advance
please help

Posted 1-Oct-15 1:43am

Member 11909451

Updated 6-Jun-16 20:51pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Palash Mondal_ · Answer 1 · 2015-10-01T02:29:00

1. You can use jQuery clone() to copy the entire form
jquery clone example[^]

2. Then loop through each form and give a different id to each one of them

3. On click of the remove button, remove the respective form by making use of $(this)

I hope this would help you getting started. If you get stuck in somewhere, then please post a new question along with the code which was not working properly for you while working on it.