Ajax form submission within a php foreach loop - php

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'>✔</button>
<button class='match_avail_no' type='submit' name='availability' value='2'>✖</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!

Answer 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'>✔</button>
<button class='match_avail_no' type='submit' name='availability' value='2'>✖</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');
});
});
});