html - Clone div with Select and input objects without values and increment form names - Stack Overflow

admin管理员组

文章数量:1396778

I want to clone a whole div with the two objects (select box and input text and his classes), but without the previously entered data and to increment the name and id of the objects.

The name and the id of the standard select is product0 so after cloning the div i want to get product1. The same for the input object. The standard calls amount0 and after cloning the div i want to get amount1.

FYI : In real i am using a PHP function for loading the values inside the dropdown list , the bootstrap-select component for the dropdown object and the jquery mask plugin to show the numberformat.

$(function(){
  $( "#addProduct" ).click(function(){
    var $products = $("#products").clone();  
    $('.clonedProduct').last().after($products); 
  });
});

<script src=".9.1/jquery.min.js"></script>
<div class="row mb-3 clonedProduct" id="products">
  <div class="col-lg-3 col-sm-6">
    <label for="prod_valid" class="form-label">Product</label>
  </div>
  <div class="col-lg-3 col-sm-6">
    <select class="bg-light border-tr" id="product0" name="product0" aria-label="" title="" data-live-search="true" data-width="100%" required>
        <option></option>
        <option value="1">Apples</option>
        <option value="2">Oranges</option>
        <option value="3">Bananas</option>
    </select>
  </div>
  <div class="col-lg-3 col-sm-6">
    <label for="amount" class="form-label">Amount</label>
  </div>
  <div class="col-lg-3 col-sm-6">
    <input type="text" class="form-control money" id="amount0" name="amount0" placeholder="0,00 €">
  </div>   
</div>

<input type="button" class="btn btn-success" value="+" id="addProduct"/>

I want to clone a whole div with the two objects (select box and input text and his classes), but without the previously entered data and to increment the name and id of the objects.

The name and the id of the standard select is product0 so after cloning the div i want to get product1. The same for the input object. The standard calls amount0 and after cloning the div i want to get amount1.

FYI : In real i am using a PHP function for loading the values inside the dropdown list , the bootstrap-select component for the dropdown object and the jquery mask plugin to show the numberformat.

$(function(){
  $( "#addProduct" ).click(function(){
    var $products = $("#products").clone();  
    $('.clonedProduct').last().after($products); 
  });
});

<script src="https://cdnjs.cloudflare/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row mb-3 clonedProduct" id="products">
  <div class="col-lg-3 col-sm-6">
    <label for="prod_valid" class="form-label">Product</label>
  </div>
  <div class="col-lg-3 col-sm-6">
    <select class="bg-light border-tr" id="product0" name="product0" aria-label="" title="" data-live-search="true" data-width="100%" required>
        <option></option>
        <option value="1">Apples</option>
        <option value="2">Oranges</option>
        <option value="3">Bananas</option>
    </select>
  </div>
  <div class="col-lg-3 col-sm-6">
    <label for="amount" class="form-label">Amount</label>
  </div>
  <div class="col-lg-3 col-sm-6">
    <input type="text" class="form-control money" id="amount0" name="amount0" placeholder="0,00 €">
  </div>   
</div>

<input type="button" class="btn btn-success" value="+" id="addProduct"/>

• html
• jquery

Share Improve this question Follow asked Mar 26 at 12:33 achillixachillix 47955 silver badges1717 bronze badges 4

• you may prefer to use a <template> ? – Mister Jojo Commented Mar 26 at 12:37
• a template? i don't understand what you mean ? – achillix Commented Mar 26 at 12:41
• 1 first of all I would address the semantics.. why are you cloning #products if you are going to clone one product only. Secondly.. as pointed out, you are using a convoluted strategy. It could be done also by having a reference element to be cloned but it makes it odd the way you are choosing how to select any previous "product" to be cloned. While if you just have a template to use as a blueprint you would just need to code the function returning a new iteration of product having the id set based on your criteria – Diego D Commented Mar 26 at 12:43
• You can set the attribute while cloning; something like $("#products").clone().attr('id', 'products1'). – SoftwareDveloper Commented Mar 26 at 16:39

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

You can also use Range: createContextualFragment() method

const ihm_products = (()=> // IIFE
  {
  const products    = document.querySelector('#products');
  const workinRange = new Range();
  let   prod_id     = -1;

  add();  // add first...

  function add()
    {
    fragHTML = workinRange.createContextualFragment(`
      <div class="product">
        <div class="row">
          <div class="col-lg-3 col-sm-6">
            <label for="prod_valid" class="form-label">Product</label>
          </div>
          <div class="col-lg-3 col-sm-6">
            <select class="bg-light border-tr" id="product${++prod_id}" name="product${prod_id}" aria-label="" title="" data-live-search="true" data-width="100%" required>
                <option value="" selected disabled >pick one...</option>
                <option value="1">Apples</option>
                <option value="2">Oranges</option>
                <option value="3">Bananas</option>
            </select>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-3 col-sm-6">
            <label for="amount" class="form-label">Amount</label>
          </div>
          <div class="col-lg-3 col-sm-6">
            <input type="text" class="form-control money" id="amount${prod_id}" name="amount${prod_id}" placeholder="0,00 €">
          </div>
        </div>
      </div>`);
    products.append(fragHTML);
    }
  return { add }  
  }
)();

document.querySelector('#addProduct')
  .addEventListener('click', ihm_products.add );

#products {
  padding : 1em;
  width   : 100%;
  }
.product {
  margin  : 1em;
  padding : 1em;
  border  : solid 1px #ccc;
  }

<link rel="stylesheet" href="https://cdnjs.cloudflare/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" />

<div class="row mb-3 clonedProduct" id="products">
</div>

<input type="button" class="btn btn-success" value="+" id="addProduct"/>

本文标签： htmlClone div with Select and input objects without values and increment form namesStack Overflow