Identify Checked Checkbox Sequence Then Save To Mysql Database

I have here a code wherein I have an array of checkbox populated with mysql data through a query. I can successfully submit the value of the checked checkbox into a table in a data

Solution 1:

You create an hidden input with your checboxes, then when you submit the form you will have the $_POST['sequence'] with all your clicks in order:

​<input id="sequence" name="sequence" />
<input type="checkbox" class="check" name="checkbox1" value="checkbox1"​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​>
<input type="checkbox" class="check" name="checkbox2" value="checkbox2">
<input type="checkbox" class="check" name="checkbox3" value="checkbox3">
<input type="checkbox" class="check" name="checkbox4" value="checkbox4">

Then you bind clicks on every checkbox with class check in this example

var windowOnload=window.onload||function(){};window.onload=function(){windowOnload();};
window.onload = function(){

    var all = document.getElementsByTagName("input");
    for (var i=0;i<all.length;i++) {
        if(all[i].className == 'check'){
            all[i].onclick = inputClickHandler;
        }             
    }
};

function inputClickHandler(e){
    e = e||window.event;
    var inputElm = e.target||e.srcElement;
    var text = inputElm.value;
    var target = document.getElementById('sequence');
    if(inputElm.checked == true){
        if(target.value == ''){
            target.value = text;
        } else {
            target.value = target.value+','+text;
        }
    } else {
         var textToSearch = text+',';
         var textAlternative = ','+text;
         var regex = new RegExp( '\\b' + textToSearch + '\\b' );
         var regex2 = new RegExp( '\\b' + textAlternative + '\\b' );
         if(regex.test( target.value )){
             target.value = target.value.replace(textToSearch, '');
         } else if(regex2.test( target.value )){
             target.value = target.value.replace(textAlternative, '');
         } else {
             target.value = target.value.replace(text, '');
         }
    }
}​

You can achieve this with using jQuery also (it's more cleaner and reliable):

$(window).load(function(){
    $('.check').on('click', function(){
        if($(this).attr('checked')){
            if($('#sequence').val() == ''){
                $('#sequence').val($(this).val());
            } else {
                $('#sequence').val($('#sequence').val()+','+$(this).val());
            }
        } else {
             var targetValue = $('#sequence').val();
             var textToSearch = $(this).val()+',';
             var textAlternative = ','+$(this).val();
             var regex = new RegExp( '\\b' + textToSearch + '\\b' );
             var regex2 = new RegExp( '\\b' + textAlternative + '\\b' );
             if(regex.test( targetValue )){
                 $('#sequence').val(targetValue.replace(textToSearch, ''));
             } else if(regex2.test( targetValue )){
                 $('#sequence').val(targetValue.replace(textAlternative, ''));
             } else {
                 $('#sequence').val(targetValue.replace($(this).val(), ''));
             }
        }
    });
});​

Solution 2:

Got the detection of checked checkbox sequence through this code:

<script type="text/javascript"> 
<!--

$(document).ready(function(){

    var array = [];


    $("input[type=button]").click(function(){
    for (var i = 0; i < array.length; i++){  
    if (array[i] == $(this).attr('value')){  
    array.splice(i, 1);  
    }  
    }  
    alert(array.length);
    });




    $('input[type="checkbox"]').click(function(){

    if ($(this).attr('checked')){
    // Add the new element if checked:  
    array.push($(this).attr('value'));
    //alert(array2.push($(this).attr('name')));
    }

    else{ 
    // Remove the element if unchecked:  
    for (var i = 0; i < array.length; i++){  
    if (array[i] == $(this).attr('value')){  
    array.splice(i, 1);
    }
    }
    }






        $("#result").show(function(){
        $(this).val("");
        for (var i = 0; i < array.length; i++){
    $(this).val($(this).val() + " " + array[i]+ "\n");
        }
        });

    });

}); 
//--> 
</script>

I'm binding it in my checkbox.

$result=mysql_query(" select * from itinerary group by location");
    $y=mysql_affected_rows();
    for($i=0;$i<$y;$i++)
    {$row=mysql_fetch_array($result);
        $pr=$row['icode'];
        $n=$row['location'];
        $l=$row['btime'];
echo"<table border=1 align=center width=250>
          <tr><td width=15>
          <input type='checkbox' value='$n -> $l' id='cb1'>
</td><td>$n</td><td width=4>$l</td></tr>
          </table>";

Then output it in a textarea.

<textarea name=resulta id='result' style='height:200px; width:350px' disabled='disabled'></textarea>

I can save it in my database through this:

echo "<form><center><input type=submit name='pindot' value='Gora Men~'></center></form>";
$val=$_POST['resulta'];
if (isset($_POST['pindot']))
{
$lines = explode("\n", $val);

foreach ($lines as $line) {
    // $line here is a string
    // build a query based on it and execute it
    mysql_query("insert into postflight (sample_lang) values ('$line')") or die(mysql_error());

};
}

Thank you all for your help! God bless!