Question 246659 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

HTML Form jquery clone issue

I have a form in html page, with 3 inputs, I would like to have a add-form button , when I click , the 3 input are cloned, between the first input group and the submit button.

Actually, when I click, the all form seems cloned, so I have 2 times add-form button and submit button.

var clone = $('#form-container').html();

$('#add-form').click(function() {
  $('#form-container').append(clone);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form id="form-container" method="GET">
  <table>
    <div class="table-form">
      <label for="Field">Field </label>
      <select name="field" class="form-control">
        <option value="opt">label</option>
      </select>
      <label for="lookup">Lookup </label>
      <select name="lookup" class="form-control">
        <option value="iexact">iexact</option>
        <option value="icontains">icontains</option>
        <option value="in">in</option>
      </select>
      <label for="value">Value </label>
      <input id="value" type="text" name="value" value="current_value">
    </div>
  </table>
  <button id="add-form" type="button" class="btn btn-primary">Add form</button>
  <button type="submit" class="btn btn-primary">Search</button>
  <button type="submit" name="btn-reset" class="btn btn-secondary" value="btn-reset">Reset</button>
</form>
Tags:

2

Answers


  1. 0

    Note I removed the invalid table tag and changed type="submit" to type="reset" on the reset button

    If you only want the content of the table-form to be duplicated, then we can do this instead

    const html = $('div.table-form').first().html();
$('#add-form').on('click', function() {
  $('div.table-form').append(`<br/>${html}`);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form id="form-container" method="GET">
  <div class="table-form">
    <label for="Field">Field </label>
    <select name="field" class="form-control">
      <option value="">Please select</option>
      <option value="opt1">Opt 1</option>
    </select>
    <label for="lookup">Lookup </label>
    <select name="lookup" class="form-control">
      <option value="">Please select</option>
      <option value="iexact">iexact</option>
      <option value="icontains">icontains</option>
      <option value="in">in</option>
    </select>
    <label for="value">Value </label>
    <input id="value" type="text" name="value" value="">
  </div>
  <button id="add-form" type="button" class="btn btn-primary">Add form</button>
  <button type="submit" class="btn btn-primary">Search</button>
  <button type="reset" name="btn-reset" class="btn btn-secondary" value="btn-reset">Reset</button>
</form>

    If, however you want to CLONE the div, then this code will create a new clone each time since if you only store a clone outside the click, it will be the same element that is moved (appended) each time. It makes more sense to have a set inside a div in the form than than to add the elements to one div

    $('#add-form').on('click', function() {
  var $clone = $('div.table-form').first().clone();
  $clone.find("select").each(function() { this.selectedIndex = 0; });
  $clone.find("input").each(function() { this.value=""; });
  $('div.table-form').last().after($clone);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form id="form-container" method="GET">
  <div class="table-form">
    <label for="Field">Field </label>
    <select name="field" class="form-control">
      <option value="">Please select</option>
      <option value="opt1">Opt 1</option>
    </select>
    <label for="lookup">Lookup </label>
    <select name="lookup" class="form-control">
      <option value="">Please select</option>
      <option value="iexact">iexact</option>
      <option value="icontains">icontains</option>
      <option value="in">in</option>
    </select>
    <label for="value">Value </label>
    <input id="value" type="text" name="value" value="">
  </div>
  <button id="add-form" type="button" class="btn btn-primary">Add form</button>
  <button type="submit" class="btn btn-primary">Search</button>
  <button type="reset" name="btn-reset" class="btn btn-secondary" value="btn-reset">Reset</button>
</form>
    Login or Signup to reply.
  2. 0

    You need to clone only the section that you want to clone and append it in #form-container' You can use like

    /// Clone the table form
var clone = $('.table-form').html();

$('#add-form').click(function(e) {
  // append it to the table-form
  $('.table-form').append(clone);
  e.preventDefault()
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search