CODEWITHSUNDEEP
javascriptjqueryhtml
Viacheslav Nmk
Viacheslav Nmk

Reputation: 45

How to duplicate specific sections of form?

I have some code as the following example:

<form>
  <label>name</label><input type="text" />
  <label>phone</label><input type="text" />

  <label>color</label><select>
    <option>red</option>
    <option>blue</option>
    <option>green</option>
  </select>

  <label>e-mail</label><input type="text" />
</form>

And I want to duplicate only the select section if the user needs it via button between the select section and the e-mail input field.

I'm not really into JavaScript or jQuery so it would very appreciated if you could also add a clear explanation to your answer.

Upvotes: 4

Views: 104

Answers (2)

Jitendra G2
Jitendra G2

Reputation: 1206

You can use clone() to copy an element. See below example with an explanation.

  1. A div element with name "color-selections" contain a initial select tag.

    <div class="color-selections"> <select> <option>red</option> <option>blue</option> <option>green</option> </select> </div>

  2. There will be unknown number of select tag inside the "color-selections" class. So i use first() method to get first element (Original select tag).

    $(".color-selections select:first")

  3. Copy the first element using clone().

    $(".color-selections select:first").clone()

  4. Finally, Append this clone element into "color-selections" class using appendTo() method.

    $(".color-selections select").first().clone().appendTo(".color-selections");

function addColor() {
  $(".color-selections select:first").clone().appendTo(".color-selections")
  //OR $(".color-selections select").first().clone().appendTo(".color-selections");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label>name</label><input type="text" />
  <label>phone</label><input type="text" />

  <label>color</label>
  <div class="color-selections">
    <select> //$(".color-selections select:first")
      <option>red</option>
      <option>blue</option>
      <option>green</option>
    </select>
  </div>
  <input type="button" value="+" onclick="addColor();">

  <label>e-mail</label><input type="text" />
</form>

I hope design is not an important part of sample code.

Upvotes: 1

Itay Gal
Itay Gal

Reputation: 10834

You can use JQuery clone function to clone your element and then append it where you need it, or if you need to have a different id for each section you need you might want to save an index and set it as an id each time you add a section

var index = 1;
function addColor() {
  var nextSection = '<div id="color-section-' + index++ + '">' +
    '<label>color</label>' +
    '<select>' +
      '<option>red</option>' +
      '<option>blue</option>' +
      '<option>green</option>' +
    '</select><br />' +
  '</div>';
  $(nextSection).appendTo($("#color-section"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
  <label>name</label><input type="text" /><br />
  <label>phone</label><input type="text" /><br />

  <div id="color-section">
    <label>color</label>
    <select>
      <option>red</option>
      <option>blue</option>
      <option>green</option>
    </select><br />
  </div>

  <label>e-mail</label><input type="text" /><br />
</form>

  <button onClick="addColor()">Add Color</button><br />

Upvotes: 2

Related Questions