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

Question

我有一个带有“删除”按钮的名称列表，每一行都是一个表单，单击删除列表应该实时更新，但不起作用，因为在这个插件中我只能设置一个ID(事实上它当列表中只有一个名称时运行)

这是 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>

我应该为每个表单创建一个不同的id(例如使用行的id)，但我应该告诉js函数每个表单都必须遵循这一行中的该函数:

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

我也使用了这段代码:

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

但这仅在第一次单击时有效，第二次单击时打开 php 脚本。希望你能帮助我，抱歉英语不好

Answer 1

首先:

您应该创建具有相同类的多个表单，而不是创建多个具有相同 id 的表单。 ID 属性的相同值只能使用一次。示例

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

如果可能的话，请使用比 _1、_2 ... 更具描述性的命名。

当每个表单具有相同的类时，您可以使用调用ajaxForm(options)

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

在您当前的情况下，该脚本可能无法按原样运行，但我希望这可以帮助您前进。您可能想要添加所使用的淡入、淡出效果，并且可能想要在从页面删除表单之前检查 HTTP POST 请求的结果。