Checkbox Data Dynamically Save To Database On Click

I need some js/ajax/jquery script saving data to database dynamically when I check the check-box. the checkboxes at the moment or loaded in next to records and change the variable

Solution 1:

Do it with jQuery, a simple example could be:

HTML:

<inputtype="checkbox" name="option1" value="Milk">
<inputtype="checkbox" name="option2" value="Sugar">
<inputtype="checkbox" name="option3" value="Chocolate">

JS:

$("input[type='checkbox']").on('click', function(){
   var checked = $(this).attr('checked');
   if(checked){
      var value = $(this).val();
      $.post('file.php', { value:value }, function(data){
          // data = 0 - means that there was an error// data = 1 - means that everything is okif(data == 1){
             // Do something or do nothing :-)alert('Data was saved in db!');
          }
      });
   }
});

PHP: file.php

<?phpif ($_POST && isset($_POST['value'])) {

    // db connection$link = mysql_connect('localhost', 'mysql_user', 'mysql_password');
    if (!$link) {
       // error happenedprint(0);
    }
    mysql_select_db('mydb');

    // sanitize the value$value = mysql_real_escape_string($_POST['value']);

    // start the query$sql = "INSERT INTO table (value) VALUES ('$value')";

    // check if the query was executedif(mysql_query($sql, $link)){
       // everything is Ok, the data was insertedprint(1);    
    } else {
       // error happenedprint(0);
    }
}
?>

Solution 2:

Simple put...

$('input:checkbox').click( function() {
  clicked = $(this).attr('checked');
  if (clicked) {
    /* AJAX the server to tell them it was clicked. */ }
  else {
    /* AJAX the server to tell them it was unclicked. */ } } );

Solution 3:

I can make this even simpler. first, you need to ad a checkbox!!

<formname="form1aa"method="post"action="process.php?fn=<?echo$rows['frist']; ?>&class=<?phpecho$rows['class']; ?>&last=<?phpecho$rows['last']; ?>
&model=<?phpecho$rows['model']; ?>&cas=<?phpecho$rows['cases']; ?>&upid=<?phpecho$id; ?>&group=1"id="form1a" ><selectname="type"onchange="fill_damage(document.form1aa.type.selectedIndex);"><optionvalue="Hardware">Hardware</option><optionvalue="Software">Software</option></select><selectname="damage"></select><inputtype="text"name="comment"placeholder="Comments Box"><inputtype="text"name="cost"placeholder="Cost"><inputtype="checkbox"name="somecheck"onchange="if(this.checked)document.form1aa.submit()">Check this to Save.
    <inputtype="submit"value="Save"name="Save"></form><scripttype="javascript>
//another function that works for onchange="dosubmit(this)"
//IFyouputitaftertheform.functiondosubmit(el) {
    if (el.checked) {
        document.form1aa.submit();
    }
}
</script>

get rid of the spaces in your onchange events where possible.

Solution 4:

If you have dynamic checkbox list and you want to dynamically save the clicked one to database or inserting the unchecked one, here how to do that:

Html/PHP

<?php// $checklists are models that I am getting from db$checklists = CheckList::getCheckLists(3);
        echo'<ul>';
        foreach ($checklistsas$checklist) {
            $isChecked = $checklist->getAnswer($requestID, $checklist->primaryKey);
            $checked = $isChecked ? "checked" : "";
            echo'<li>';
            echo"<input id='{$checklist->primaryKey}' 
            name='{$checklist->primaryKey}'  type='checkbox' {$checked} 
            value='{$isChecked}' data-request-id='{$requestID}'> 
            $checklist->check_list_text";
            echo'</li>';
        }
        echo'</ul>';
        ?>

Jquery

<script>
$("input[type='checkbox']").on('click', function(){
    var checkbox = $(this);
    var checked = checkbox.prop('checked');
    var checklistId = checkbox.attr("id");

    $.ajax({
        url:"<?= Url::to(['default/add-checklist-answer']) ?>",
        // I don't need to write the type here because I am using Yii Framework// type: 'post',data: {
            checklistId: checklistId,
            requestId: checkbox.data('request-id'),
            checked: checked
        },
        success: function(data) {
            //alert(data);console.log(data.firstMessage)
        },
        error: function(data) {
            // alert(data);
        }
    });

});

</script>

I hope it will work for MVC users.