jquery.form: how to set more than one form in one page?

Question

hi! i have a list of names with "delete" button, every row is a form and clicking on delete the list should be updated in real time but don't works because in this plugin i can set only one id (infact it runs when in the list there's only one name)

this is the javascript function:

$(document).ready(function() {      
var options = {          
target:        '#risposta',   
resetForm: true,      
success: function(showResponse) {
$("#lista_categorie").load("categorie.php").show('fast');
$('#risposta').fadeIn(2000),setTimeout(function({$('#risposta').fadeOut(1000);},5000);}};
$('#elimina_categoria').ajaxForm(options);  
}); 

the html form is build with php:

<form action="categorie_elimina.php?id=$row['id']" method="post" id="elimina_categoria">
<p>$row['nome'] 
<input type="submit" id="submit_pro" value="elimina" class="elimina"></p>
</form>

i should create a different id for every form (using the id of the row for example) but i should tell to js function that every form must follow that function in this line:

$('#elimina_categoria').ajaxForm(options);  

i also used this code:

$('[id|=elimina_categoria]').ajaxForm(options);

but this only works at first click, clicking the second time it opens the php script.. hope you can help me, sorry for bad english

Answer 1

First of all:

Instead of creating several forms with the same id, you should create several forms with the same class. The same value for the ID-attribute should only be used once. Example

<form id="elimina_categoria_1" class="elimina_categoria"> ... </form>
<form id="elimina_categoria_2" class="elimina_categoria"> ... </form>

Please use a more descriptive naming than _1, _2 ... though, if possible.

When each form has the same class, you can call ajaxForm(options) using

$('form.elimina_categoria').ajaxForm(options)

Second:

The script you're probably looking for is something like this

function eliminaCategoria() {
   var eliminaForm = $(this).parent().parent(); // Select the form of the button
   $.post(eliminaForm.val('action')); // Call the action defined by the form
   eliminaForm.remove(); // Remove the form-element from the page. 
   return false; // don't let the submit-button submit the form. 
}

$(document).ready( function() {
  $('.elimina').bind('click', eliminaCategoria);
});

The script might not work as-is in your current situation, but I hope this helps you forward. You probably want add the fadeIn, fadeOut effects you used and you might want to check the results of the HTTP POST request before deleting the form from the page.