Question

How to Save value of check-box within 5 columns to database (PHP and JQUERY) ?

PHP code are dispay 6 columns. there 5 columns contain check-box that loop from database.

—PHP———————————–

        <table  id="tblISP" border="0">         
    <tr>
        <th style="width:20px">
        </th>
        <th>
            MenuID
        </th>

        <th>
            Menu
        </th>
        <th>
            Delete
        </th>
        <th>
            Upddate
        </th>
        <th>
            View
        </th>
        <th>
            Save
        </th>
    </tr>
    <tr>
        <td>ALL <input type="checkbox" class="menuiddd" name="checkmenuid" id="checkmenuid"/></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>ALL<input type="checkbox" class="menuidddel" name="checkdelete" id="checkdelete"/></td>
        <td>ALL<input type="checkbox" class="menuiddupdate" name="checkupdate" id="checkupdate"/></td>
        <td>ALL<input type="checkbox" class="menuiddview" name="checkview" id="checkview"/></td>
        <td>ALL<input type="checkbox" class="menuiddsave" name="checksave" id="checksave"/></td>
    </tr>
                        <tr>
        <td>

                <input type="checkbox" class="menuiddd" name="idd[]" id="idd[]" value="<?php echo $row["mid"]; ?>"/>
        </td>
        <td>
            <?php echo $row["mid"]; ?>
        </td>
        <td>
            <?php echo $row["mname"]; ?>
        </td>    
        <td>
            <input type="checkbox" class="menuidddel" name="del[]" id="del[]" value="chkdel" />
        </td>
        <td>
            <input type="checkbox" class="menuiddupdate" name="upd[]" id="upd[]" value="chkupd" />
        </td>
        <td>
            <input type="checkbox" class="menuiddview"  name="vie[]" id="vie[]" value="chkvie" />
        </td>
        <td>
            <input type="checkbox" class="menuiddsave" name="sav[]" id="sav[]" value="chksav" />
        </td>
    </tr>

        <tr>
        <td colspan="3">
            <!--<a id="hlsa" href="javascript:exit(0);">Select All</a>
            <a id="hldsa" href="javascript:exit(0);">DeSelect All</a>-->
        </td>
    </tr>
    <tr>
        <td colspan="3" align="center">
            <hr/>
            <input type="button" value="Save" id="btSave" name="btSave" style="cursor:pointer;float:none" class="allbutton">
        </td>
    </tr>
    <tr>
        <td colspan="3"  id="dvProc1" align="center">

        </td>
    </tr>
    </table>Save check-box value within 5 columns to database

——————Jquery————

Jquery reaction when click button save then get information from check box save to database.

$(document).ready(function (){

            $("#btSave").unbind();
            $("#btSave").click(function(){          

                var idd = [];
                var del = [];
                var upd = [];
                var vie = [];
                var sav = [];

                $("input[name='idd[]']:checked").each(function() {
                  idd.push($(this).val());
                });

                $("input[name='del[]']:checked").each(function() {
                  del.push($(this).val());
                });

                $("input[name='upd[]']:checked").each(function() {
                  upd.push($(this).val());
                });

                $("input[name='vie[]']:checked").each(function() {
                  vie.push($(this).val());
                });

                $("input[name='sav[]']:checked").each(function() {
                  sav.push($(this).val());
                });


                var mainarray=[idd,del,upd,vie,sav];
                var transposed = mainarray.transpose();

                //-----------------------alert(str);--note--need return-------------
                alert(transposed.join(';'));

            })


            $("#checkmenuid").click(function(){
                $('.menuiddd').attr('checked', $( this ).is( ':checked' ) ? 'checked' : "");
            });


            $("#checkdelete").click(function(){
                $('.menuidddel').attr('checked', $( this ).is( ':checked' ) ? 'checked' : "");
            });

            $("#checkupdate").click(function(){
                $('.menuiddupdate').attr('checked', $( this ).is( ':checked' ) ? 'checked' : "");
            });


            $("#checkview").click(function(){
                $('.menuiddview').attr('checked', $( this ).is( ':checked' ) ? 'checked' : "");
            });


            $("#checksave").click(function(){
                $('.menuiddsave').attr('checked', $( this ).is( ':checked' ) ? 'checked' : "");
            });

});

</script>

Answer 1

I’m not entirely sure I’ve identified your question, but before you deal with any jQuery you should build a functioning system without any javascript. Rather than defining a non-standard method for dealing with the form’s submission, you can simply write it normally before adding a clean layer of javascript to handle asynchronous submission.

Firstly, you need to wrap your input elements in a form element, and then write a PHP script to analyse the global $_POST array and to execute the various database commands as required. You can use this PHP layer for the logic of identifying what calls should be made to the database, based on what the user has selected on the form. Note that checkboxes that are unchecked are not actually sent in the POST request, so you’ll have to use isset() in PHP to know if they were unchecked.

Once that’s arranged, you can use jQuery to submit the form asynchronously, and you won’t cause a page refresh:

$(function() {
    $('form#yourformid').submit(function(event) {
        event.preventDefault(); // stop the page from redirecting

        // serialise your form's data, and send it in a POST request
        // to the form's action attribute
        $.post(
            $(this).attr('action'),
            $(this).serialize(),
            function() {
                alert('Data successfully saved.');
            });
    });
});