0

Tengo una parte de mi programa que recibe el código de un producto mediante un input y al activar un botón desearía que busque en la DB y me recupere el nombre y su precio

adjunto imagen de el input y el botón introducir la descripción de la imagen aquí

Esta es la parte del código de mi tabla

<table class="table table-bordered table-sm">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">Codigo</th>
                    <th scope="col">Nombre</th>
                    <th scope="col">Precio</th>
                </tr>
            </thead>
            <tbody id="table-body-venta">
            </tbody>
        </table>

Este es mi codigo en javascript

$(document).ready(function () {
var myText;
$("#codigo-producto-venta").on("keyup", function () {
    myText = $(this).val();
});

$("#agregar-producto-venta").on("click", function () {
    //en base a mytext (codigo del producto) buscar en la base de datos y agregar a la tabla
    var html = "<tr>";
    html += "<td>" + myText + "</td>";
    html += "<td>buscar en la base de datos el nombre del producto</td>";
    html +=
        "<td>buscar en la base de datos el precio del producto</td></tr>";
    $(html).appendTo($("table:eq(0)").find("#table-body-venta"));
});

1 respuesta 1

0

si entendí bien tu pregunta, entonces deseas usar ajax, de forma que te realice un request a tu base de datos sin recargar la página, y que esto te devuelva los datos de la base de datos.

Describiendo lo que hace este codigo, primero, agrega un .addEventListener al form donde tomo los datos, el cual tiene un submit de tal forma que al presionar el submit, se ejecute la función que he llamado prueba. Luego de eso, creo la función function prueba(e), la parte de e.preventDefault(); me ayuda a evitar recargar la página; la variable var params es donde guardo los parámetros que deseo enviar por método POST a mi controlador; en xhr.open('POST', '/carrito', true); el primer atributo es el método para hacer el request, el segundo es la ruta que me dirige al controlador, y el tercero es para decir si es asíncrono o síncrono.

document.getElementById('postForm{{$product->id}}').addEventListener('submit', prueba{{$product->id}});
        function prueba{{$product->id}}(e){
            e.preventDefault();
            var id = document.getElementById({{$product->id}}).value;
            var params = "idproducto="+id+"&idcarrito="+{{$carrito_id[0]->id}};

            xhr = new XMLHttpRequest();
            xhr.open('POST', '/carrito', true);
            xhr.setRequestHeader('Content-type', "application/x-www-form-urlencoded");
            xhr.setRequestHeader('X-CSRF-TOKEN', "{{ csrf_token() }}");
            xhr.onload = function(){
                if(this.responseText){
                    document.getElementById("alertamal").innerHTML = "Lo sentimos, ha habido un error en la base de datos, por favor recargue la página.";
                    y.style.display =  "block";
                    $("#alertamal").fadeIn("slow");
                    $("#alertamal").fadeOut(8000);
                } else {
                    document.getElementById("alertabien").innerHTML = "¡FELICIDADES! Ha añadido correctamente su producto al carrito de compras";
                    x.style.display =  "block";
                    $("#alertabien").fadeIn("slow");
                    $("#alertabien").fadeOut(8000);
                }
            }
            xhr.send(params);
        } 

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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