Updating MySQL from HTML table, each row has own form

Question

I have an HTML table that properly displays a MySQL Games table. I want to be able to edit the Games table, one game at a time. I have an Edit Game button that displays with JQuery and replaces the labels with textboxes in the row it was clicked, allowing the user to edit the values before reclicking the same button, which then says "Save Changes." I have changed my code to use AJAX to post the values in the textboxes, but it won't post for some reason. It's my first time using AJAX, but I copied and pasted the code so I'm not sure if it's a syntax issue.

Here is the HTML table:

echo '<table><tr>
        <th>GameID</th>
        <th>Name</th>
        <th class="inventory">Price</th>
        <th class="catalog">Min Players</th>
        <th class="catalog">Max Players</th>
        <th class="catalog">Time of Play</th>
        <th class="catalog">Player Age</th>
        <th class="catalog">Rating BGG</th>
        <th class="catalog">Game Type 1</th>
        <th class="catalog">Game Type 2</th>
        <th>Box Art</th>
        <th class="catalog">Has Expansions?</th>
        <th class="catalog">Base Set (GameID)</th>
        <th class="catalog">Description</th>
        <th class="inventory">Quantity for Sale</th>
        <th class="inventory">Quantity Playable</th>
        <th class="inventory">Quantity Playing</th>
        <th class="inventory">SupplierID</th>
        <th class="analytics">Custom Rating</th>
        <th class="analytics">Search Count</th>
        </tr>';
        while ($rowG = mysqli_fetch_assoc($result)){
            echo '<tr>
            <td class="gameID"><label name="gameID">' . $rowG["gameID"] . '</label></td>
            <td><label name="gameName">' . $rowG["gameName"] . '</label></td>
            <td class="inventory"><label name="gamePrice">' . $rowG["gamePrice"] . '</label></td>
            <td class="catalog"><label name="playersMin">' . $rowG["playersMin"] . '</label></td>
            <td class="catalog"><label name="playersMax">' . $rowG["playersMax"] . '</label></td>
            <td class="catalog"><label name="timeOfPlay">' . $rowG["timeOfPlay"] . '</label></td>
            <td class="catalog"><label name="playerAge">' . $rowG["playerAge"] . '</label></td>
            <td class="catalog"><label name="ratingBGG">' . $rowG["ratingBGG"] . '</label></td>
            <td class="catalog"><label name="gameType1">' . $rowG["gameType1"] . '</label></td>
            <td class="catalog"><label name="gameType2">' . $rowG["gameType2"] . '</label></td>
            <td><img src="' . $rowG["boxArt"] . '"/></td>
            <td class="catalog"><label name="hasExpansions">' . $rowG["hasExpansions"] . '</label></td>
            <td class="catalog"><label name="expands">' . $rowG["expands"] . '</label></td>
            <td class="catalog"><label name="gameDescription">' . $rowG["gameDescription"] . '</label></td>
            <td class="inventory"><label name="quantityForSale">' . $rowG["quantityForSale"] . '</label></td>
            <td class="inventory"><label name="quantityPlayable">' . $rowG["quantityPlayable"] . '</label></td>
            <td class="inventory"><label name="quantityPlaying">' . $rowG["quantityPlaying"] . '</label></td>
            <td class="inventory"><label name="supplierID">' . $rowG["supplierID"] . '</label></td>
            <td class="analytics"><label name="ratingCustom">' . $rowG["ratingCustom"] . '</label></td>
            <td class="analytics">' . $rowG["searchCount"] . '</td>
            <td class="edit" hidden><input class="editBtn" type="submit" value="Edit Game"/></td>
            </tr>';
        }
        echo '</table>';
    ?>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="inventory.js"></script>

And here are the relevant parts of the JQuery file:

    $('tr').click(function(){
    if (editing == false){
        $('td').removeClass('selected');
        $('.edit').hide();
        $(this).children('td').addClass('selected');
        $(this).children('.edit').show();
    }
});

$('.editBtn').click(function(){

    if (editing == false){
        editing = true;

        $('.selected label').replaceWith(function(){
            return '<input type="text" id="#' + $(this).attr("name") + '" name="' + $(this).attr("name") + '" value="' + $(this).html() + '"/>';
        });
        $('.editBtn').val("Save Changes");
    } else {

        var gameID = $("#gameID").val();

        var dataString = 'gameID=' + gameID;
        $.ajax({
            type: "POST",
            url: "processing/updateGame.php",
            data: dataString,
            success: function(result){
                alert(result);
            }
        });

        $('.editBtn').val("Edit Game");
        editing = false;

        $('.selected input[type=text]').replaceWith(function(){
            return '<label name="' + $(this).attr("name") + '">' + $(this).val() + '</label>';
        });
    }

The echo statement in updateGame.php is for debugging. Currently displays $gameID as undefined.

$gameID = $_POST['gameID'];

echo 'hello world' . $gameID;

Why is nothing posting properly? I'm using MAMP, which is running PHP 5.5.14. Not sure if that's relevant.

score 1 · Accepted Answer · answered Apr 08 '15 at 20:16

1

You can not embed a form inside a table like that. Invalid HTML.

Here is my suggestion.

1) Underneath the table, add a hidden form.

2) After editing the game, and hitting save, pass the values to the hidden form, and submit via ajax.

answered Apr 08 '15 at 20:16

Mark

4,773
8
53
91

1

If you're submitting via AJAX, you don't even need a form. – Barmar Apr 08 '15 at 20:17
Thank you. I don't have any experience with AJAX. Could you point me to a good tutorial? Better yet, can you highlight the primary methods I should learn to accomplish this task? – ComicDavid Apr 08 '15 at 20:31
http://stackoverflow.com/questions/16616250/form-submit-with-ajax-passing-form-data-to-php-without-page-refresh. Literally Google ajax form post. – Mark Apr 08 '15 at 20:52
Made changes to use AJAX, still having posting issues. – ComicDavid Apr 08 '15 at 22:30
Check your dev tools, console and network.... Are you getting any errors logged in your console when you try and post? Is your post getting any http response? – Mark Apr 08 '15 at 22:53
I redid the files so it begins with disabled textboxes that each have their own class per column type. The edit changes button enables the textboxes, and it now posts properly. So the problem is within the original jquery replacement and the classes/id attribution. – ComicDavid Apr 09 '15 at 00:29

Updating MySQL from HTML table, each row has own form

1 Answers1