Jquery.form submit form with anchor

[donboe]

I am using the jquery.form plugin to handle my forms. In one of the pages I have a form that needs to be submitted with an anchor instead of with a button. This is the form that needs to be submited:

[code]

In winkelmand [code]

And this is what I thought should work:

    $("#product-form").ajaxForm({    
        success: function() {
            window.alert("Het artikel is succesvol aan de winkelmand toegevoegd. Klik op ok om door te gaan.");

            setTimeout(function() {
                window.location.href = "/admin/producten/artikel_zoeken";
            }, 1000)
        }        
    });
    $('.btn-cart').click(function() {       
        $('#product-form').submit();
    });

But as you might have guessed isn’t. What am I doing wrong?

Thank you in advance

[felgall]

You put name=“product-form” where you should have put id=“product-form” on the form tag.

The form tag doesn’t send anything to the server and so shouldn’t have a name but does need an id if you want to reference it directly to submit it (as you are doing) rather than using the form property of any of the inputs the form contains.

[donboe]

Hi felgall. Thanks for the reply. You are right in that. The form should not reference to the name, but using an id is not an option either since this is a product listing. using PHP. So in that case all forms would have the same id. I got it working with the class instead

$(".product-form").ajaxForm({

but that is not an option either, since then all 6 products on that particulat page are processed.

Edit: I changed the php loop from

<?php foreach ( $producten as $product )

to

<?php foreach ( $producten as $key => $product )

and gave the forms a dynamic id

id="product-form_<?php echo $key; ?>

So now the forms have a unique id. product_form_0, product_form_1 etc. But how do I get the unique id in the function so that it becomes:

$(".product-form_0").ajaxForm({

instead of:

$(".product-form").ajaxForm({

Thank you in advance

[donboe]

This is realy doing my head in. I tried:

$(".product_form_<?php echo $form_id; ?>").ajaxForm({    
    success: function(data) {
        $("#bericht").html(data);
        $("#bericht").dialog( "option", "buttons", [{
            text: "Close",
            click: function() {
                window.location = '/artikelen/winkelmand';
            }
        }]);
        $("#bericht").dialog("open");
    }        
});
    
$(".btn-cart").click(function() {       
    $(".product_form_<?php echo $form_id; ?>").submit();
});

I don’t get any errors but the function isn’t executed either? What am i doing wrong?

[PaulOB]

Couldn’t you just find the form parent of the btn-cart element.

e.g.

$('.btn-cart').click(function() {       
    var theForm = $(this).closest('.product-form');
	$(theForm).submit();
});

Assuming the btn-cart is within the form and that the form has a class of .product-form.