在一頁上使用AJAX的多個表單

我正在開發我的網站的管理區域中的提交列表，我可以使用表單批准/反對，使用隱藏輸入中的提交ID以及選擇框與批准/拒絕英寸。當選擇框更改時，ajax提交表單，以及隱藏的ID輸入，然後PHP腳本編輯數據庫中的提交。在一頁上使用AJAX的多個表單

這一切都工作正常與頁面上的一個提交（1表單），但現在有多個表單，它是POST錯誤值的PHP腳本。

<tbody> 
     <?php 
      // connect to mysql 
      mysql_connect('#######', '#######', '#######'); 
      mysql_select_db('jcvideos'); 

      // query 
      $query = mysql_query("SELECT * FROM videos"); 

      // loop thru 
      while($row = mysql_fetch_assoc($query)) { 
     ?> 
     <tr<?php if($row['accepted']==0) {echo " class='warning'";}?>> 
      <td><?php echo $row['id'];?></td> 
      <td> 
       <a href="//youtu.be/<?php echo $row['ytid'];?>" target="_blank"> 
        <?php 
         $url = "http://gdata.youtube.com/feeds/api/videos/". $row['ytid']; 
         $doc = new DOMDocument; 
         $doc->load($url); 
         echo $doc->getElementsByTagName("title")->item(0)->nodeValue; 
        ?> 
       </a> 
      </td> 
      <td><?php echo $row['date'];?></td> 
      <td> 
       <a href="mailto:<?php echo $row['submitter'];?>"> 
        <?php echo $row['submitter'];?> 
       </a> 
      </td> 
      <td> 
       <form id="form<?php echo $row['id'];?>" class="reviewform" method="post" action="review.php"> 
        <input type="hidden" value="<?php echo $row['id'];?>" name="vidid"> 
        <select name="status"> 
         <option value="0"<?php if($row['accepted']==0) {echo ' selected';}?>>Pending review</option> 
         <option value="1"<?php if($row['accepted']==1) {echo ' selected';}?>>Rejected</option> 
         <option value="2"<?php if($row['accepted']==2) {echo ' selected';}?>>Accepted</option> 
        </select> 
       </form> 
      </td> 
      <td><?php echo $row['showdate'];?></td> 
     </tr> 
     <?php 
      } // end of loop 
     ?> 
    </tbody> 
</table> 
<?php include('../includes/footer.php');?> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script> 
    $("select").change(function(){ 
     $('.reviewform').ajaxSubmit(); 
    }); 
</script>

我試過使用ID，那麼它根本沒有POST。我在這裏錯過了什麼？

來源

2013-11-28 James

看一看這個[表單提交使用無刷新的jQuery /阿賈克斯如果頁面有一個以上的形式（http://stackoverflow.com/questions/12026600/form-submit-without-refresh-使用-jquery-ajax-if-page-have-more-one-form/12030228） –

@dianuj謝謝。我看到了你的答案，但是我仍然對如何使用我目前使用的方法感到困惑，當選擇框被改變時它會執行操作，在你回答這個問題時，你將展示如何用提交按鈕來做 – James

我已經閱讀過關於你已經使用過ID的方法 - 只是爲了確保你的表單有不同的類嗎？ – P0rnflake

你可以試試這個分配通用類就像我在小提琴（狀態）已分配給選擇框，然後通過其子項的變化（<select>）獲取表單，我嘗試通過其子元素的更改事件（<select>）獲取ID的ID，一旦獲得了ID，就可以獲取表單的數據並提交它

$('.status').on('change', function(){ 
var id=$(this).parent("form").attr('id'); 
    alert(id) 
$('#'+id).ajaxSubmit(); 
/* $("#"+id).serialize() form data */ 
});

See Fiddle

來源

2013-11-29 10:44:25

這取決於你的事件監聽器/選擇：

$("select").change(function(){ 
    $('.reviewform').ajaxSubmit(); 
});

這將始終提交.reviewform即使選擇anoter形式已經改變。（Basicly它在你頁面註冊了所有選擇標籤的變化事件的函數）

請嘗試：

$(".reviewform select").change(function(){ 
    $('.reviewform').ajaxSubmit(); 
}); 

$(".anotherform select").change(function(){ 
    $('.anotherform').ajaxSubmit(); 
});

來源

2013-11-28 21:04:28 P0rnflake

在一頁上使用AJAX的多個表單

回答

相關問題