Looping through an ajax script to process forms on a page

Question

I have a page with lots of small one line forms, each of which has 5 items. The forms have the id form1, form2, form3, etc, and the id of the items and the submit button follows the same pattern. I have written out the following ajax script for processing the forms one at a time, where the variable $n corresponds to the form and item number. What I am not sure about is how to loop through this script for each form on the page. Do I need to somehow count the number of forms on the page first and then create a loop, and if so how do I do this?

$(".submit$n").click(function() {

        var action = $("#form$n").attr('action');
        var form_data = {
            name: $j("#name$n").val(),
            date: $j("#date$n").val(),
            attended: $j("#attended$n").val(),
            paid: $j("#paid$n").val(),
            method: $j("#method$n").val(),
            is_ajax: 1
        };

        $j.ajax({
            type: "POST",
            url: action,
            data: form_data,
            success: function(response){

                if(response == 'success')

                    $j("#form$n").fadeOut(800);
                    console.log(response);  
            }
        });

        return false;
    });

});

Answer 1

I'm sorry but I don't think this is being set up correctly, and neither is the accepted answer...it's just very messy. I'm not sure if your original code is replicated for every form you have (because the whole $n variable thing confuses me and makes me think you have it several times), but it isn't needed if so. Here's what I would use:

$(document).ready(function () {
    $(".submit").click(function () {
        var $this = $(this);
        var $form = $this.closest("form");
        var action = $form.attr('action');

        var form_data = {
            name: $form.find("[id^=name]").val(),
            date: $form.find("[id^=date]").val(),
            attended: $form.find("[id^=attended]").val(),
            paid: $form.find("[id^=paid]").val(),
            method: $form.find("[id^=method]").val(),
            is_ajax: 1
        };

        $.ajax({
            type: "POST",
            url: action,
            data: form_data,
            success: function (response) {
                if (response == 'success') {
                    $form.fadeOut(800);
                }
                console.log(response);
            }
        });

        return false;
    });
});

Just give all the submit buttons a class of "submit", and this should work fine. Just to make sure, your HTML would have the format of this:

<form id="form1" action="page1.php">
    <input type="text" id="name1" name="name1" /><br />
    <input type="text" id="date1" name="date1" /><br />
    <input type="text" id="attended1" name="attended1" /><br />
    <input type="text" id="paid1" name="paid1" /><br />
    <input type="text" id="method1" name="method1" /><br />
    <input type="submit" class="submit" value="Submit" />
</form>

Just so you understand what's happening, the Javascript finds the submit button's parent form when it's clicked. Then, with that form, it finds all descendents that have an id attribute that starts with "name", "date", etc. You can do this because you have clearly separated controls into their own forms. So with this code, you can be assured that when you click a submit button, you're grabbing all of the controls' values from the form that it's in.

Answer 2

Add a common class to all your submit buttons, like: <input type="submit" id="submit1" name="submit1" class="submit" />

And then change your code to:

$('.submit').on('click', function() {
    var n = this.id.substr(6);
    // n is the number of the form. 6 because the word submit has 6 characters.
    // You might want to do this some other way.

    // you can get the rest of the values by doing
    $('#name' + n).val()
    // and so on
});