Getting values from multiple checkboxes

JavaScript
1

I have this checkboxes

<input type="checkbox" class="calc" name="access[a]" value="1" />
<input type="checkbox" class="calc" name="access[b]" value="2" />
<input type="checkbox" class="calc" name="access[c]" value="3" />
<input type="checkbox" class="calc" name="access[d]" value="4" />

I need the following thing, i will explain it in an example:
Example: User selects third and fourth fields, 7(3+4) and cd ([access[c]+access[d]) will be send.
I want 2 things to be send, calculation of value and access[values].

2

Hi,

Welcome to the forums :slight_smile:

When you say “send”, do you mean you want to fie off an AJAX request, or do you want to submit the form?

It shouldn`t be too hard to implement, but we need to know a bit more about what you are trying to do.

3

Submit with Ajax

4

Ok. What code have you got already?

5

Here is the code I use for submit:


function privileges(){
$.ajax({
type:'POST',
url:'./core/privileges.php',
data:"access="+form_accessvalues+"values="+form_values,
success:function(response){
if(response=='1'){$('#privileges_label').css({'display':'block','border':'1px solid #bfde84','background':'#edfbd8 url(../images/success.gif) 12px 12px no-repeat','color':'#508600'}).html('&#1059;&#1089;&#1087;&#1077;&#1096;&#1085;&#1086; &#1079;&#1072;&#1088;&#1077;&#1076;&#1080;&#1093;&#1090;&#1077; 100 &#1072;&#1084;&#1084;&#1086;')}
else if(response=='2'){$('#privileges_label').css({'display':'block','border':'1px solid #e9c59b','background':'#ffecce url(../images/error.gif) 12px 12px no-repeat','color':'#e3302c'}).html('&#1052;&#1086;&#1083;&#1103;, &#1080;&#1079;&#1073;&#1077;&#1088;&#1077;&#1090;&#1077; &#1087;&#1088;&#1072;&#1074;&#1072;&#1090;&#1072; &#1082;&#1086;&#1080;&#1090;&#1086; &#1080;&#1089;&#1082;&#1072;&#1090;&#1077; &#1076;&#1072; &#1079;&#1072;&#1082;&#1091;&#1087;&#1080;&#1090;&#1077;.')}
else if(response=='3'){$('#privileges_label').css({'display':'block','border':'1px solid #e9c59b','background':'#ffecce url(../images/error.gif) 12px 12px no-repeat','color':'#e3302c'}).html('&#1052;&#1086;&#1083;&#1103;, &#1080;&#1079;&#1083;&#1077;&#1079;&#1090;&#1077; &#1086;&#1090; &#1080;&#1075;&#1088;&#1072;.')}
else if(response=='4'){$('#privileges_label').css({'display':'block','border':'1px solid #e9c59b','background':'#ffecce url(../images/error.gif) 12px 12px no-repeat','color':'#e3302c'}).html('&#1053;&#1103;&#1084;&#1072;&#1090;&#1077; &#1076;&#1086;&#1089;&#1090;&#1072;&#1090;&#1072;&#1095;&#1085;&#1086; &#1082;&#1088;&#1077;&#1076;&#1080;&#1090;&#1080;.')}
}
});
}

form_values = calculation of value
form_accessvalues = access[flags]

6

Ok. And what should happen when the user checks three or four or no boxes?
Should the value still be calculated and the total value plus name attributes still be sent to the PHP script?

7

if no boxes are selected,both values and access[values] will be null.
If at least 1 checkbox is selected values and access[values] from that/these will be send else values and acess[values] will be send as null.
My english is not very good, I hope you have understand me.

8

No problems. It’s better than my Bulgarian :slight_smile:

What I would do in your case then, is to attach an event listener to the checkboxes, which fires whenever any of them are selected or deselected. You seem to be using jQuery, so I’ll go with that:

<input type="checkbox" class="calc" name="access[a]" value="1" />
<input type="checkbox" class="calc" name="access[b]" value="2" />
<input type="checkbox" class="calc" name="access[c]" value="3" />
<input type="checkbox" class="calc" name="access[d]" value="4" />

$("input:checkbox").on("change", function(){
  privileges();
})

As you can see, this calls the privileges function.

Within this function, we then need to work out what to pass to your PHP script:

The most readable way to pass data via jQuery ajax() is to use an object literal:

data: {
  "access": getAccessValues(),
  "values": getFormValues(), 
 },

And you can assign the return value of a function call to these variables.

function getAccessValues(){
  var numCheckboxes = $(":checkbox:checked").length;

  if (numCheckboxes === 0){
     return whatever
  } else if (numCheckboxes === 1){
    return whatever
  }else {
    return whatever
  }
}

getFormValues(){
  var numCheckboxes = $(":checkbox:checked").length;
  ...
}

HTH