Menu
i have an issue. How can i clone an existing div with jquery?
[Image]1
<div class="modal-body">
<div class="row">
<div class="col-md-5 text-center">
<b>Número Factura</b>
<input type="number" class="form-control" id="numero"><br/>
</div>
<div class="col-md-2 text-center">
-o-
</div>
<div class="col-md-5 text-center">
<b>Número Remisión</b>
<input type="number" class="form-control" id="remision"><br/>
</div>
<div class="col-md-12">
<b>NIT:</b>
<?php $consulta = mysqli_query($conexion, "SELECT * FROM proveedores");
$resultado = mysqli_fetch_all($consulta, MYSQLI_ASSOC); ?>
<select class="form-control" id="proveedor">
<?php foreach($resultado as $r): ?>
<option value="<?php echo $r['nit']; ?>"><?php echo $r['nombre']; ?></option>
<?php endforeach; ?>
</select><br/>
</div>
<div class="col-md-2">
<input type="number" class="form-control" id="productos" value="1">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success agregar_producto" name="agregar_producto">
<i class="fas fa-user-plus" style="color: white"></i>
</button>
</div>
</div>
<br/>
<div id="contenido" class="row text-center">
<div class="col-md-4">
<b>Producto</b>
<?php $consulta = mysqli_query($conexion, "SELECT * FROM productos");
$resultado = mysqli_fetch_all($consulta, MYSQLI_ASSOC); ?>
<select class="form-control" id="producto">
<?php foreach($resultado as $r): ?>
<option value="<?php echo $r['id']; ?>"><?php echo $r['descripcion']; ?></option>
<?php endforeach; ?>
</select><br/>
</div>
<div class="col-md-4">
<b>Cantidad</b>
<input type="number" class="form-control" id="cantidad"><br/>
</div>
<div class="col-md-4">
<b>Precio</b>
<input type="number" class="form-control" id="precio"><br/>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success crear" name="crear">Agregar Factura</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Regresar</button>
</div>
I need to clone the div with id="contenido" when someone press the button with class="agregar_producto".
How can i solve it? [Example]2
Is it possible? i need only an example to solve my problem. Thx you! <3
EDIT: If a clone this inputs how can i change ids/class to this inputs?
598
First, select the div element which need to be copy into another div element. Select the target element where div element is copied. Use the append() method to copy the element as its child.
Syntax: // Create a clone of the object using the extend() method let newObj = jQuery. extend({}, obj); // Create a deep clone of the object using the deep parameter let newDeepObj = jQuery. extend(true, {}, obj);
Use the cloneNode() method to clone the element. Set a different id property on the element. For example, clone.id = 'another-id' .
We can replace HTML elements using the jQuery . replaceWith() method. With the jQuery replaceWith() method, we can replace each element in the set of matched elements with the provided new content and return the set of elements that were removed.
Hi Please check below code:
<html>
<head>
<title>Sample HTML</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body bgcolor=white>
<div id="contenido" class="row text-center">
<div class="col-md-4">
<b>Producto</b>
<select class="form-control" id="producto">
<option value="product1">product1</option>
<option value="product2">product2</option>
<option value="product3">product3</option>
<option value="product4">product4</option>
<option value="product5">product5</option>
<option value="product6">product6</option>
</select><br/>
</div>
<div class="col-md-4">
<b>Cantidad</b>
<input type="number" class="form-control" id="cantidad"><br/>
</div>
<div class="col-md-4">
<b>Precio</b>
<input type="number" class="form-control" id="precio"><br/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn agregar_producto" name="crear">Agregar Producto</button>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(".agregar_producto").on('click', function() {
var $contenido = $("#contenido:last");
var $clone = $contenido.clone();
$clone.find('input').val('');
$contenido.after($clone);
});
});
</script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
