Question

I have a basic AJAX form submission function in the head of my page (stolen from a tutorial because I can’t write this stuff from scratch). In the body of my page I have a bunch of forms with hidden inputs that have values corresponding to user id’s that are in my database.

The idea is that when you submit a form, the hidden value is POST’d to my PHP page where it deletes the user with that id from my MySQL database. It’s all pretty straight forward and there’s probably a much more efficient way to do it but this is the only way I could think of.

Anyway the problem is my AJAX function only works with the first form in my page. When I submit the form, the user is deleted from my database, the page refreshes and that particular form disappears. But if you click any form beneath the top one, nothing happens. Here’s my jQuery function:

<script type="text/javascript">


$(document).ready(function(){
    $("#myform").validate({
        debug: false,
        rules: {
            group: {required: true}, 
        },
        messages: {
            group: {required: " Field required.", loginRegex: " Invalid character."},
        },
        submitHandler: function(form) {
            $.post('process_delete_participant.php', $("#myform").serialize(), function(data) {
                $('#results').html(data);
            });
        }
    });
});


</script>

And here’s what’s in the body of my page:

<?php

$query = mysql_query('SELECT * FROM `Participant`');
    if (!$query)
{ 
    die('Query failure: '.mysql_error()); 
}

while($rows = mysql_fetch_array($query))
{

$fname = $rows['firstName'];
$sname = $rows['secondName'];
$id = $rows['idParticipant'];

echo "<form name='myform$id' id='myform$id' action='' method='POST'> ";
echo "<input type='hidden' name='idParticipant' id='$id' value='$id' />";
echo "$fname ";
echo "$sname ";
echo "<input type='submit' name='submit$id' id='submit$id' value='Delete' /> ";
echo "</form>";
echo "<br><br>";

}

?>

So an example of one of the forms could look something like this:

<form name='myform61' id='myform61' action='' method='POST'> 
<input type='hidden' name='idParticipant' id='61' value='61' />John Smith
<input type='submit' name='submit61' id='submit61' value='Delete' /> 
</form>

I can think of a couple of reasons why the function only works with the topmost form but I have no idea what to edit in the syntax of my function to solve the issue. Anyone know?

Answer 1

The selector in the example is by ID explicitly. You could try $(“[id^=myform]”) as this matches the beginning of an id.

Also, replace the second call to “$(“#myform”)” with $(this) to ensure the correct context.

edited (added):

$("[id^=myform]").validate({
        debug: false,
        rules: {
            group: {required: true}, 
        },
        messages: {
            group: {required: " Field required.", loginRegex: " Invalid character."},
        },
        submitHandler: function(form) {
            $.post('process_delete_participant.php', $(this).serialize(), function(data) {
                $('#results').html(data);
            });
        }
    });