Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I have a table in which the last cell is a bit value. When new data is inserted, the bit is automatically set to 1. I used PHP to display the contents of the table, in <table> form, wherein the last cell contains a checkbox. I didn't surround these checkboxes in <form></form> tags, they're just <input ... /> with name="stat[]." I used an array for the name so that PHP knows that $_POST['stat'] will be an array containing all the inputs.

One or more checkboxes can be checked and submitted to update the bit value to 0.

Questions:

Do I have to use <form> tags for this? The AJAX isn't working.

Can the <button> element be assigned a method and action?

HTML Button. Notice there is no form here.

<input type="submit" id="updateList" type="button" method="post" action="classes/requests/updateList.php" value="update list" />

jQuery and AJAX

$('input#updateList').on('click', function (e) {
    e.preventDefault();
    var open = 'yes';
    if ($('.update:checked').length <= 0) {
        $('.fade_bg').fadeIn(200);
        $('#updateStat').slideDown(600);
        $('span#stat2').fadeIn(400).text('You must make a selection');
        $('a#closeBox2').show();
        return false;
    }
    else {
        $('.update').each(function (index) {
            var chckd = $('#chck' + index).val();
            open = 'no';
            $.ajax ({
                type: 'post',
                url: 'classes/requests/updateList.php',
                data: {
                    stat: chckd
                },
                success: function(data) {
                    if (data === 'updated') {
                        alert(data);
               //       $('.fade_bg').fadeIn(200);
                        // $('#reqStat').slideDown(600);
                        // $('span#stat').fadeIn(400).text('Thank you. Your request has been submitted.');
                        // $('a#successClose').show();
                    }
                    else {
                        $('span#stat').fadeIn(400).text('There was an error in submitting your request');
                        $('a#closeBox').show();
                        return false;
                    }
                }
            });
        });
    }
});

PHP for rendering the HTML list

include('../dbconnect.php');
$closed = 'no';
$pdo = new PDO("mysql:host=$db_host;dbname=$db_name;", $db_user, $db_password);
$stmt = $pdo->prepare("SELECT RequestID, DateAdded, Graphic1Desc, Graphic2Desc, Graphic3Desc, ColorChart, Hex1, Hex2, Hex3, Hex4, Hex5, Hex6, Hex7, Hex8 FROM GraphicsRequest WHERE fulfilled = :done AND RequestID > 0");
print '<table id="pendingReqs">';
print '<tr id="headers">
            <td>Date</td>
            <td>Gr. 1</td>
            <td>Gr. 2</td>
            <td>Gr. 3</td>
            <td>Colors?</td>
            <td>HEX Vals 1-8</td>
            <td>Done</td>
            </tr>';
$stmt->bindParam(':done', $closed);
for ($r = 0; $r <= $stmt->rowCount(); $r++) {
    $stmt->execute();
    $row = $stmt->fetchAll(PDO::FETCH_ASSOC);
    $id = $row[$r]['RequestID'];
    $date = $row[$r]['DateAdded'];
    $d1 = $row[$r]['Graphic1Desc'];
    $d2 = $row[$r]['Graphic2Desc'];
    $d3 = $row[$r]['Graphic3Desc'];
    $chart = $row[$r]['ColorChart'];
    $h1 = $row[$r]['Hex1'];
    $h2 = $row[$r]['Hex2'];
    $h3 = $row[$r]['Hex3'];
    $h4 = $row[$r]['Hex4'];
    $h5 = $row[$r]['Hex5'];
    $h6 = $row[$r]['Hex6'];
    $h7 = $row[$r]['Hex7'];
    $h8 = $row[$r]['Hex8'];
    print '<tr>
                <td>' . $date . '</td>
                <td class="desc">' . $d1 . '</td>
                <td class="desc">' . $d2 . '</td>
                <td class="desc">' . $d3 . '</td>
                <td>' . $chart . '</td>
                <td>'
                 . $h1 . ', '
                 . $h2 . ',<br />'
                 . $h3 . ', '
                 . $h4 . ',<br />'
                 . $h5 . ', '
                 . $h6 . ',<br />'
                 . $h7 . ', '
                 . $h8 . '<br /></td>
                <td><input type="checkbox" class="update" name="stat[]" id="chk' . $id . '"/></td></tr>';
}
print '</table>';
print $id;

PHP for updating the list

function updateStatus() {
    include('../../../dbconnect.php');
    $updated = false;
    $open = 'yes';
    $id = 0;
    try {
        $pdo = new PDO("mysql:host=$db_host;dbname=$db_name;", $db_user, $db_password);
        $stat = $pdo->prepare('SELECT RequestID FROM GraphicsRequest WHERE fulfilled = :open');
        $stat->bindParam(':open', $open);
        $_POST['stat'] = array();
        for ($r = 0; $r <= $stat->rowCount(); $r++) {
            $stat->execute();
            $row = $stat->fetchAll(PDO::FETCH_ASSOC);
            $id = $_POST['stat'][$row[$r]['RequestID']];
            if (ISSET($_POST['stat[' . $id . ']'])) {
                $open = 'no';
                $stmt = $pdo->prepare('UPDATE GraphicsRequest SET fulfilled = :open');
                $stmt->bindParam(':open', $open);
                $stmt->execute();
                $pdo = null;
                if ($stmt->rowCount() == 0)
                    echo('rowCount = 0');
                else
                    $updated = true;
                return $updated;
            }
        }
    }
    catch (PDOException $err){
        echo $e->getMessage();
        return $updated;
    }
}
share|improve this question

1 Answer 1

I haven't checked all of your source code, but it is absolutely possible to use AJAX to send some data to the server without the need of <form> tag. Using a form makes it only a lot easier to receive all "form values" at once.

share|improve this answer
    
That's good to know. I changed the <button> to <input type="submit"> –  NojoRu Feb 3 at 19:35
    
You don't have to do that. You can actually use any HTML element (even an img, span, div or something else), as long as you bind the onclick event handler to this element. But you should remove the "action" and "method" attributes form those elements, as they are invalid and you use a static method and action in your JS anyways. –  Kau-Boy Feb 3 at 19:37
    
You can even bind the event to the checkboxes. So every time they got updated, you'll send the new data (so no need for the user to "save" the values with a click on another button). –  Kau-Boy Feb 3 at 19:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.