Ajax & JQuery fråga

Hej, jag har försökt implementera lite Ajax funktionalitet via Jquery på en webbsida. Vad jag ville uppnå är att lägga till saker i en varukorg utan att ladda om sidan. Den delen var inte problematisk. Det som ger mig problem är att jag vill det ska komma upp en kortlivad ruta som säger att produkten lagts i korgen.

Den kod jag har för hela proceduren ser ut såhär:

$(document).ready(function () {

    $(".button").click(function () {
        var artikel = $("input#artikel").val();
        var antal = $("input#antal").val();
        var pris = $("input#pris").val();
        var messageid = "#" + $("input#artikel").val();

        var dataString = 'artikel=' + artikel + '&antal=' + antal + '&pris=' + pris;
        //alert (dataString);
        //return false;

        $.ajax({
            type: "POST",
            url: "addToCart.aspx",
            data: dataString,
            success: function () {
                $("#shoppingcart").load("listCart.aspx");
                $(messageid).html("<h2>Produkten " + artikel + " har lagts i korgen!</h2>")
                .append("<p>Du kan se din varukorg vid toppen av sidan")
                .hide()
                .fadeIn(1500)
                .fadeOut(1500);
            }
        });
        return false;
    });
});

Det är denna kodbit som förbryllar mig:
$(messageid).html("<h2>Produkten " + artikel + " har lagts i korgen!</h2>")

Jag har lagt i produktsidan en tom <div> tag som har samma id som messageid variabeln har. På det viset hoppades jag kunna peka vart meddelandet ska visas i sidan. Här är en förenklad version av sidans produktvisare:

<div class="addProduct">							
<form class="product-buy-box" action="" method="post">
<input type="hidden" name="artikel" value="1" id="artikel">
<input type="hidden" name="pris" value="50" id="pris">
Antal: <input type="text" value="1" name="antal" id="antal">
<input type="submit" value="Lägg i korgen" class="button" name="submit">
</form>
<div id="1"></div>
</div>

<div class="addProduct">							
<form class="product-buy-box" action="" method="post">
<input type="hidden" name="artikel" value="2" id="artikel">
<input type="hidden" name="pris" value="20" id="pris">
Antal: <input type="text" value="1" name="antal" id="antal">
<input type="submit" value="Lägg i korgen" class="button" name="submit">
</form>
<div id="2"></div>
</div>

<div class="addProduct">							
<form class="product-buy-box" action="" method="post">
<input type="hidden" name="artikel" value="3" id="artikel">
<input type="hidden" name="pris" value="35" id="pris">
Antal: <input type="text" value="1" name="antal" id="antal">
<input type="submit" value="Lägg i korgen" class="button" name="submit">
</form>
<div id="3"></div>
</div>

Problemet är att det gör ingen skillnad vad man väljer för artikel. Lägger jag produkten med värdet 3 i korgen så borde enligt mig meddelandet leta upp div-taggen med id="3" och visa det där, men det väljer alltid den första div-taggen i sidan som visas, det avviker aldrig från det. Det är alltid den första div-taggen som väljs av nån orsak.

Förslag?

Id måste vara unikt för en sida. Du kan t.ex inte ha tre inputfält som har id="artikel" eller id="antal".

Ta bort id och referera istället till namn-taggen. Gör något i stil med:

var artikel = $(this).closest("form").find("input[name='artikel']").val()

I-boy har rätt med #id men jag ser inte direkt någon anledning att ha <div id="3"> (vilket inte är OK innan HTML5 dokument)

men jag hade gjort (med din kod):

$(document).ready(function () {
	$(".product-buy-box").submit(function(e) {
		e.preventDefault();
		var form = $(this);
		var formValues = form.find(":input");
		var article = formValues.filter("[name='artikel']").val();
		
		$.ajax("addToCart.aspx", {
			type: "POST",
			data: formValues.serializeArray(),
			success: function() {
				var info = $("<div></div>").hide().html("<h2>Produkten " + article + " har lagts i korgen!</h2><p>Du kan se din varukorg vid toppen av sidan</p>");
				info.insertAfter(form).fadeIn(1500).fadeOut(1500, function() {
					$(this).remove();
				});
			}
		});
	});
});

och markup:

<div class="addProduct">
	<form class="product-buy-box" action="" method="post">
		<input type="hidden" name="artikel" value="1">
		<input type="hidden" name="pris" value="50">
		Antal: <input type="text" value="1" name="antal">
		<input type="submit" value="Lägg i korgen" class="button" name="submit">
	</form>
</div>

Tack för koden men ingenting alls händer när jag prövar den, inte ens ett felmeddelande.

Jasså?

SyntaxError: missing variable name
[Stanna vid fel] 	
var article = formValues.filter("[name='artikel']").val();

sätt ett ; istället för ,

http://voigt.se/sandbox/wf/RolandT/cart.asp

Japp det verkar som du har rätt, nu funkar det 100%! Tackar :)

Jag använde firebug för att kolla koden (laddade hem det igår) och det visade ingenting alls, prövade firefoxs inbyggda konsol och där stod det om felmeddlanden. Förmodligen vet jag inte hur man använder det korrekt.

Det var firebug som gav mitt meddelande, har du aktiverat konsolen?

Jag trodde jag hade igång den men inget hände före jag kryssade i att den skulle stanna vid eventuella fel. Trodde felmeddelanden skulle komma upp ändå.

Om du väljer aktivera "Konsol" (på pilen ner) och markera JS fel också