Question

HTML:

<form method="post" action="action=save&amp;id=239" id="save-form">
    <input type="text" value="0" name="views" /> <input type="submit" value="save plz" name="save" />
</form>
<form method="post" action="action=save&amp;id=862" id="save-form">
    <input type="text" value="3" name="views" /> <input type="submit" value="save plz" name="save" />
</form>
<form method="post" action="action=save&amp;id=12" id="save-form">
    <input type="text" value="2" name="views" /> <input type="submit" value="save plz" name="save" />
</form>

PHP:

if ($_GET["action"] == "save") {
    if (isset($_GET["id"]) && preg_match("/^\d+$/", $_GET["id"])) {
        $id = $_GET["id"];
        // update view count here
    }
}

jQuery:

$('#save-form').ajaxForm({
    beforeSubmit: function() {      
        //
    },
    success: function(data) {
        //
    }
});

I’m using this plugin: http://jquery.malsup.com/form/#html

I realize right now all of my forms share the same id save-form. This code works great for the first instance of save-form. But I want it to work for all of them. Which brings me to my main question:

How can I modify my current jQuery/HTML to process each individual form.

Ideally I’d have a unique id, for example save-form-239 and save-form-862. But I don’t want to have to write $('#save-form-239') and $('#save-form-262'); for every form.. what can I do?

Answer 1

Even if I’m sure dbaseman’s solution works fine, it is usually best to avoid having multiple elements with the same ID, as it is invalid according the HTML specs.

A cleaner solution would be to use class="save-form" instead of id="save-form", and then do $('.save-form').ajaxForm(...);