Ajax form submission within a php foreach loop

Question

I am trying to use an ajax form submission for a list of forms generated by a php foreach loop. My issue is I obviously need to mark each generated form as unique and can't seem to figure it out. I thought to use the HTML data- attribute but cant seem to make it work.

Here is the code so

<?php
if (isset($_SESSION['team_mem_id'])) {                                  
    $query_team_matches = $conn->prepare($sql_team_matches);
    $query_team_matches->bindParam(':tid', $tid, PDO::PARAM_INT);
    $query_team_matches->execute();
    $matches = $query_team_matches->fetchAll(PDO::FETCH_ASSOC);

    if (!empty($matches)) {
        foreach($matches as $Matches) {
            $tmid = $Matches['tmid'];
            $opponent = $Matches['opponent'];
            $location = $Matches['location'];
            $tm_datetime = $Matches['tm_datetime'];
            $match_date = date("F j",strtotime($tm_datetime));
            $match_time = date("g:i A",strtotime($tm_datetime));
            $match_when = $match_date. " @ ".$match_time;
?>
    <div class='match_container'>
        <div class='match_basic_info'>
            <h3><?php echo $match_when.' - <span style="font-size: 16px">'.$location.' vs '.$opponent; ?></span></h3>
            <a class='match_details_link' href='http://localhost:1234/tennisexcel/teams/match.php?r=team&tid=<?php echo $tid; ?>&tmid=<?php echo $tmid; ?>'>More info...</a>
        </div>

        <div id='match_avail_container' class='match_avail_container'>
            <h3>My availability:</h3>
            <form id='avail_submit_form' data-tmid='<?php echo $tmid; ?>' class="" action='http://localhost:1234/tennisexcel/test_ajax.php' method='POST'>
                <input type='hidden' name='uid' value='<?php echo $_SESSION['uid']; ?>'/>
                <input type='hidden' name='tid' value='<?php echo $_SESSION['tid']; ?>'/>
                <input type='hidden' name='tmid' value='<?php echo $tmid; ?>'/>
                <button class='match_avail_yes' type='submit' name='availability' value='1'>&#10004;</button>
                <button class='match_avail_no' type='submit' name='availability' value='2'>&#10006;</button>
            </form>
            <div id="signup" data-tmid='<?php echo $tmid; ?>' class='match_avail_success success_display'>
                <p>success!</p>
            </div>  
        </div>
    </div>
<?php               
        }
    }       
}
?>

I added a data-tmid='$tmid' to the form and the div that need to be marked as unique. The jquery is below:

$(document).ready(function() {
    $('#avail_submit_form').submit(function(evt) {
        evt.preventDefault();
        var url = $(this).attr('action');
        var fromData = $(this).serialize();
        $.post(url, fromData, function(response) {
            $('#avail_submit_form').hide();
            $('#signup').removeclass('success_display');
        }); //end post
    }); //end submit
}); //end ready

I tried adding on [data-tmid='+$(this).attr('data-tmid')+'] to each id but not sure how to make it work properly or if it is even the correct way to do it.

Thank anyone who can lead me in the right direction!

You should use a class instead of ID for your forms. Why must they be marked as unique? — Mikey
– Mikey, Commented May 28, 2018 at 14:40
Yes, using class instead of ID makes sense. I will change that. I don't really know why it would need to be unique, just thought that was my issue. Thanks — BL10s
– BL10s, Commented May 28, 2018 at 16:28

Mikey · Accepted Answer · 2018-05-28 14:44:54Z

1

Use a class instead of ID.

<div class='match_container'>
    <div class='match_basic_info'>
        <h3><?php echo $match_when.' - <span style="font-size: 16px">'.$location.' vs '.$opponent; ?></span></h3>
        <a class='match_details_link' href='http://localhost:1234/tennisexcel/teams/match.php?r=team&tid=<?php echo $tid; ?>&tmid=<?php echo $tmid; ?>'>More info...</a>
    </div>
    <!-- fix #1 -->
    <div class='match_avail_container'>
        <h3>My availability:</h3>
        <!-- fix #2 -->
        <form data-tmid='<?php echo $tmid; ?>' class="avail_submit_form" action='http://localhost:1234/tennisexcel/test_ajax.php' method='POST'>
            <input type='hidden' name='uid' value='<?php echo $_SESSION['uid']; ?>'/>
            <input type='hidden' name='tid' value='<?php echo $_SESSION['tid']; ?>'/>
            <input type='hidden' name='tmid' value='<?php echo $tmid; ?>'/>
            <button class='match_avail_yes' type='submit' name='availability' value='1'>&#10004;</button>
            <button class='match_avail_no' type='submit' name='availability' value='2'>&#10006;</button>
        </form>
        <!-- fix #3 -->
        <div data-tmid='<?php echo $tmid; ?>' class='match_avail_success success_display'>
            <p>success!</p>
        </div>  
    </div>
</div>

I am assuming you only want to target the current form in your jQuery

$(document).ready(function() {
    // add event handler to your forms
    $('.avail_submit_form').submit(function(evt) {
        evt.preventDefault();
        // cache the current form object
        var form = $(this);
        var url = form.attr('action');
        var fromData = form.serialize();
        $.post(url, fromData, function(response) {
            // make changes to current form and its related element
            form.hide();
            form.next('.match_avail_success').removeclass('success_display');
        });
    });
});

answered May 28, 2018 at 14:44

Mikey

6,7564 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

BL10s Over a year ago

I have tried your solution and it makes sense to me. However, my issue now is that it doesn't actually submit the form or at least nothing end up in the database. If I remove the jquery completely the form submits and the info ends up in the database. The form would still be submitted via a post method correct?

Mikey Over a year ago

@BL10s Open your browser's developer tools. First, check if you have any errors. Second, check Network tab and look at the request that gets sent over after you click the button: is it passing the correct data, are you getting back the correct response, are there any errors, etc? You may want to turn on error reporting in the other script that processes your form. Check also if the handler is even binding to the elements. Inside the .ready, do console.log($('.avail_submit_form').length) and it should be > 0.

BL10s Over a year ago

I checked the console and had 1 error "Uncaught TypeError: form.next(...).removeclass is not a function". I just removed it completely for now. I didn't think to check the network, I looked and the issue is that the Button name and value are never passed through so my php file gives an error for missing variable. Is there a work around for this that you know of or will I have to split it into 2 forms? Thanks again for all your help.

BL10s Over a year ago

Just realized I had it as removeclass not removeClass. That error is fixed.

Mikey Over a year ago

@BL10s Which button? Any inputs within the form with name attribute will be submitted.

|

Collectives™ on Stack Overflow

Ajax form submission within a php foreach loop

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related