2

Estoy intentando hacer un botón de añadido rápido al carrito pero tengo un problema y es que me arroja el error:

Cannot read property 'value' of undefined`

Estoy usando ajax y php. No sé cual podría ser el problema por eso acudo a ustedes, les dejo el código en cuestión:

codigo php:

$registros2=mysqli_query($conexion,"select id_producto, nombre, precio, descripcion, id_categoria from productos where inicio=1 LIMIT ".$inicio."," . $TAMANO_PAGINA);
$fila2=mysqli_fetch_array($registros2);

codigo html:

<form name="formAnadirCarrito">

    <input type="text" name="nombre_producto" value="<?php echo utf8_encode($fila2['nombre']); ?>">
    <input type="text" name="precio_producto" value="<?php echo $fila2['precio']; ?>">
    <input type="text" name="cantidad_producto" value="1" maxlength=2>
    <input type="text" name="id_producto" value="<?php echo $fila2['id_producto']; ?>">
    <button type="button" onclick="anadirAlCarrito()" class="botonCarrito">Añadir al carrito</button>
</form>

codigo js:

function anadirAlCarrito(){

    var nombre_producto=document.formAnadirCarrito.nombre_producto.value;
    var precio_producto=document.formAnadirCarrito.precio_producto.value;
    var cantidad_producto=document.formAnadirCarrito.cantidad_producto.value;
    var id_producto=document.formAnadirCarrito.id_producto.value;


    $.ajax({
            type:"POST",
            url:"compra/carrito.php",
            data:{"nombre_producto":nombre_producto,"precio_producto":precio_producto,
            "cantidad_producto":cantidad_producto,"id_producto":id_producto},

            // beforeSend:function(){

            //  },

            success:function(respuesta){

                    $("#contenedor_carrito").html(respuesta);
                    $("#contenedor_carrito").show("fast");
                    $("#menu").load(location.href + " #menu");
            }

        });
}
5
  • Hola! Revisa si los values son puestos correctamente en el html rendereado por php, probablemente sea eso. el 17 ago. 2018 a las 19:59
  • Quita las comillas a las claves de tu variable data, las que están a la izquierda. También, los inputs que muestras con código PHP mezclado da la impresión de que son erróneos. Sería mejor sacar esos valores en variables para escribir un código más claro y manejar la codificación utf-8 a un nivel más global, para evitar luego aplicar funciones de codificación por todas partes. ¿En que línea te está marcando el error?
    – A. Cedano
    el 17 ago. 2018 a las 20:03
  • Todas sus respuestas me funcionaron, pero a medias. Quiero decir que ahora si introduce el producto en el carrito pero siempre es el primer producto, no importa si hago click sobre el ultimo producto o el tercero, siempre agrega al carrito el primer producto.
    – jmz
    el 18 ago. 2018 a las 0:16
  • Eso es porque no capturas el evento del botón, en otras palabras no identificas que botón fue presionado, busca como capturar el botón que disparo el click o prueba con la respuesta JQuery de @fran_ivan el 18 ago. 2018 a las 15:25

3 respuestas 3

1

Prueba esto, solo cambie el tipo de búsqueda para que sea por Id cualquier cosa me comentas:

function anadirAlCarrito(){

    var nombre_producto=document.getElementById('nombre_producto').value;
    var precio_producto=document.getElementById('precio_producto').value;
    var cantidad_producto=document.getElementById('cantidad_producto').value;
    var id_producto=document.getElementById('id_producto').value;

    $.ajax({
            type:"POST",
            url:"compra/carrito.php",
            data:{nombre_producto:nombre_producto,precio_producto:precio_producto,
            cantidad_producto:cantidad_producto,id_producto:id_producto},

            // beforeSend:function(){

            //  },

            success:function(respuesta){

                    $("#contenedor_carrito").html(respuesta);
                    $("#contenedor_carrito").show("fast");
                    $("#menu").load(location.href + " #menu");
            }

        });
}
<form name="formAnadirCarrito">
    <input type="text" id="nombre_producto" value="<?php echo utf8_encode($fila2['nombre']); ?>">
    <input type="text" id="precio_producto" value="<?php echo $fila2['precio']; ?>">
    <input type="text" id="cantidad_producto" value="1" maxlength=2>
    <input type="text" id="id_producto" value="<?php echo $fila2['id_producto']; ?>">
    <button type="button" onclick="anadirAlCarrito()" class="botonCarrito">Añadir al carrito</button>
</form>

1

Hay una manera más simple de reducir el código con Jquery

Lo que te recomiendo es que sigas la documentacion oficial ya que "success" esta depreciado en la versión 3.0

Lo mas recomendable es que si usas el "document" utilices ID's en tus inputs para extraer el valor correctamente y quitar las comillas del data

Usando Javascript

<form id="anadirCarrito">

    <input type="text" name="nombre_producto" id="nombre_producto" value="<?php echo utf8_encode($fila2['nombre']); ?>">
    <input type="text" name="precio_producto" id="precio_producto" value="<?php echo $fila2['precio']; ?>">
    <input type="text" name="cantidad_producto" id="cantidad_producto" value="1" maxlength=2>
    <input type="text" name="id_producto" id="id_producto" value="<?php echo $fila2['id_producto']; ?>">
    <button type="button" onclick="anadirAlCarrito()" class="botonCarrito">Añadir al carrito</button>
</form>

<script type="text/javascript">
    function anadirAlCarrito(){
    var nombre_producto = document.getElementById('nombre_producto').value;
    var precio_producto = document.getElementById('precio_producto').value;
    var cantidad_producto = document.getElementById('cantidad_producto').value;
    var id_producto = document.getElementById('id_producto').value;

    $.ajax({
            type:"POST",
            url:"compra/carrito.php",
            data:{nombre_producto:nombre_producto,precio_producto:precio_producto,
            cantidad_producto:cantidad_producto,id_producto:id_producto},

            // beforeSend:function(){

            //  },

            success:function(respuesta){

                    $("#contenedor_carrito").html(respuesta);
                    $("#contenedor_carrito").show("fast");
                    $("#menu").load(location.href + " #menu");
            }

        });
    }

</script>

Usando $(this).serialize() de JQUERY

<form id="anadirCarrito">
    <input type="text" name="nombre_producto" value="<?php echo utf8_encode($fila2['nombre']); ?>">
    <input type="text" name="precio_producto" value="<?php echo $fila2['precio']; ?>">
    <input type="text" name="cantidad_producto" value="1" maxlength=2>
    <input type="text" name="id_producto" value="<?php echo $fila2['id_producto']; ?>">
    <input type="submit" value="Añadir al carrito" >
</form>
<script>
$(document).ready(function(){

//Escuchamos el evento submit
$("#anadirCarrito").submit(function(){
//Ingresamos tu codigo en ajax

    $.ajax({
            type:"POST",
            url:"compra/carrito.php",
            //Obtenemos todas la variables que estan dentro 
            //del form es el equivalente a tu objeto ejemp: "{x:x,a:a}"
           //nota :los inputs de tu form por obligación siempre deben llevar el name
            data:$(this).serialize(),


            success:function(respuesta){
                    //#lo que responde tu carrito.php
                    console.log(respuesta);
                    //$("#contenedor_carrito").html(respuesta);
                    //$("#contenedor_carrito").show("fast");
                    //$("#menu").load(location.href + " #menu");

            }

        });

});

});
</script>

Y solo imprimes de lado tu archivo carrito.php los parametros

<?php 

var_dump($_POST); 
//Tu codigo que realiza la demás operación
?>
1

cambia el script de JavaScript por este

function anadirAlCarrito(){
    var form=document.querySelector('[name="formAnadirCarrito"]');
    var nombre_producto=form.elements.nombre_producto.value;
    var precio_producto=form.elements.precio_producto.value;
    var cantidad_producto=form.elements.cantidad_producto.value;
    var id_producto=form.elements.id_producto.value;


    $.ajax({
            type:"POST",
            url:"compra/carrito.php",
            data:{"nombre_producto":nombre_producto,"precio_producto":precio_producto,
            "cantidad_producto":cantidad_producto,"id_producto":id_producto},

            // beforeSend:function(){

            //  },

            success:function(respuesta){

                    $("#contenedor_carrito").html(respuesta);
                    $("#contenedor_carrito").show("fast");
                    $("#menu").load(location.href + " #menu");
            }

        });
}
3
  • hola tu respuesta funciona pero, siempre añade el primer producto, no importa si hago click en el botón de otro producto.
    – jmz
    el 19 ago. 2018 a las 20:23
  • 1
    @jmz de lo que vi en tu pregunta no veo donde se pueden cambiar los productos
    – junior
    el 20 ago. 2018 a las 1:05
  • lo que pasa es que no añadí todo el código, pero esta respuesta no me deja añadir el código restante.
    – jmz
    el 20 ago. 2018 a las 2:43

Tu Respuesta

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

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