0 
<form method='post' action=''>
 <label for="x1">X1</label>
 <input id="x1" name="checkbox[]" type="checkbox" value="x1" />

 <label for="x2">X2</label>
 <input id="x2" name="checkbox[]" type="checkbox" value="x2" />

 <label for="x3">X3</label>
 <input id="x3" name="checkbox[]" type="checkbox" value="x3" />

 <label for="x4">X4</label>
 <input id="x4" name="checkbox[]" type="checkbox" value="x4" />

 <button type='submit' name='submit'>Submit</button>
</form>

In this form How can i get the selection order of the checkboxes inside the php array

Just if i submitted the form after clicking x4 > x2 > x3 > x1

i want to get ordered in the array as it is selected checkbox[x4, x2, x3, x1]

The normal array i get is as it is ordered checkbox[x1, x2, x3, x4].

Improve this question
8
  • 1
    You'd need some JavaScript that perhaps changes the index of the checkbox-array, it can't be done in PHP. This gets sent from top to bottom to the server, so PHP doesn't really know in what order anything happened in, it all comes at once. Commented Sep 14, 2017 at 11:33
  • @Qirel Is there any example of how to do that? Commented Sep 14, 2017 at 11:34
  • Like I said, you'd need some JS that changes something when you click it. Perhaps a change in the keys (so you set name="checkbox[1]" when the first one is checked, name="checkbox[2]" when the second is checked, etc). Commented Sep 14, 2017 at 11:36
  • php.net/manual/en/function.array-reverse.php Commented Sep 14, 2017 at 11:37
  • 1
    @JurijJazdanov array_reverse wont' work. As OP wants the order of array the same as the order in which the check boxes were selected by the user. Commented Sep 14, 2017 at 11:38

2 Answers 2

Reset to default
2

Check the clicked order using jquery

push the value to array on change event.if is checked push to the array.is unchecked value remove from array

Join the array with , add the value to hidden input .you could post this value to server

var arr=[]
$('input[type=checkbox]').on('change', function() {
  if ($(this).is(':checked')) {
    arr.push($(this).val())
  } else {
    var r =arr.indexOf($(this).val())
    arr.splice(r, 1)
}
$('input[type=hidden]').val(arr.join(',')) //for  server use
console.log(arr)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method='post' action=''>
  <label for="x1">X1</label>
  <input id="x1" name="checkbox[]" type="checkbox" value="x1" />

  <label for="x2">X2</label>
  <input id="x2" name="checkbox[]" type="checkbox" value="x2" />

  <label for="x3">X3</label>
  <input id="x3" name="checkbox[]" type="checkbox" value="x3" />

  <label for="x4">X4</label>
  <input id="x4" name="checkbox[]" type="checkbox" value="x4" />
<input type="hidden" name="clickedorder" >
  <button type='submit' name='submit'>Submit</button>
</form>

Updated

change the label value depend on clicking order

var arr=[]
$('input[type=checkbox]').on('change', function() {
  if ($(this).is(':checked')) {
    arr.push($(this).val())
  } else {
    var r =arr.indexOf($(this).val())
    arr.splice(r, 1)
}
$('input[type=checkbox]').each(function(a){
//console.log(arr.indexOf($(this).val()))
  if(arr.indexOf($(this).val())>-1){
     $(this).prev('label').text($(this).val().toUpperCase()+'-'+(arr.indexOf($(this).val())+1))
  }else{
    $(this).prev('label').text($(this).val().toUpperCase())
  }
})
$('input[type=hidden]').val(arr.join(',')) //for  server use

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method='post' action=''>
  <label for="x1">X1</label>
  <input id="x1" name="checkbox[]" type="checkbox" value="x1" />

  <label for="x2">X2</label>
  <input id="x2" name="checkbox[]" type="checkbox" value="x2" />

  <label for="x3">X3</label>
  <input id="x3" name="checkbox[]" type="checkbox" value="x3" />

  <label for="x4">X4</label>
  <input id="x4" name="checkbox[]" type="checkbox" value="x4" />
<input type="hidden" name="clickedorder" >
  <button type='submit' name='submit'>Submit</button>
</form>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Create a hidden field and set its value as arr it will be posted to server otherwise exercise is futile
Just once thing use some other name as orderedCheckbox instead of name="checkbox[]"
Is it possible to add for each label the order number of the selected checkboxes? like if we selected X4 first it becomes int he label X4-1? I thought about getting the `key number+1' then append it.
@Axon see my updated answer.My code also auto calculate order if you unchecked also
1

You need to write a jquery function like this:

Add a common class to all checkboxes like class="ckbox" then,

$(document).ready(function(){
    var selected_boxes = [];
    $('.ckbox').change(function() {
        if($(this).is(':checked')) {
            selected_boxes.push($(this).val());
            $(this).prev().attr('for',$(this).val());
        }
        else{    //  When uncheck the checkbox.
            selected_boxes.splice( $.inArray($(this).val(), selected_boxes), 1 );
        }
    });
});

Then post this JS variable to your php code. It will give all the values in sequence in which you had selected.

Improve this answer

7 Comments

Well, This is a simple way and i guess i will need to add the remove part, But i guess it need some fixation
With Remove part, you mean when unchecking the checkbox ?
Yes, Also the(this.val()) doesn't seem to be valid in the console
@Axon, I am updating my answer.
@Axon, hope this is helpful now. I have changed if condition and I have also put else part to remove checkbox value from array.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.