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!