Bootstrap3 toggle switch with ajax update to mysql

Hello and thank you for looking.

I have the slick new toggle effect for the checkbox (boostrap3) in place. I would like to update my database each time the toggle is clicked. A simple On or OFF entry will be perfect. Ofcourse it needs to be without a page refresh.

HTML:

<span id="setQuickVar1">Enable Notifications<input id="QuickVar1" type="checkbox" class="make-switch" data-size="small" data-on-color="success" data-on-text="ON" data-off-color="default" data-off-text="OFF" ></span>
                                  <div id="resultQuickVar1"></div>

Javascript/Ajax:

var handleQuickSidebarToggler2 = function () {
        // quick sidebar toggler
        $('#setQuickVar1').click(function (e) {
            $('body').toggleClass('make-switch');
            $.post("quickRightSidebarDBUpdate.php", {"quickVar1a": $('#QuickVar1').val()}, 
            function(data) {
                $('#resultQuickVar1').html(data);
            });
        });
    }

(I added a div to show my results)

quickRightSidebarDBUpdate.php

if ($_POST['quickVar1a']):
    $quickVar1a = $_POST['quickVar1a'];
    $query2 = "UPDATE test SET field1 = " . $quickVar1a . ""; 
endif;

I think I am close since the Db does get an entry of “on”. I can set the check box to “checked” or leave it as above in the code and each time it enters “on” to the BD.

I’m not sure how the entry of “on” is even generated.

Thank you greatly for any help.

ANSWER BELOW…Well it works..but it’s not pretty

I did an ugly version of what I want and it’s working. Here’s what I did.

HTML

 <span id="setQuickVar1">Enable Notifications<input id="QuickVar1" type="checkbox" class="make-switch" data-size="small" data-on-color="success" data-on-text="ON" data-off-color="default" data-off-text="OFF" <?php echo $checked;?>  ></span>
                                  <div id="resultQuickVar1"></div>

Javascript/Ajax

    // Handles quick sidebar toggler2
    var handleQuickSidebarToggler2 = function () {
        // quick sidebar toggler
        $('#setQuickVar1').click(function (e) {
            $('body').toggleClass('make-switch');
            //$(this).toggleClass('make-switch');
            $.post("quickRightSidebarDBUpdate.php", {"quickVar1a": $('#QuickVar1').val()}, 
            function(data) {
                $('#resultQuickVar1').html(data);
            });
        });
    }

quickRightSidebarDBUpdate.php

$sql = "SELECT * FROM `test`";
$result = mysql_query($sql)or die(mysql_error());
$r = mysql_fetch_array($result);
echo 'Finding:'.$r['quickVar1'].'<br>';
if($r['quickVar1'] == 'ON')
$quickVar1a = 'OFF';
else
$quickVar1a = 'ON';
$sql = "UPDATE test SET quickVar1 ='" . $quickVar1a . "'";
$result = mysql_query($sql)or die(mysql_error());
echo 'Updating To: '.$quickVar1a.'<br>';

Answer

Do it like this:

$('#setQuickVar1').on('click', function() {
    var checkStatus = this.checked ? 'ON' : 'OFF';

    $.post("quickRightSidebarDBUpdate.php", {"quickVar1a": checkStatus}, 
    function(data) {
        $('#resultQuickVar1').html(data);
    });
});

PHP

if (isset($_POST['quickVar1a'])):
    $quickVar1a = $_POST['quickVar1a'];
    $query2 = "UPDATE test SET field1 = '" . $quickVar1a . "'"; 
endif;

code not tested, let me know if does NOT work 🙂

Update 2

Here is a proper SQL query for the toggle:

$query2 = "UPDATE test SET field1 = '".$quickVar1a."' where field1 != '".$quickVar1a."'";

ANSWER BELOW…Well it works..but it’s not pretty

Advertisement

Answer

Update 2