在一个页面上使用AJAX的多个表单

时间:2013-11-28 20:36:21

标签: javascript php jquery html ajax

我正在我的网站的管理区域中开发一个提交列表,我可以使用表单批准/反驳,隐藏输入中的提交ID,以及批准/拒绝的选择框。选择框被更改,ajax提交表单以及隐藏的ID输入,然后PHP脚本编辑数据库中的提交。

一切正常,页面上有一个提交(1个表单),但是现在有多个表单,它将错误的值发布到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。我在这里缺少什么?

2 个答案:

答案 0 :(得分:0)

这取决于你的事件监听器/选择器:

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

即使已经更改了选择的anoter表单,也会始终提交.reviewform。 (基本上它会为你页面中所有选择标签的更改事件注册功能)

请尝试:

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

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

答案 1 :(得分:0)

你可以尝试这个分配公共类,就像我已经在小提琴(状态)中指定选择框然后通过更改其子项(<select>)来获取表单,就像在小提琴中我试图获取来自的id更改其子元素的事件(<select>),一旦你获得了id获取表单数据并提交它

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

See Fiddle