php - jQuery with html / php form (using ajaxForm) working only once

Question

I've been trying to solve this for a while now and no success. Stackoverflow needed!

Basically, what the script does is fetch user profile pictures from the database. A moderator can see them and click on the "Ban" button, and then the banPeopleProcess.php file has the code to remove the picture from the database etc. Example: http://screencast.com/t/uFtFgKxYx4s

Each picture is a form, they all have the same form id. Here's the HTML (in php echo):

<div>
<form id=\"banPeopleForm\" action=\"banPeopleProcess.php\" method=\"post\">
    <input type=\"hidden\" name=\"toid\" value=". $i ." />
    <input id=\"banPeopleBtn\" type=\"submit\" name=\"submit\" value=\"BAN\" />
</form>
</div>

The JS currently looks like this:

<script type="text/javascript"> 

function banPeople() {
    $('#banPeopleForm').ajaxForm(function() {
        $('#banPeopleBtn').hide(); 
    });
}

$(document).ready(function() {
    $('#banPeopleBtn').click(function() {
        banPeople();
        });
    }); 
</script> 

• Only the first loaded picture actually does what it should be doing (button is hiding, form submitted etc.)
• For the following pictures, the JS doesn't work, they just follow the normal HTML form - when clicking the ban button, we are redirected to banPeopleProcess.php.
• With that said it seems like only the first photo id gets loaded with the JS, and the others not. I still don't know what to try.

Help greatly appreciated guys!!

Answer 1

You should prevent form from submitting php file and use ajax for calling your php.something like that

$(document).ready(function() {
    $('#banPeopleBtn').click(function(e) {
        e.preventDefault();
        banPeople();    
        $.ajax({
        type: "POST",
        url: "banPeopleProcess.php"
        });

        });
    }); 

Answer 2

Use different id for each picture. use different form id and submit id for each picture. Make dynamic the javascript id as well as followed $('#banPeopleBtn'+id).hide(); As javascript can not work with same id in same page.