$(document).ready(function(){
var addButton = $('.btn-danger'); //Add button selector
var wrapper = $('.col-sm-9'); //Input field wrapper
var fieldHTML = '<div style="margin-top:10px"class="input-group"> <input type="text" name="field_producto[]" class="form-control" placeholder="Ingrese el producto"> <span class="input-group-btn" style="width:0px;"></span> <input type="text" name="field_cantidad[]" class="form-control" placeholder="Ingrese la cantidad"> <div class="input-group-btn"> <button type="button" id="btn-erase" class="btn btn-danger">-</button></div></div>'; //New input field html
$(addButton).click(function(){ //Once add button is clicked
$(wrapper).append(fieldHTML);
});
$(wrapper).on('click', '#btn-erase', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parent().parent().remove(); //Remove field html
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="registrar.php" method="post">
<div class="form-group">
<label for="idusuario">Ingresar cliente:</label>
<input type="text" REQUIRED class="form-control" id="idusuario" placeholder="Ingresar Nombre">
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Ingrese el producto:</label>
<div class="col-sm-9">
<div class="input-group">
<input type="text" name="field_producto[]" class="form-control" placeholder="Ingrese el producto">
<span class="input-group-btn" style="width:0px;"></span>
<input type="text" name="field_cantidad[]" class="form-control" placeholder="Ingrese la cantidad">
<div class="input-group-btn">
<button type="button" class="btn btn-danger">+</button>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Registrar</button>
<button type="button" class="btn btn-default">Cancelar</button>
</form>
Buenas. Como lo dice en el titulo de la pregunta, necesito ayuda para insertar los datos ingresados en inputs fields dinamicos. Usualmente agrego por cada input que coloco yo mismo, pero no se como hacerlo para insertar datos de inputs generados por jquery.
Este es el codigo jquery:
<script type="text/javascript">
$(document).ready(function(){
var addButton = $('.btn-danger'); //Add button selector
var wrapper = $('.col-sm-9'); //Input field wrapper
var fieldHTML = '<div style="margin-top:10px"class="input-group"> <input type="text" name="field_producto[]" class="form-control" placeholder="Ingrese el producto"> <span class="input-group-btn" style="width:0px;"></span> <input type="text" name="field_cantidad[]" class="form-control" placeholder="Ingrese la cantidad"> <div class="input-group-btn"> <button type="button" id="btn-erase" class="btn btn-danger">-</button></div></div>'; //New input field html
$(addButton).click(function(){ //Once add button is clicked
$(wrapper).append(fieldHTML);
});
$(wrapper).on('click', '#btn-erase', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parent().parent().remove(); //Remove field html
});
});
</script>
Y este seria el fragmento de mi codigo HTML con Bootstrap:
<form action="registrar.php" method="post">
<div class="form-group">
<label for="idusuario">Ingresar cliente:</label>
<input type="text" REQUIRED class="form-control" id="idusuario" placeholder="Ingresar Nombre">
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Ingrese el producto:</label>
<div class="col-sm-9">
<div class="input-group">
<input type="text" name="field_producto[]" class="form-control" placeholder="Ingrese el producto">
<span class="input-group-btn" style="width:0px;"></span>
<input type="text" name="field_cantidad[]" class="form-control" placeholder="Ingrese la cantidad">
<div class="input-group-btn">
<button type="button" class="btn btn-danger">+</button>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Registrar</button>
<button type="button" class="btn btn-default">Cancelar</button>
</form>
Funciona bien, agrego los input, y los elimino, todo perfectamente ordenado. Ahora lo que deseo hacer es que al momento de registrar en la base de datos, pueda registrar todos lo que se ingreso en cada input generado. Estaré enormemente agradecido.