Flipswitch updating mysql using jquery-mobile

Question

I'm trying to utilize the JQM Flipswitch but I'm encountering some problems. My goal: when the flipswitch is turned on or off → java notices → php → mysql

This code sort-of works but there are two issues: 1) Always returns OFF 2) Doesn't update

Any help would be appreciated

HTML

<fieldset>
   <div data-role="fieldcontain">
      <span id="alarm_box">
         <label for="alarm">Alarm:</label>
         <input type="checkbox" id="alarm" data-role="flipswitch">
         <div id="alarm_n"></div>
      </span>
   </div>
</fieldset>

JAVA/AJAX

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

    $.post("main_send.php", {
        "alarm": checkStatus
    },

    function (data) {
        $('#alarm_n').html(data);
    });
});

Answer 1

Use change event bound to Flipswitch ( alarm ) not click .

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

    $.post("main_send.php", {
        "alarm": checkStatus
    },

    function (data) {
        $('#alarm_n').html(data);
    });
});

Demo