1

Buen día comunidad,

Estoy tratando de crear un pequeño ecommerce, para poder sumar productos sin que se recargue la pagina uso ajax para comunicar los archivos. El problema lo tengo que cunado se ejecuta el archivo ajax, toma todos los IDs iguales en el archivo, y no se como hacer para que el archivo ajax tome un ID especifico sin tener que hacer un archivo ajax por cada producto y su ID.

A continuación parte del codigo de la pagina PHP, son de dos productos diferentes, necesito que se pase el value, para que de esa manera otro archivo busque en la base de datos el producto especifico y lo muestre.

Producto 1:

<form align="left" id="producto" method="POST" onsubmit="return enviarDatos();" action="script/ajax.js">
         <input type="hidden" name="ParaCarrito" id="ParaCarrito" value="1"></input>
        <input type="submit" class="btn-primary" name="btnEnviar" value="Agregar al carrito"></input>
</form>

Producto 2:

<form align="left" id="producto" method="POST" onsubmit="return enviarDatos();" action="script/ajax.js">
        <input type="hidden" name="ParaCarrito" id="ParaCarrito" value="2"></input>
        <input type="submit" class="btn-primary" name="btnEnviar" value="Agregar al carrito"></input>
</form>

Archivo ajax que toma los pedidos:

function enviarDatos(){

    $(document).on("ready", function(){

        enviarDatos();

    });

    $("#producto").on("submit", function(e)
    {

        e.preventDefault();

        var producto = $(this).serialize();

        $.ajax({

            "method":"POST",
            "url":"script/carrito.php",
            "data":producto

        }).done( function (info){

            $("#mensaje").html(info);

        });

    });

    return false;

}

El problema esta cuando clieckeo en alguno de esos botones, toma el primer id de archivo y no el del botón que ejecute, por otro lado no se como hacer para pasar por ejemplo el IDProducto1 o IDProducto2 sin tener que hacer dos archivos ajax uno por cada ID, estoy desesperado ya no se ocmo hacer aguardo su ayuda graciassss

2
  • La solucion es mas sencilla de lo que crees, mira lo que pasa es que los ID deben ser unicos por elementos, pues ese es su proposito, ya que en caso de que quieras tener un mismo identificador para varios elementos no deberias usar un ID si no clases, por lo tanto lo que estas haciendo es confundir al programa al tener dos elementos con el mismo ID, posiblemente por eso te este agarrando los dos elementos.
    – Layer
    Commented el 17 ago. 2020 a las 20:25
  • Asi que #1: cambia los ID a clase, #2: la seleccion que estas haciendo por medio de jQuery ($("#producto")), es erronea para lo que deseas hacer, pues recuerda que la almohadilla es el selector para los ID, por consiguiente solo te va a seleccionar el primer elemento que encuentre que coincida con el id, en su lugar debes usar el selector de clase (.).
    – Layer
    Commented el 17 ago. 2020 a las 20:28

1 respuesta 1

0

Tienes varios errores en el código:

  • Como ya te mencionaron en los comentarios, los identificadores deben ser únicos y los estás repitiendo en cada formulario e input
    • Cambia el ID de formulario por clase
    • Elimina ID de los input, no es necesario, se van a enviar por nombre
  • En el evento submit de los formularios estás llamando una función que asigna el evento, llamándose a sí misma
    • Elimina el atributo onsubmit de la etiqueta del formulario
    • Deja solo una función que se ejecute al cargar el documento
    • Dentro, obtienes los formularios por clase y asignas evento
    • Serializa para enviar todos los datos, $(this) hace referencia al formulario que lanzó el evento, por lo que no necesitas crear más funciones.

// Ejecutar cuando el documento se haya cargado
$(document).ready(function() {
    // Buscar formularios por clase y asignar evento submit
    $('form.producto').on('submit', function(e) {
        // Cancelar comportamiento normal del formulario
        e.preventDefault();
        // Obtener campos del formulario
        let data = $(this).serialize();
        console.log(data);
        // Petición AJAX
        $.ajax({
            "method":"POST",
            "url":"script/carrito.php",
            "data":data
        }).done( function (info){
            $("#mensaje").html(info);
        });
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form align="left" class="producto" method="POST" action="script/ajax.js">
         <input type="hidden" name="ParaCarrito" value="1">
        <input type="submit" class="btn-primary" name="btnEnviar" value="Agregar al carrito">
</form>

<form align="left" class="producto" method="POST" action="script/ajax.js">
        <input type="hidden" name="ParaCarrito" value="2">
        <input type="submit" class="btn-primary" name="btnEnviar" value="Agregar al carrito">
</form>

1
  • Gracias pude solucionar mi inconveniente.
    – seele91
    Commented el 18 ago. 2020 a las 21:18

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.