0

Este es mi archivo PHP, que me permite agregar productos a la cesta:

<?php
if (isset($_POST) OR isset($_POST['addCart'])) {
  $attributes = (
    isset($_POST['qtyupdate']) && is_array($_POST['qtyupdate'])
  ) ? $_POST['qtyupdate'] : array();

  $itemId = isset($_POST['itemId']) ? $_POST['itemId'] : "";
  $item_color = isset($_POST['color']) ? $_POST['color'] : "Normal";
  $item_size = isset($_POST['size']) ? $_POST['size'] : "Normal";
  $qty = isset($_POST['qty']) ? intval($_POST['qty']) : 1;

  if (
    $_SERVER['REQUEST_METHOD'] == 'POST' and 
    isset($_POST['qtyupdate'])
  ) {
    foreach ($attributes as $id_article => $variations) {
      foreach($variations as $color => $sizes) {
        foreach($sizes as $size => $quantity) {
          if ($quantity <= 0) {
            echo json_encode([
              'status' => FALSE, 
              'message' => "<strong>Error no hemos podido actualizar su producto.</strong>"
            ]);
            exit;
          } else {
            $_SESSION['cart'][$id_article][$color][$size] = intval($quantity);
            echo json_encode([
              'status'=> TRUE,
              'message'=>"<strong>Se ha actualizado su producto.</strong>"
            ]);
            exit;
          }
        }
      }
    }
  }

  if (is_numeric($itemId)) {
    $_SESSION['cart'][$itemId][$item_color][$item_size] = $qty;
    echo json_encode([
      'status' => TRUE,
      'message' => "<strong>El producto ha sido añadido a su carrito.</strong>"
    ]);
    exit;
  }
}

Este es mi código ajax, funciona bien cuando el botón añadir esta en una pagina individual y si es el único botón que existe:

$(function() {
  $(document).on('click', '.close', function(e){
    e.preventDefault();
    $('.alert-success').hide();
    $('.alert-danger').hide();
  });
  var frm = $('#frmCart');
  frm.submit(function(e){
    e.preventDefault();
    var formData = frm.serialize();
    formData += '&' + $('#addCart').attr('name') + 
      '=' + $('#addCart').attr('value');

    var url = "addItem_cart.ini.php";
    $.ajax({
      type: frm.attr('method'),
      url: url,
      data: formData,
    })
    .done(function(data) {
      console.log(data);
      let res = JSON.parse(data);
      if(res.status){
        $("#wrapp-basket").load(" #wrapp-basket").fadeIn();
        $("#qty").load(" #qty").fadeIn();
        $('.alert-success').fadeIn();
        $('.alert-success').html(res.message).delay(2000).fadeOut(2000);
        $(".alert-success").append(
          "<button class='close' type='button'><span aria-hidden='true'>x</span></button>"
        );
      } else {
        $('.alert-danger').fadeIn();
        $('.alert-danger').html(res.message).delay(2000).fadeOut(2000);
        $(".alert-danger").append(
          "<button class='close' type='button'><span aria-hidden='true'>x</span></button>"
        );
      }
    })
    .fail(function( jqXHR, textStatus ) {
      alert("Ajax Request fail");
      //$('.warning').fadeIn();
      //$('.warning').html(textStatus).delay(3000).fadeOut(3000);
      //console.log(jqXHR.responseText);
      //console.log("Request failed: " + textStatus );
    })
  });
});

El problema es cuando tengo varios botones de añadir productos en este caso desde un paginador, el botón no funciona o más bien el ajax deja de funcionar:

introducir la descripción de la imagen aquí

Así es el HTML de los botones cuando están en la paginación:

<form><div class="shipping">
  <label></label>
  <em>$13,00</em>
  <input type="hidden" name="itemId" value="2">
  <input type="submit" id="addCart" class="addCart buy"
    name="addCart" value="Añadir a la cesta" formnovalidate="">
</div></form>
<form><div class="shipping">
  <label></label>
  <em>$8,00</em>
  <input type="hidden" name="itemId" value="2">
  <input type="submit" id="addCart" class="addCart buy"
    name="addCart" value="Añadir a la cesta" formnovalidate="">
</div></form>
<form><div class="shipping">
  <label></label>
  <em>$10,00</em>
  <input type="hidden" name="itemId" value="2">
  <input type="submit" id="addCart" class="addCart buy"
    name="addCart" value="Añadir a la cesta" formnovalidate="">
</div></form>

El botón de añadir esta dentro de un form es porque envió otros datos adicionales de otros campos input, select, radio

Como le puede decir a ajax o jquery que datos debe tomar y que funcione al presionar el botón añadir teniendo en cuenta que todos tiene el mismo nombre: id="addCart" class="addCart buy" ya que se encuentra listado en una paginación.

4
  • para "respuesta canónica" agrega el php donde imprimis el html con id duplicados así limpiamos eso primero y el resto sale mas simple Commented el 16 nov. 2022 a las 14:03
  • @aloMalbarez Demasiado código amigo, la generación del HTML es sencillo de eliminar, solo basta con cambiar en el ciclo, de esto <input type="submit" id="addCart" class="addCart buy" puede quedar así sin problemas <input type="submit" class="addCart buy" ya descartando problemas con PHP, el problema va en el ajax, creo que toca pasarle algo así como un $(this).parent().attr('id'); para que ajax pueda saber que form enviar
    – Otto
    Commented el 16 nov. 2022 a las 20:16
  • no hace falta que lo pongas completo, es que si duplicas id en algun momento o con algun navegador va a dar problemas, si necesitas que las cosas tengan id los hacemos dinamico, y el jquery lo ajustamos para ids dinamicos; sino es reemplazar por clases. pero para que sea canonico debe ser una solucion general y no un parche a una situacion particular Commented el 16 nov. 2022 a las 22:52
  • @aloMalbarez Amigo de esa manera imprimo o género el HTML: while($stmt->fetch()){ echo '<form><div class="shipping"> <label></label> <em>$'.$price.'</em> <input type="hidden" name="itemId" value="'.$id_product.'"> <input type="submit" id="addCart" class="addCart buy" name="addCart" value="Añadir a la cesta" formnovalidate=""> </div></form>';
    – Otto
    Commented el 17 nov. 2022 a las 0:51

1 respuesta 1

1
  1. Lo primero es separar el submit en una función aparte, le llamaré "guardar()"
function guardar() {
    event.preventDefault();
    EnviarData(event.target, event.submitter.getAttribute('formaction'));
    return false;
}
function EnviarData(form, action,input) {
    let url = "pagina.php";
    if (action) {
        url=url + "?action=" + action
    }
            
    $.ajax({
        type: "POST",
        url: url ,
        data: $(form).serialize(),
    })
    .done(function (data) {
        //cosas aca
    })
    .fail(function (jqXHR, textStatus) {
        //avisos aca
    });
}
  1. Ahora todos tus forms debe setear el evento submit y opcionalmente el atributo formaction en el botón
<form onsubmit="guardar()" >
        <div class="shipping">
            <label></label>
            <em>$13,00</em>
            <input type="hidden" name="itemId" value="2" />
            <input type="submit" id="addCart" class="addCart buy" formaction="addCart" formnovalidate="" />
        </div>
    </form>

El atributo formaction indicará al PHP que acción tomar en el submit. Lo recuperas con $_GET["action"]. En el ejemplo de arriba sería "addCart". Con esto tú puedes hacer un if o un switch, para filtrar distintas cosas (acciones) que envías al mismo PHP, como podria ser remove, update, etc

  1. como hacer el envió fuera del form

Por ejemplo este caso:

<form onsubmit="guardar()" id="ajaxData">
  //cosas
</form>
<input type="submit" class="addCart buy" form="ajaxData" formaction="remove" />

En este caso solo es necesario ocupar el atributo form en el ìnput submit con el id del formulario (ajaxData)

Otro caso, ahora utilizando un anchor () en vez de un input submit

<a id="gateway" data-ref="#" class="continue-checkout center" onclick="EnviarData(ajaxData,'alguna cosa')">Solo Guardar</a>

Acá ocupamos directamente la función EnviarData, pasando el formulario como primer argumento y opcionalmente la acción como segundo argumento. También es posible enviar un tercer argumento que es un elemento el cual podría ser el mismo botón (poniendo this),

15
  • Lo voy a revisar, no es más útil usar algo como $(this).parent().attr('id'); para que ajax pueda saber que form enviar ?
    – Otto
    Commented el 16 nov. 2022 a las 20:17
  • @Otto Ese código podría servir si el evento estuviera en el botón (debería ser $(this).parent().parent()), ahí subes buscando al padre que es un form. Pero en este caso el evento está en el mismo form, por lo que this es el form. Como algunas veces hay problemas de scope yo prefiero usar event.target que retorna el elemento que gatilló el evento. y además $(event.target) no tiene que recorrer el dom buscando el elemento, por lo que es más eficiente.
    – Yussef
    Commented el 16 nov. 2022 a las 20:26
  • Entiendo, se ve interesante de esa manera, quizás se puede enviar un parámetro o dato adicional en un solo form en dónde tengo dos botones fuera del form me gustaría que uno de ellos tenga una acción diferente por ejemplo uno de esos botones que sea guardar y el otro que sea enviar. La pregunta sale del tema pero quisiera saber si es posible y aprovechar el planteamiento de su respuesta para poder reutilizar está alternativa de solución en otros casos o saber cómo aprovechar estás soluciones.
    – Otto
    Commented el 17 nov. 2022 a las 1:10
  • @Otto Es posible con un pequeño ajuste. También es posible realizar submit fuera del form, existe el atributo form que le indica al botón cual form haga submit (aunque esté afuera). Pero deberías dar más detalle para una respuesta concreta
    – Yussef
    Commented el 17 nov. 2022 a las 1:49
  • Aquí te dejo un copilador con más detalles en el código comentado jsfiddle.net/dhktoLm3/1
    – Otto
    Commented el 17 nov. 2022 a las 2:35

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.