3

Verán, tengo mi código, en el cual de una busqueda que realizo, al seleccionar el resultado los campos (INPUTS) se me llenan automaticamente usando el autocomplete. Ahora bien, al hacer clic en agregar usando JQuery he creado una tabla la cual me crea todos los INPUTS similar al que recibe toda la información arriba. Lo que quiero hacer es que al hacer clic en 'Agregar' el INPUT que se llena con el Autocomplete quede vacío y que esa información se vaya al INPUT creado con Jquery, pero no tengo ni idea de como hacerlo.

Este es mi código:

$(document).ready(function() {
    $("#masfilas").click(function(){
        $("#mytable").append('<tr><td><input type="text" id="qty" name="quantity" size="5" title="Cantidad"/></td><td><input type="text" id="upc" name="codigo" size="12" title="Código"/></td><td><input type="text" id="nomprod" name="nombre" size="23" title="Nombre"/></td><td><input type="text" id="precio" name="price" size="10" title="Precio del producto"/></td><td><input type="text" id="discount" name="discount" size="15" title="Descuento"/></td><td><input type="text" id="impuestos" class="imp" name="impuestoivi" size="15" title="Impuesto de Ventas"/></td><td><input type="text" id="total" class="imp" name="totalizar" size="15" title="Total de Línea"/></td><td><a href="#" class="delete" title="Eliminar línea">ELIMINAR</a></td></tr>');
        $('.delete').off().click(function(e) {
            $(this).parent('td').parent('tr').remove();
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="70%" align="center">
	<tr bgcolor="#CCCCCC">
    	<td width="70%" align="left" colspan="2"><b>DETALLE</b></td>
    </tr>
    <tr>
    	<td width="70%"><input type="text" name="itemsearch" id="item" size="50" placeholder="INICIAR BÚSQUEDA" title="Ingrese Nombre del Articulo" /></td>
    </tr>
</table>

<table width="70%" align="center">
	<tr>
    	<td colspan="9"><b>Agregar Artículos / Servicios:</b></td>
    </tr>
    <tr>
    	<td>Cantidad:</td>
        <td>Código:</td>
        <td>Nombre:</td>
        <td>Precio:</td>
        <td>Descuento (%):</td>
        <td>Impuesto:</td>
        <td>Total:</td>
        <td colspan="2">Opciones:</td>
    </tr>
    <tr>
    	<td><input type="text" id="qty" name="quantity" size="5" title="Cantidad"/></td>
        <td><input type="text" id="upc" name="codigo" size="12" title="Código" placeholder="744105300000" readonly="readonly"/></td>
        <td><input type="text" id="nomprod" name="nombre" size="23" title="Nombre" readonly="readonly"/></td>
        <td><input type="text" id="precio" name="price" size="10" title="Precio del producto" placeholder="CRC. 0.00"/></td>
        <td><input type="text" id="discount" name="discount" size="15" title="Descuento" placeholder="0.00%"/></td>
        <td><input type="text" id="impuestos" class="imp" name="impuestoivi" size="15" title="Impuesto de Ventas" placeholder="CRC. 0.00"/></td>
        <td><input type="text" id="total" class="imp" name="totalizar" size="15" title="Total de Línea" placeholder="CRC. 0.00"/></td>
        <td><a href="#" title="Agregar línea" id="masfilas" class="add_form_field">AGREGAR</a></td>
        <td><a href="#" title="Eliminar línea">ELIMINAR</a></td>
    </tr>
</table>

<table width="70%" align="center" border="1" id="mytable" class="table-bordered table-striped">
	<tr bgcolor="#CCCCCC">
    	<td width="70%" align="left" colspan="8"><b>RESUMEN DEL CARRITO</b></td>
    </tr>
    <tr>
    	<td width="3%">Cantidad:</td>
        <td width="10%">Código:</td>
        <td width="13%">Nombre:</td>
        <td width="5%">Precio:</td>
        <td width="9%">Descuento (%):</td>
        <td width="10%">Impuesto:</td>
        <td width="10%">Total:</td>
        <td colspan="2" width="10%">Opciones:</td>
    </tr>
</table>

Por su atención y ayuda, gracias!

2
  • Porque usas inputs en la tabla despues de agregar? Que no seria mejor texto simple. Los inputs se utilizan para que el usuario ingrese valores
    – alanfcm
    el 18 may. 2018 a las 21:47
  • Sí, pues esque no soy experto. Estos comentarios me ayudan a mejorar, lo que sucede es que no tengo idea de como "jalarlos" del input de arriba. Se me ocurria por AJAX pero eso implicaria hacer un INSERT de estos valores a la DB y leerlos en un SPAN o en un DIV el 18 may. 2018 a las 21:51

1 respuesta 1

1

En lugar de usar inputs, puedes usar texto simple. Te dejo un ejemplo con el primer input, puedes hacer lo mismo con todos los demas.

$(document).ready(function() {
    $("#masfilas").click(function(){
        var qty = $("#qty");
        $("#mytable").append('<tr><td>' + qty.val() + '</td><td><input type="text" id="upc" name="codigo" size="12" title="Código"/></td><td><input type="text" id="nomprod" name="nombre" size="23" title="Nombre"/></td><td><input type="text" id="precio" name="price" size="10" title="Precio del producto"/></td><td><input type="text" id="discount" name="discount" size="15" title="Descuento"/></td><td><input type="text" id="impuestos" class="imp" name="impuestoivi" size="15" title="Impuesto de Ventas"/></td><td><input type="text" id="total" class="imp" name="totalizar" size="15" title="Total de Línea"/></td><td><a href="#" class="delete" title="Eliminar línea">ELIMINAR</a></td></tr>');
        $('.delete').off().click(function(e) {
            $(this).parent('td').parent('tr').remove();
        });
        qty.val("");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="70%" align="center">
	<tr bgcolor="#CCCCCC">
    	<td width="70%" align="left" colspan="2"><b>DETALLE</b></td>
    </tr>
    <tr>
    	<td width="70%"><input type="text" name="itemsearch" id="item" size="50" placeholder="INICIAR BÚSQUEDA" title="Ingrese Nombre del Articulo" /></td>
    </tr>
</table>

<table width="70%" align="center">
	<tr>
    	<td colspan="9"><b>Agregar Artículos / Servicios:</b></td>
    </tr>
    <tr>
    	<td>Cantidad:</td>
        <td>Código:</td>
        <td>Nombre:</td>
        <td>Precio:</td>
        <td>Descuento (%):</td>
        <td>Impuesto:</td>
        <td>Total:</td>
        <td colspan="2">Opciones:</td>
    </tr>
    <tr>
    	<td><input type="text" id="qty" name="quantity" size="5" title="Cantidad"/></td>
        <td><input type="text" id="upc" name="codigo" size="12" title="Código" placeholder="744105300000" readonly="readonly"/></td>
        <td><input type="text" id="nomprod" name="nombre" size="23" title="Nombre" readonly="readonly"/></td>
        <td><input type="text" id="precio" name="price" size="10" title="Precio del producto" placeholder="CRC. 0.00"/></td>
        <td><input type="text" id="discount" name="discount" size="15" title="Descuento" placeholder="0.00%"/></td>
        <td><input type="text" id="impuestos" class="imp" name="impuestoivi" size="15" title="Impuesto de Ventas" placeholder="CRC. 0.00"/></td>
        <td><input type="text" id="total" class="imp" name="totalizar" size="15" title="Total de Línea" placeholder="CRC. 0.00"/></td>
        <td><a href="#" title="Agregar línea" id="masfilas" class="add_form_field">AGREGAR</a></td>
        <td><a href="#" title="Eliminar línea">ELIMINAR</a></td>
    </tr>
</table>

<table width="70%" align="center" border="1" id="mytable" class="table-bordered table-striped">
	<tr bgcolor="#CCCCCC">
    	<td width="70%" align="left" colspan="8"><b>RESUMEN DEL CARRITO</b></td>
    </tr>
    <tr>
    	<td width="3%">Cantidad:</td>
        <td width="10%">Código:</td>
        <td width="13%">Nombre:</td>
        <td width="5%">Precio:</td>
        <td width="9%">Descuento (%):</td>
        <td width="10%">Impuesto:</td>
        <td width="10%">Total:</td>
        <td colspan="2" width="10%">Opciones:</td>
    </tr>
</table>

1
  • Genial alanfcm, justo lo que necesitaba! Mil gracias el 18 may. 2018 a las 21:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.