Novato: Ayuda con migración carrito a jQuery

[xberni]

Hola a todos,

Estoy empezando con jQuery y quería mejorar una tienda virtual que tenía hecha en php. La página de listado de productos, desde donde se podia añadir al carrito, la tenía resuelta con un formulario para cada uno de ellos, en vez del típico link de "Agregar a carrito" donde se pasa el idProductoy ya está. Esto era así, porque los productos que se venden son un poco especiales (se venden a peso) y el cliente queria un formulario para añadir la cantidad a comprar. Por ejemplo 0.300 kilos, etc). No es lo mismo que la típica tienda que compras un libro, o un DVD, etc.

Tengo montado algo así:

Código HTML:

<form id="form_30" name="form_30" method="post" action="">
  <input name="cantidad_30" id="cantidad_30" type="text" />
  <input name="imageField" type="image" src="icono_carrito2.gif" />
  <input name="idProducto" type="hidden" id="idProducto_30" value="30" />
</form>

<form id="form_31" name="form_31" method="post" action="">
  <input name="cantidad_31" id="cantidad_31" type="text" />
  <input name="imageField" type="image" src="icono_carrito2.gif" />
  <input name="idProducto" type="hidden" id="idProducto_31" value="31" />
</form> 

<form id="form_32" name="form_32" etc para cada uno de los productos... </form> 

Pasaba por formulario el idProducto (p.e. el 31) y luego recuperaba la cantidad (cantidad_31) y hacía la inserción en el carrito, previa recarga de la página.

Ahora quería hacerlo con jQuery/ajax para no recargar la página, pero no sé como pasar ni el id del producto que paso, ni la cantidad. A ver si alguien me puede echar un cable. Estoy probando con este código (como soy principiante no uso funciones anonimas, porque son un poco más liosas):

Código:

var x;
x=$(document);
x.ready(inicializarEventos);

function inicializarEventos()
{
  var x;
  x=$("input:image");
  x.click(presionSubmit);
  //Con esto consigo aplicar la funcion al hacer click en cualquier input image
}

function presionSubmit()
{
  //Necesito obtener el id del producto, que lo tengo en el hidden 'idProducto_x'
  var id= ??
  //Necesito obtener la cantidad del producto, que lo tengo en el input 'cantidad_x'
  var cant = ??
  $.get("ajax/anadirProductoCarrito.php",{idProducto:id, cantidad:cant},llegadaDatos); 
  return false;
}

function llegadaDatos(datos)
{
  alert(datos);
}

[eall]

lo que podrías hacer es guardar el ID en algún atributo de la imagen y así identificar los campos.

[xberni]

Iniciado por eall

lo que podrías hacer es guardar el ID en algún atributo de la imagen y así identificar los campos.

Ostia claro! No se me había ocurrido!

Le he puesto como atributo "name" el id del producto. De esta manera, puedo acceder así:

Código:

var id=$(this).attr("name");
var cant=$("#cantidad_"+id).attr("value");

Entonces mediante $.post ya hago la inserción en la base de datos:

Código:

$.post("ajax/anadirProductoCarrito.php",{idProducto:id, cantidad:cant},llegadaDatos);

Lo que no sé muy bien es como tengo que hacer ahora para que se me actualice el ticket de la compra que tengo en la página con el nuevo artículo comprado, el nuevo total, etc etc. ¿Alguna sugerencia?