• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 622
  • Last Modified:

checkbox

I have 7 checkboxes:
<input type="radio" name="test1" value="aaa">
<input type="radio" name="test2" value="bbb">
<input type="radio" name="test3" value="ccc">
......

how can i make it such that the user are only allow to select maximum of 3 options and only one variable that contains all the checked values will pass to next page after submition
0
aNtiPoP
Asked:
aNtiPoP
  • 8
  • 7
  • 4
  • +4
1 Solution
 
djokovCommented:
you must use checkboxes, not radio buttons, and then some small javascript to calculate the value you want to submut.
0
 
aNtiPoPAuthor Commented:
sorry... supposed to be like this

<input type="checkbox" name="test1" value="aaa">
<input type="checkbox" name="test2" value="bbb">
<input type="checkbox" name="test3" value="ccc">

anyway, u haven't answer the question yet
0
 
aNtiPoPAuthor Commented:
sorry... supposed to be like this

<input type="checkbox" name="test1" value="aaa">
<input type="checkbox" name="test2" value="bbb">
<input type="checkbox" name="test3" value="ccc">

anyway, u haven't answer the question yet
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
aNtiPoPAuthor Commented:
here's the whole script. i'm able to find the maximum number to select. but to put all the checked value into the string, i really need ur help

<script language="JavaScript">
  function validate(theForm) {
  for (j=0,i=0,n=theForm.elements.length;i<n;i++) {
     if (theForm.elements[i].type == 'checkbox' && theForm.elements[i].checked){
      j++
     }
  }
     
  if (j > 2) {
       alert(j);
     return false;
  }
 
  return true;
  }
</script>

<body>

<form name="testform" onsubmit="return validate(this)" action="output.htm">
<input type="checkbox" name="test1" value="AAA">AAA<br>
<input type="checkbox" name="test2" value="BBB">BBB<br>
<input type="checkbox" name="test3" value="CCC">CCC<br>

<input type="submit" value="GO">
</form>
</body>
0
 
nilapennCommented:
<script language="JavaScript">
 function validate(theForm) {
theForm.hdnChecked.value=''
 for (j=0,i=0,n=theForm.elements.length;i<n;i++) {
    if (theForm.elements[i].type == 'checkbox' && theForm.elements[i].checked){
theForm.hdnChecked.value=theForm.hdnChecked.value + ","
theForm.elements[i].value
     j++
    }
 }
   
 if (j > 2) {
      alert(j);
    return false;
 }
// to remove last comma
 theForm.hdnChecked.value=theForm.hdnChecked.value.substr(0,theForm.hdnChecked.value=theForm.hdnChecked.value.length-1)
 return true;
 }
</script>

<body>

<form name="testform" onsubmit="return validate(this)" action="output.htm">
<input type="checkbox" name="test1" value="AAA">AAA<br>
<input type="checkbox" name="test2" value="BBB">BBB<br>
<input type="checkbox" name="test3" value="CCC">CCC<br>
<input type="hidden" name="hdnchecked">
<input type="submit" value="GO">
</form>
</body
0
 
nilapennCommented:
<script language="JavaScript">
 function validate(theForm) {
theForm.hdnChecked.value=''
 for (j=0,i=0,n=theForm.elements.length;i<n;i++) {
    if (theForm.elements[i].type == 'checkbox' && theForm.elements[i].checked){
theForm.hdnChecked.value=theForm.hdnChecked.value + ","
theForm.elements[i].value
     j++
    }
 }
   
 if (j > 2) {
      alert(j);
    return false;
 }
// to remove last comma
 theForm.hdnChecked.value=theForm.hdnChecked.value.substr(0,theForm.hdnChecked.value=theForm.hdnChecked.value.length-1)
 return true;
 }
</script>

<body>

<form name="testform" onsubmit="return validate(this)" action="output.htm">
<input type="checkbox" name="test1" value="AAA">AAA<br>
<input type="checkbox" name="test2" value="BBB">BBB<br>
<input type="checkbox" name="test3" value="CCC">CCC<br>
<input type="hidden" name="hdnchecked">
<input type="submit" value="GO">
</form>
</body
0
 
djokovCommented:
<html>
<script language="JavaScript">
 function validate(theForm) {
result = new Array();
 for (j=0,i=0,n=theForm.elements.length;i<n;i++) {
    if (theForm.elements[i].type == 'checkbox' && theForm.elements[i].checked){
     result[j]=theForm.elements[i].value;
     j++;
    }
 }

 if (j > 3) {
      alert(j);
    return false;
 }

alert(result[0]+"\n"+result[1]+"\n"+result[2]);
 return true;
 }
</script>

<body>

<form name="testform" onsubmit="return validate(this)" action="output.htm">
<input type="checkbox" name="test1" value="AAA">AAA<br>
<input type="checkbox" name="test2" value="BBB">BBB<br>
<input type="checkbox" name="test3" value="CCC">CCC<br>
<input type="checkbox" name="test4" value="DDD">DDD<br>
<input type="checkbox" name="test5" value="EEE">EEE<br>
<input type="checkbox" name="test6" value="FFF">FFF<br>
<input type="checkbox" name="test7" value="GGG">GGG<br>

<input type="submit" value="GO">
</form>
</body>
0
 
katyanCommented:
<script language="JavaScript">
 function validate(theForm) {
 var str = "";
 for (j=0,i=0,n=theForm.elements.length;i<n;i++) {
    if (theForm.elements[i].type == 'checkbox' && theForm.elements[i].checked){
     j++
     str += theForm.elements[i].value + ":"
    }
 }
   
 if (j > 2) {
      alert(j);
    return false;
 }
alert (str)
 
 return true;
 }
</script>

<body>

<form name="testform" onsubmit="return validate(this)" action="output.htm">
<input type="checkbox" name="test1" value="AAA">AAA<br>
<input type="checkbox" name="test2" value="BBB">BBB<br>
<input type="checkbox" name="test3" value="CCC">CCC<br>

<input type="submit" value="GO">
</form>
</body>
0
 
djokovCommented:
<html>
<script language="JavaScript">
 function validate(theForm) {
result = new Array();
theForm.hdnChecked.value='';
 for (j=0,i=0,n=theForm.elements.length;i<n;i++) {
    if (theForm.elements[i].type == 'checkbox' && theForm.elements[i].checked){
     result[j]=theForm.elements[i].value;
     j++;
    }
 }

 if (j > 3) {
      alert(j);
    return false;
 }

alert(result[0]+"\n"+result[1]+"\n"+result[2]);
theForm.hdnChecked.value=result;
 return true;
 }
</script>

<body>

<form name="testform" onsubmit="return validate(this)" action="output.htm">
<input type="checkbox" name="test1" value="AAA">AAA<br>
<input type="checkbox" name="test2" value="BBB">BBB<br>
<input type="checkbox" name="test3" value="CCC">CCC<br>
<input type="checkbox" name="test4" value="DDD">DDD<br>
<input type="checkbox" name="test5" value="EEE">EEE<br>
<input type="checkbox" name="test6" value="FFF">FFF<br>
<input type="checkbox" name="test7" value="GGG">GGG<br>

<input type="submit" value="GO">
</form>
</body>
0
 
nimaigCommented:
Check this out :

<html>
<head>
<script language="javascript">
<!--

var myArray = new Array();
var maxSelected = 3;

function countChecked(currObj){
     var currObjName = currObj.name;
     var formObj = currObj.form;
     if(currObj.checked){
          if(myArray.length < maxSelected){
               myArray[myArray.length] = currObjName;
          }else{
               fObj = eval("formObj." + myArray[0])
               if(fObj){
                    fObj.checked = false;
               }
               for(i=0;i<maxSelected-1;i++){
                    myArray[i] = myArray[i+1];    
               }
               myArray[maxSelected-1] = currObjName;
          }
     }else{
          if(myArray.length > 0){
               var newArray = Array();
               var j=0;
               for(i=0;i<myArray.length;i++){
                    if(myArray[i] == currObjName){
                    }else{
                         newArray[j] = myArray[i];
                         j++;
                    }
               }
               myArray = newArray;
          }
     }      
}

function submitForm(formObj){
     if(myArray.length > maxSelected){
          alert("Only " + maxSelected + " checkboxes can be selected");
          return false;
     }
     var combinedValue = "";
     for(i=0;i<myArray.length;i++){
          cObj = eval("formObj." + myArray[i]);
          combinedValue += cObj.value;      
          if(i < (myArray.length-1))
          combinedValue += ",";      
     }
     alert(combinedValue);
     formObj.value = combinedValue;
     
}
//-->
</script>
</head>
<body>
<form>
<input type="hidden" name="checkValue">

<input type="checkbox" name="test1" value="aaa" onClick="countChecked(this)">test1<br>
<input type="checkbox" name="test2" value="bbb" onClick="countChecked(this)">test2<br>
<input type="checkbox" name="test3" value="ccc" onClick="countChecked(this)">test3<br>
<input type="checkbox" name="test4" value="ddd" onClick="countChecked(this)">test4<br>
<input type="checkbox" name="test5" value="eee" onClick="countChecked(this)">test5<br>
<input type="checkbox" name="test6" value="fff" onClick="countChecked(this)">test6<br>
<input type="checkbox" name="test7" value="ggg" onClick="countChecked(this)">test7<br>

<input type="button" value="submit" onClick="submitForm(this.form)">

</form>
</body>
</html>
0
 
aNtiPoPAuthor Commented:
i will prefer to use only one parameter to keep all the checked values, for test= AAA, CCC ....
0
 
nimaigCommented:
replace the old method with this :

function submitForm(formObj){
    if(myArray.length > maxSelected){
         alert("Only " + maxSelected + " checkboxes can be selected");
         return false;
    }
    var combinedValue = "";
    for(i=0;i<myArray.length;i++){
         cObj = eval("formObj." + myArray[i]);
         combinedValue += cObj.value;      
         if(i < (myArray.length-1))
         combinedValue += ",";      
    }
    alert(combinedValue);
    formObj.checkValue.value = combinedValue;
   
}

0
 
djokovCommented:
in my answer is is called results and keeps all checked values...
0
 
Michel PlungjanIT ExpertCommented:
Please take it easy folks...
Nimaig and others. Here is how to concatenate without a trailing comma:

combinedValue="";
for(...) {
  combinedValue += "",+cObj.value;      
}
theForm.comb.value = (combinedValue)?combinedValue.substring(1):"";

alternative use an array like djokov like this:

result = new Array();
for (j=0,i=0,n=theForm.elements.length;i<n;i++) {
   if (theForm.elements[i].type == 'checkbox' && theForm.elements[i].checked){
   result[j++]=theForm.elements[i].value;
}
theForm.comb.value = (result.length>0)?result.join(','):"";

Michel
0
 
Michel PlungjanIT ExpertCommented:
And
combinedValue += "",+cObj.value;      
should of course be
combinedValue += ","+cObj.value;      

Michel
0
 
djokovCommented:
I am sure that the array is the right decission. Don't forget that you should parse this variable later in order to get what are the checked values. And if you use some symbol as a separator - what if such symbol is found in some of checked values?!
So, I think that array is the best.
0
 
nimaigCommented:
My code doesn't give a trailing comma ....
0
 
djokovCommented:
nimaiq - look carefuly your function submitForm and check what 'combinedValue' is...
:-))
0
 
Michel PlungjanIT ExpertCommented:
Nimaig: Your LAST code does not have a trailing comma, but it is not exactly elegant and is wasting time too to test inside the loop if a comma is needed. Just wanted to give you a nicer way

Djokov - the array will have to be joined somehow anyway, so it does not matter if you use array or string unless you have a list of delimiters and for each add to the array test what delimiter to use in the end.
Alternatively use | as delimiter and escape all values

Michel
0
 
djokovCommented:
It becomes very bothering discussion... First of all, in general, why it should be only one variable?!?!?...and why the array should be joined?!
...anyway...i really think it doesn't make sense to give more comments here...
0
 
nimaigCommented:
Thanks Michel :)
0
 
Michel PlungjanIT ExpertCommented:
Djokov: You cannot submit an array...
"only one variable that contains all the checked values will pass to next page after submition"

Michel
0
 
djokovCommented:
yeah, but what is the point? anyway
0
 
TTomCommented:
Jumping in late without reading the whole thread....

If you name all your select boxes the same, the values will be submitted to your server as a single, comma-delimited list (for whichever of them are checked), e.g.,

<input type=checkbox name=box value="aaa"> aaa
<input type=checkbox name=box value="bbb"> bbb
<input type=checkbox name=box value="ccc"> ccc

Doesn't seem to be any reason to worry about arrays and joining.  The only problem I can see is determining which item(s) to omit if the user selects more than three.  Dealing with that would probably involve trapping the check action and looping through the boxes to see how many are checked each time the user checks (or unchecks) one.

Tom
0
 
aNtiPoPAuthor Commented:
i will prefer to use only one parameter to keep all the checked values, for test= AAA, CCC ....
0
 
aNtiPoPAuthor Commented:
TTOM, i know logically if i'm using the same name for all the checkboxes, it supposed to return all the value in one. but what i received ony the last value.

eg, if i selected AAA, CCC, it will only return only CCC
0
 
aNtiPoPAuthor Commented:
thanks for all experts who participating
0
 
TTomCommented:
I will do some testing, but, unless something else in your code (or your form processing routine) is changing things, I am relatively certain that using the same name for your checkboxes will accomplish what you need.

Tom
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 8
  • 7
  • 4
  • +4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now