2 or more forms don't want to play along nicely..

Sam Granger · 04-29-2009, 03:21 AM

Right, I have an ajax cart and this is my problem. I have a form that submits an id through AJAX. This form is recognised through its class form. See the JS below. Anyway, this works fine for 1 form with class value form, but once there are more than 1 product/form it breaks - the first form will only submit, if i submit other forms, the first one is submitted still.

PHP Code:


			
<?php

require_once( '../config.php' );

?>

$(document).ready(function(){

    var inputId = $("#product_id");

    var inputAmount = $("#product_amount");

    var loading = $("#loading");

    var cartContent = $(".box > ul");

    

    function updateCart(){

        cartContent.hide();

        loading.fadeIn();

        $.ajax({

            type: "POST", url: "<?php echo ROOT_URL; ?>index.php?act=cart", data: "&action=update",

            complete: function(data){

                loading.fadeOut();

                cartContent.html(data.responseText);

                cartContent.fadeIn(2000);

            }

        });

    }

    function checkForm(){

        if(inputId.attr("value") && inputAmount.attr("value"))

            return true;

        else

            return false;

    }

    

    updateCart();



    $(".form").submit(function(){

        if(checkForm()){

            var id = inputId.attr("value");

            var amount = inputAmount.attr("value");

            $(".send").attr({ disabled:true, value:"Sending..." });

            $(".send").blur();

            $.ajax({

                type: "POST", url: "<?php echo ROOT_URL; ?>index.php?act=cart", data: "&action=insert&product_id=" + id + "&product_amount=" + amount,

                complete: function(data){

                    cartContent.html(data.responseText);

                    updateCart();

                    $(".send").attr({ disabled:false, value:"Add to cart" });

                }

             });

        }

        else alert("Please fill all fields!");

        return false;

    });

});

How could I get this JS to accept more than 1 form? And what would I have to change in my HTML/call?

Thanks for looking!