Solved

checkbox

Posted on 2001-06-29
28
586 Views
Last Modified: 2008-02-26
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
Comment
Question by:aNtiPoP
  • 8
  • 7
  • 4
  • +4
28 Comments
 
LVL 2

Expert Comment

by:djokov
ID: 6237412
you must use checkboxes, not radio buttons, and then some small javascript to calculate the value you want to submut.
0
 

Author Comment

by:aNtiPoP
ID: 6237431
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
 

Author Comment

by:aNtiPoP
ID: 6237445
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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:aNtiPoP
ID: 6237454
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
 
LVL 5

Expert Comment

by:nilapenn
ID: 6237497
<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
 
LVL 5

Accepted Solution

by:
nilapenn earned 30 total points
ID: 6237508
<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
 
LVL 2

Expert Comment

by:djokov
ID: 6237517
<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
 
LVL 1

Expert Comment

by:katyan
ID: 6237519
<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
 
LVL 2

Expert Comment

by:djokov
ID: 6237522
<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
 
LVL 9

Expert Comment

by:nimaig
ID: 6237526
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
 

Author Comment

by:aNtiPoP
ID: 6237590
i will prefer to use only one parameter to keep all the checked values, for test= AAA, CCC ....
0
 
LVL 9

Expert Comment

by:nimaig
ID: 6237633
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
 
LVL 2

Expert Comment

by:djokov
ID: 6237662
in my answer is is called results and keeps all checked values...
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6237785
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6237790
And
combinedValue += "",+cObj.value;      
should of course be
combinedValue += ","+cObj.value;      

Michel
0
 
LVL 2

Expert Comment

by:djokov
ID: 6237809
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
 
LVL 9

Expert Comment

by:nimaig
ID: 6237836
My code doesn't give a trailing comma ....
0
 
LVL 2

Expert Comment

by:djokov
ID: 6237871
nimaiq - look carefuly your function submitForm and check what 'combinedValue' is...
:-))
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6237894
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
 
LVL 2

Expert Comment

by:djokov
ID: 6237914
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
 
LVL 9

Expert Comment

by:nimaig
ID: 6237920
Thanks Michel :)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6238247
Djokov: You cannot submit an array...
"only one variable that contains all the checked values will pass to next page after submition"

Michel
0
 
LVL 2

Expert Comment

by:djokov
ID: 6238268
yeah, but what is the point? anyway
0
 
LVL 9

Expert Comment

by:TTom
ID: 6239198
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
 

Author Comment

by:aNtiPoP
ID: 6240081
i will prefer to use only one parameter to keep all the checked values, for test= AAA, CCC ....
0
 

Author Comment

by:aNtiPoP
ID: 6240091
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
 

Author Comment

by:aNtiPoP
ID: 6240338
thanks for all experts who participating
0
 
LVL 9

Expert Comment

by:TTom
ID: 6240645
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

837 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question