Solved

checkbox

Posted on 2001-06-29
28
564 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
<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
Comment Utility
<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
Comment Utility
<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
Comment Utility
<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
Comment Utility
<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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
in my answer is is called results and keeps all checked values...
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 75

Expert Comment

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

Michel
0
 
LVL 2

Expert Comment

by:djokov
Comment Utility
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
Comment Utility
My code doesn't give a trailing comma ....
0
 
LVL 2

Expert Comment

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

Expert Comment

by:Michel Plungjan
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks Michel :)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
Comment Utility
yeah, but what is the point? anyway
0
 
LVL 9

Expert Comment

by:TTom
Comment Utility
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
Comment Utility
i will prefer to use only one parameter to keep all the checked values, for test= AAA, CCC ....
0
 

Author Comment

by:aNtiPoP
Comment Utility
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
Comment Utility
thanks for all experts who participating
0
 
LVL 9

Expert Comment

by:TTom
Comment Utility
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now