0

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!

BL10s
  • 33
  • 6
  • You should use a class instead of ID for your forms. Why must they be marked as unique? – Mikey May 28 '18 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 May 28 '18 at 16:28

1 Answers1

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');
        });
    });
});
Mikey
  • 6,432
  • 4
  • 20
  • 36
  • 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? – BL10s May 28 '18 at 16:31
  • @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](https://stackoverflow.com/questions/1053424/how-do-i-get-php-errors-to-display) 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. – Mikey May 28 '18 at 17:06
  • 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 May 28 '18 at 17:18
  • Just realized I had it as removeclass not removeClass. That error is fixed. – BL10s May 28 '18 at 17:21
  • @BL10s Which button? Any inputs within the form with `name` attribute will be submitted. – Mikey May 28 '18 at 17:32
  • I was using the 2 different submit buttons as a yes(1) or no(2) value to be submitted with the form. I can probably just break it into 2 forms and submit the yes(1) or no(2) value as inputs instead. – BL10s May 28 '18 at 17:58