I have a problem when inserting rows in the table with the enter key event: it works fine if I put the function with the button, but I do not want to add rows when the button is clicked, if I do not want to add the rows in the table when filling the input that in this case would be two the number and the amount, but since the amount is the last input there is where you should take the value for when you press the enter key the row is added to the table, it adds it but it does not remain as if it were restarted, but as I said before with the button if you add it and it works fine but I do not want it that way, if not with the press of the enter key.
Attach the codes: the script
<>
$(document).ready(function(){
$('#bt_add').keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
agregar();
}
});
//$('#bt_add').click(function(){
//agregar();
//});
$('#bt_del').click(function(){
eliminar(id_fila_selected);
});
$('#bt_delall').click(function(){
eliminarTodasFilas();
});
});
var cont=0;
var id_fila_selected=[];
function agregar(){
cont++;
var fila='<tr class="selected" id="fila'+cont+'" onclick="seleccionar(this.id);"><td>'+cont+'</td><td>texto x defecto</td><td>0.00</td><td>confi</td></tr>';
$('#tabla_ventas').append(fila);
reordenar();
}
function seleccionar(id_fila){
if($('#'+id_fila).hasClass('seleccionada')){
$('#'+id_fila).removeClass('seleccionada');
}
else{
$('#'+id_fila).addClass('seleccionada');
}
//2702id_fila_selected=id_fila;
id_fila_selected.push(id_fila);
}
function eliminar(id_fila){
/*$('#'+id_fila).remove();
reordenar();*/
for(var i=0; i<id_fila.length; i++){
$('#'+id_fila[i]).remove();
}
reordenar();
}
function reordenar(){
var num=1;
$('#tabla_ventas tbody tr').each(function(){
$(this).find('td').eq(0).text(num);
num++;
});
}
function eliminarTodasFilas(){
$('#tabla_ventas tbody tr').each(function(){
$(this).remove();
});
}
</script>
Form and table
<form name="frmContacto" method="POST">
<!-- section -->
<section>
<div class="row">
<div class="container">
<?php
$consulta = $DB_con->query("SELECT * FROM hora_sorteo ORDER BY id");
if($consulta->rowCount() > 0){
while ($linea = $consulta->fetch(PDO::FETCH_ASSOC)) {
echo "<div class='col s6 m2'>";
echo "<input type='checkbox' name='fk_hora_sorteo[]'
id='chk1{$linea['id']}' value='{$linea['id']}' />";
echo "<label class='black-text' for='chk1{$linea['id']}'>
{$linea['hora_sorteo']}</label>";
echo "</div>";
}
}
else
echo "<div class='col s12 card-panel yellow darken-2 center'>
<h5 class='black-text text-darken-2 center CONDENSED LIGHT5'>¡
Advertencia: No se ha encontrado ningún registro !</h5>
</div>";
?>
</div>
</div>
</section>
<section>
<div class="row">
<?php
$consulta = $DB_con->query("SELECT * FROM animalitos ORDER BY id");
if($consulta->rowCount() > 0){
$i=1;
while ($linea = $consulta->fetch(PDO::FETCH_ASSOC)) {
?>
<div class="col s1 m1">
<div class="chip">
<img src="../galerias_animalitos/<?= $linea['portada']?>" alt="imagen animalitos"/>
<?php echo $linea['numero']; ?> <?php echo $linea['nombre']; ?>
</div>
</div>
<?php
$i++;
}
}
else
echo "<div class='col s12 card-panel yellow darken-2 center'>
<h5 class='black-text text-darken-2 center CONDENSED LIGHT5'>¡
Advertencia: No se ha encontrado ningún registro !</h5>
</div>";
?>
</div>
</section>
<!-- fin section -->
<div class="row">
<div class="col s12 m5">
<div class="input-field col s12 m4">
<input id="icon_prefix" type="text" name="nombre" autocomplete="off" required/>
<label for="descripcion" class="black-text ">Numero Animalito:</label>
</div>
<div class="input-field col s12 m4">
<input id="bt_add" type="text" name="monto" autocomplete="off" required/>
<label for="descripcion" class="black-text ">Monto:</label>
</div>
<br>
<br>
<br>
<br>
<button class="btn waves-effect blue darken-4 btn-small" type="submit" name="guardar">Generar Jugada</button>
<button id="bt_del" class="btn waves-effect red btn-medium">Eliminar</button>
<button id="bt_delall" class="btn waves-effect red btn-medium">Eliminar Todo</button>
<div class="col center s12 m12">
<h4 class="left-align black-text">Serial: Total:</h4>
</div>
</div>
</form>
<div class="col s12 m7">
<div style=' overflow: auto; height: 250px;'>
<table id="tabla_ventas" class='bordered responsive-table centered'>
<thead>
<tr>
<th data-field='Nº'>ANIMALITO</th>
<th data-field='Código'>SORTEO</th>
<th data-field='Código'>MONTO</th>
<th data-field='Código'>OPERACIONES</th>
</tr>
</thead>
</table>
</div>
</div>
</div>