Multiple forms with AJAX on one page

Question

I am developing a list of submissions in the admin area of my website, which I can approve/disprove with a form, with an ID of the submission in a hidden input, and the select box with Approve/Reject in. When the select box is changed, the ajax submits the form, along with the hidden ID input, then the PHP script edits the submission in the database.

It was all working fine with one submission (1 form) on the page, but now there is more than one form, it is POSTing the wrong values to the PHP script.

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

I tried using IDs, then it didn't POST at all. What am I missing here?

Have a look at this [Form submit without refresh using jquery/ajax if page have more than one form](http://stackoverflow.com/questions/12026600/form-submit-without-refresh-using-jquery-ajax-if-page-have-more-than-one-form/12030228) — M Khalid Junaid, Nov 28 '13 at 20:38
@dianuj Thanks. I saw your answer, but I'm still confused on how I would then also use the method I'm using at the moment, of when the select box is changed it does the action, in your answer on that question you show how to do it with a submit button — James, Nov 28 '13 at 20:45
I've read about that you have tried it with IDs - just to be sure, have your forms different classes? — NiMeDia, Nov 28 '13 at 21:01
@crafter Tried that, checked console and it's not sending the ajax request — James, Nov 28 '13 at 21:46
@james see my answer and [**Fiddle**](http://jsfiddle.net/7jGq6/) — M Khalid Junaid, Nov 29 '13 at 10:47

score 0 · Answer 1 · answered Nov 28 '13 at 21:04

It depends on your event listener/selector:

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

This will always submit .reviewform even if a select of anoter form has been changed. (Basicly it registers the function for the change event of all select tags in you page)

Please try:

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

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

score 0 · Accepted Answer · answered Nov 29 '13 at 10:44

You can try this assign common class like i have assigned in fiddle (status) to selectbox then get the form by the change of its children (<select>) like in fiddle i tried to get the id of from by change event of its child element (<select>) ,once you got the id get the data of form and submit it

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

See Fiddle

Multiple forms with AJAX on one page

2 Answers2