jquery.form: как установить более одной формы на одной странице?

Question

У меня есть список имен с кнопкой «удалить», каждая строка является формой, и нажатие на кнопку «Удалить» должно обновляться в реальном времени, но не работает, потому что в этом плагине я могу установить только один идентификатор запускается, когда в списке только одно имя)

это функция JavaScript:

$(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);  
}); 

HTML-форма с 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>

Я должен создать разные идентификаторы для каждой формы (например, используя идентификатор строки), но я должен сказать функции js, что каждая форма должна следовать этой функции в этой строке:

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

Я также использовал этот код:

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

но это работает только при первом клике, при втором щелчке открывается скрипт php. надеюсь, вы можете помочь мне, извините за плохой английский

Answer 1

Прежде всего:

Вместо создания нескольких форм с одним и тем же идентификатором, вы должны создать несколько форм с одним и тем же классом. Одно и то же значение для атрибута ID следует использовать только один раз. Пример

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

Пожалуйста, используйте более описательное наименование, чем _1, _2 ... хотя, если возможно.

Когда каждая форма имеет один и тот же класс, вы можете вызвать ajaxForm (параметры), используя

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

Второе:

Сценарий, который вы, вероятно, ищете, выглядит примерно так

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);
});

Сценарий может не работать как есть в вашей текущей ситуации, но я надеюсь, что это поможет вам двигаться вперед. Возможно, вы захотите добавить использованные эффекты fadeIn, fadeOut и, возможно, захотите проверить результаты запроса HTTP POST перед удалением формы со страницы.