input dinamicamente agregar y eliminar

j-diego · #1 (**permalink**) 30/03/2016, 15:05

muy buenas una ayuda a generar campos input dinamicamente y también eliminar el detalle es:

enviar datos a una base da datos tengo un ejemplo pero no logro leer los datos (ojo el input esta repetido), también un boton para eliminar cualquier fila que se genera

ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
<title>Dinamicos</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-es.js"></script>
<style>
.top-buffer {
margin-top:20px;
}
</style>
</head>
<body>

</head>
<body>
<div id="container ">
<div class="row-fluid top-buffer">
<div class="col-lg-6 col-lg-offset-3 text-center">
<form id="miform" method="post" name="miform" >
<table id="tblprod" class="table table-hover table-bordered">
<thead>
<tr>
<th>Cantidad</th>
<th>DETALLE</th>
<th>MODElo</th>
<th>P.UNIT</th>
<th>TOTAL</th>

</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<div class="form-group col-lg-12">
<input class="form-control validate[required]"name="prod[]" />
</div>
</td>
<td>
<div class="form-group col-lg-12">
<input class="form-control validate[required]"name="prod[]" />
</div>
</td><td>
<div class="form-group col-lg-12">
<input class="form-control validate[required]"name="prod[]" />
</div>
</td><td>
<div class="form-group col-lg-12">
<input class="form-control validate[required]"name="prod[]" />
</div>
</td>
</tr>

</tbody>
</table>
<button id="btnadd" class="btn btn-primary">Agregar Nuevo</button>
<button id="btnsubmit" type="submit" class="btn btn-success">Guardar</button>
</form>
</div>
</div>
</div>

<script type="text/javascript">
$(function() {
var count = 1;
jQuery("#miform").validationEngine({promptPosition : "centerRight:0,-5"});

$(document).on("click","#btnadd",function( event ) {
count++;
$('#tblprod tr:last').after('<tr><td>'+count+'</td><td><div class="form-group col-lg-12"><input class="form-control validate[required]" name="prod[]" /></div></td><td><div class="form-group col-lg-12"><input class="form-control validate[required]" name="prod[]" /></div></td><td><div class="form-group col-lg-12"><input class="form-control validate[required]" name="prod[]" /></div></td><td><div class="form-group col-lg-12"><input class="form-control validate[required]" name="prod[]" /></div></td></tr>');
event.preventDefault();
});

$( "#miform" ).submit(function( event ) {
var frm = $(this);
var formulario = $(this).serialize();

if($('#miform').validationEngine('validate')){
$.post( "guardar.php", formulario)
.done(function(data){
alert(data);
$(frm)[0].reset();
})
.fail(function() {
alert( "error no pude enviar los datos" );
});
}
event.preventDefault();
});
});
</script>

</body>
</html>

xfxstudios · #2 (**permalink**) 30/03/2016, 16:07

Va a depender de que vallas a hacer con los datos.

Código PHP:

Ver original$cuenta = count($_POST['prod']);
 
for($i=0; $i < $cuenta; $i++){
 
$producto = $_POST['prod'][$i];
 
$a = $db->query("INSERT INTO tabla (producto)  VALUE ('$producto')");
 
}

Allí contamos cuantas veces se repite el campo en el array enviado con el formulario y ejecutamos la sentencia o lo que sea tantas veces como elementos este contenga

j-diego · #3 (**permalink**) 30/03/2016, 16:24

gracias lo probare en si es input detalle y modelos tiene q tener una instrucción de buscar (autompletar para los demás campos input)

referencia son cinco campos a llenar 2 de ellos tiene q tener una función de auto-completar a los demás campos
ejemplo :

se coloca el modelo o la serie numero de parte con un código de barras y este tiene que llenar los damos datos restantes y si el cliente ya no lo quiere se tiene que eliminar
una vez terminado se imprime una boleta para caja

bueno algo no muy sencilla y muchas gracias por tu ayuda seguiré intentado...

por ejemplo este otro codigo

<!DOCTYPE html>
<html lang="es">
<head>
<title>Dinamicos</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-es.js"></script>
<style>
.top-buffer {
margin-top:20px;
}
</style>
</head>
<body>

</head>
<body>
<div id="container ">
<div class="row-fluid top-buffer">
<div class="col-lg-6 col-lg-offset-3 text-center">
<form id="miform" action="guardar.php" method="post" name="miform" >
<table id="tblprod" class="table table-hover table-bordered">
<thead>
<tr>
<th>Codigo Producto</th>
<th>Nombre</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<div class="form-group col-lg-12">
<div class="form-group col-xs-5">
<input id="codigo" name="prod[0][codigo]" />
</div>
<div class="form-group col-xs-5">
<input id="cantidad" name="prod[0][cantidad]" />
</div>
</div>
</td>
</tr>

</tbody>
</table>
<button id="btnsubmit" type="submit" class="btn btn-success">Guardar</button>
</form>
</div>
</div>
</div>

<script type="text/javascript">
$(function() {
var count = 0;
var countEnter = 0;
jQuery("#miform").validationEngine({promptPosition : "centerRight:0,-5"});
$("#codigo").focus();
$(document).on("keypress", "form", function(event) {
return event.keyCode != 13;
});
$(document).on("keyup", "input", function(e) {
if(e.keyCode == 13)
{
count++;
countEnter++;
var inputs = $(this).closest('form').find(':input');
inputs.eq(inputs.index(this) + 1).focus();
if(countEnter == 2){
$('#tblprod tr:last').after('<tr><td>'+count+'</td><td><div class="form-group col-lg-12"><div class="form-group col-xs-5"><input class="form-control validate[required]" name="prod['+count+'][codigo]" /></div> <div class="form-group col-xs-5"><input class="form-control validate[required]" name="prod['+count+'][cantidad]" /></div></div></td></tr>');
var inputs = $(this).closest('form').find(':input');
inputs.eq(inputs.index(this) + 1).focus();
countEnter = 0;
}

event.preventDefault();
}

});
});
</script>

</body>
</html>

por ejemplo name="prod['+count+'][codigo]" el contador es para identificar q linea es (count) con este valor enviar a un auto-completar para q devuelta a los demás inputs