用jQuery提交多個表單php mysql

Question

我有任何答案/問題的頁面。我爲管理員檢索問題列表。管理員看到這個。現在我需要爲每個問題發送答案。所以我爲每個問題textarea和形式與職位後的行動。現在我需要當發送問題消息的答案時，如果發送消息到外部php files = true;消息（ID）刪除（jQuery滑動效果）。爲此我有jquery提交表單代碼（不刷新頁面），但我有大問題。這隻適用於一種形式！並不適用於所有列表表單（問題+答案表單）。如何處理我的代碼爲多個表單？我選擇了正確的方式？

的html代碼：

<form action="insert.php?id=42" id="forms" method="POST" name="form"> 
<div id="box"> 
<div class="messagequestion"></div> 
<div class="messagereply"><textarea></textarea><input type="submit" class="submit" name="submit" value="submit"></div> 
</div> 
</form> 
<form action="insert.php?id=45" id="forms" method="POST" name="form"> 
<div id="box"> 
<div class="messagequestion"></div> 
<div class="messagereply"><textarea></textarea><input type="submit" class="submit" name="submit" value="submit"></div> 
</div> 
</form> 
<form action="insert.php?id=48" id="forms" method="POST" name="form"> 
<div id="box"> 
<div class="messagequestion"></div> 
<div class="messagereply"><textarea></textarea><input type="submit" class="submit" name="submit" value="submit"></div> 
</div> 
</form> 
<form action="insert.php?id=50" id="forms" method="POST" name="form"> 
<div id="box"> 
<div class="messagequestion"></div> 
<div class="messagereply"><textarea></textarea><input type="submit" class="submit" name="submit" value="submit"></div> 
</div> 
</form> 

感謝

Answer 1

你的主要問題可能是您正在嘗試重新使用的ID。所有表格的編號均爲"forms"，您也可以分享編號"box"。

所有的ID都應該唯一標識一個元素。當你需要對一個元素進行分類時使用一個類。我建議您將所有表格上的id="forms"更改爲class="reply_form"，然後將所有div上的id="box"更改爲class="reply_box"。然後將爲#forms和#box設置的樣式更改爲爲.reply_form和.reply設置的樣式。

編輯 - 在與OP進行了一些討論後，在jsfiddle中進行了調整。

http://jsfiddle.net/gvnfg/5/

Answer 2

使用jQuery .each()方法：

$(document).ready(function() { 
    $('#forms').each(function() { 

     this.submit(function() { 
      $.ajax({ ... }); 
     }); 
    }); 

}) 

Answer 3

只是改變了選擇。 id屬性必須是唯一的以html

$("[name='form']").submit(function() { 
    $this = $(this);  
    $.ajax({ 
     type: 'POST', 
     url: $(this).attr('action'), 
     data: $(this).serialize(), 
     cache: false,  
     beforeSend: function() { 
      $('#loading').show(); 
      $('#result').hide(); 
     }, 
     success: function(data) { 
      if(data==1){ 
       $('#loading').hide(); 
       $('#result').fadeIn('slow').html("ok"); 
       $('#result').addClass('true'); 
       $this.slideUp(1000); 
      } 
     else { 
      $('#loading').hide(); 
      $('#result').fadeIn('slow').html(data); 
      $('#result').addClass('errors'); 
     }} 
    }); 
    e.preventDefault(); 
    return false; 
});