Question

Learning jquery, so please be kind 🙂

Using PHP, I have a table with many (let’s say 50) rows – each with a product ID and a product Description, and then a variety of other fields that differ line to line depending on the type of product.

My approach is to have one form for each of the 50 products (each uniquely named using the product ID) and be able to submit the particular form and fields in that form using a button without having to write a different jquery function for each product/form.

Have been googling for god knows how long, and I must be asking wrong, as I can’t find anything that accomplishes what this pseudo code would do:

<form name='frm_for_product_123'>
   <input type="hidden" name="product_id" id="product_id" value="123">
   <input type="text" name="description" id="description" value="blah blah blah for 123">
   <input type="text" name="color" id="color" value="blue">
   <input type="text" name="size" id="size" value="medium">
   <input type="button" value="Apply">
</form>

<form name='frm_for_product_456'>
   <input type="hidden" name="product_id" id="product_id" value="456">
   <input type="text" name="description" id="description" value="blah blah blah for 456">
   <input type="text" name="weight" id="weight" value="heavy">
   <input type="button" value="Apply">
</form>

etc., etc. etc. for all 50 products

I want the user to be able to click on the Apply button for that row, and have the values OF that row go to a single, general function that will post that form and do the update.

Answer 1

I’m assuming from your question you want to submit via Ajax. Not entirely clear if that’s the case, but here’s an example of how to do it with jQuery:

$('form').submit(
    function (e) {
        // stop form submission
        e.preventDefault();
        // do any custom logic here
            // then submit - $(this) = current form, 
            // .serialize() turns the form into post data
        $.post('form processing url', $(this).serialize(), myCallbackUpdateFunction);
    }
);