Hey guys i'm wondering to know how to do that when theres 10 chexbox that are *checked* how can i stop the user ? mine stop at 9! i know that its a problem with the variables... well think... i tryied a lot of things with if but i didn't success... Its the poschoix that is the problem,
Here's the code i'm using
Code:
<script language="JavaScript" type="text/javascript">
<!--
var add;
function valide()
{
var poschoix=0;
var i;
var total=0;
for (i=0;i<=29;i++)
{
if(poschoix!=10)
{
if (document.FrmExam.liste[i].checked)
{
document.FrmExam.listechoix[poschoix].value=document.FrmExam.listenom[i].value;
document.FrmExam.numchoix[poschoix].value = document.FrmExam.listenum[i].value;
add=document.FrmExam.listenum[i].value*1;
total = (total + add);
document.FrmExam.Nbpoint.value=total;
poschoix = poschoix+1;
}
else
{
document.FrmExam.listechoix[poschoix].value="";
document.FrmExam.numchoix[poschoix].value = "";
}
}
else
{
poschoix=poschoix-1;
alert("Vous ne pouvez pas dépassé 10 joueurs, veuillez en désélectionner un pour en sélectionner un autre.");
document.FrmExam.liste[(i-1)].checked=false
}
}
}
//-->
</script>
If u need something help, just ask and i'll gently post it. Sorry for my bad englis by the way...
Thanks
If I understand correctly, you want to keep the user from checking more than 10 checkboxes? I don't understand all of your code, partially because of the foreign variable names and partially because it seems to try to do more than you describe. Either way, here's how I would handle your problem as I understand it.
Code:
(function() {
function checkLimit() {
if(this.checked) {
if(this.checks.count<this.checks.max) {
this.checks.count++;
} else {
this.checked=false;
alert('You cannot check more than '+this.checks.max+' boxes in this area.');
}
} else {
this.checks.count--;
}
}
window.setLimit=function(group,limit) {
var i=0,t,obj={count:0,max:limit};
while(t=group[i++]) {
t.checks=obj;
t.addEventListener('click',checkLimit);
}
};
})();
// now call setLimit(checkboxarray,10);
// eg: setLimit(document.getElementsByTagName('input'),10);
I'm not sure what you're saying for the first part - if it's to deal with checkboxes that are checked before the function runs then yes, some edits would be necessary, but Koliter seems to be asking to limit only how many the user checks.
For the second - you can go crazy making your code dinosaur-compatible; I try to follow Google's example and support the last 2 versions of the 5 major browsers, on all OSes. But you're still right - for some reason I was thinking IE10 was already mainstream. So here's a version that works with IE8.
Code:
(function() {
var addLimEvent=window.addEventListener?function(el) {
el.addEventListener('click',checkLimit);
}:function(el) {
el.attachEvent('onclick',checkLimit);
};
function checkLimit() {
if(this.checked) {
if(this.checks.count<this.checks.max) {
this.checks.count++;
} else {
this.checked=false;
alert('You cannot check more than '+this.checks.max+' boxes in this area.');
}
} else {
this.checks.count--;
}
}
window.setLimit=function(group,limit) {
var i=0,t,obj={count:0,max:limit};
while(t=group[i++]) {
t.checks=obj;
addLimEvent(t);
}
};
})();
// now call setLimit(checkboxarray,10);
// eg: setLimit(document.getElementsByTagName('input'),10);
The last two versions of the 5 major browsers, but not in IE8 ??? It is the even worse than I thought ! Try the following page for example, it do not work after a click in the input type text (witch decrease the counter), after a reload or a reset !
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="fr"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="generator" content="PSPad editor, www.pspad.com"><title>Untitled</title><style type="text/css"></style></head><body><form><input type="checkbox"> case à cocher<br><input type="checkbox"> case à cocher<br><input type="checkbox"> case à cocher<br><input type="checkbox"> case à cocher<br><input type="checkbox"> case à cocher<br><input type="text" value="Another input"><input type="reset" value="reset"></form><p id="cnt"></p><script type="text/javascript">
(function() {
function checkLimit() {
if(this.checked) {
if(this.checks.count<this.checks.max) this.checks.count++;
else {this.checked=false;
alert('You cannot check more than '+this.checks.max+' boxes in this area.');}}
else if (this.checks && 0<this.checks.count) this.checks.count--;
document.getElementById('cnt').innerHTML=this.checks.count;
}
window.setLimit=function(group,limit) {
var i=0,t,obj={count:0,max:limit};
while(t=group[i++]) {
t.checks=obj;
if (t.addEventListener) t.addEventListener('click',checkLimit,false);
else if (t.addEvent) t.addEvent('onclick',checkLimit);
else t.onclick=checkLimit;
}
};
})();
setLimit(document.getElementsByTagName('input'),3);
</script></body></html>
It's a pity the code is attractive !
Last edited by 007Julien; 12-01-2011 at 06:18 PM.
Reason: complements
Oh, I see. My function assumes it's passed a list of the checkboxes you want it applied to, so that you can define multiple areas if needed. So here's how you would use it in your test case:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Untitled</title>
<style type="text/css">
</style>
</head>
<body>
<form>
<input type="checkbox"> case à cocher<br>
<input type="checkbox"> case à cocher<br>
<input type="checkbox"> case à cocher<br>
<input type="checkbox"> case à cocher<br>
<input type="checkbox"> case à cocher<br>
<input type="text" value="Another input">
<input type="reset" value="reset">
</form>
<p id="cnt"></p>
<script type="text/javascript">
(function() {
var addLimEvent=window.addEventListener?function(el) {
el.addEventListener('click',checkLimit);
}:function(el) {
el.attachEvent('onclick',checkLimit);
};
function checkLimit() {
if(this.checked) {
if(this.checks.count<this.checks.max) {
this.checks.count++;
} else {
this.checked=false;
alert('You cannot check more than '+this.checks.max+' boxes in this area.');
}
} else {
this.checks.count--;
}
document.getElementById('cnt').innerHTML=this.checks.count;
}
window.setLimit=function(group,limit) {
var i=0,t,obj={count:0,max:limit};
while(t=group[i++]) {
t.checks=obj;
addLimEvent(t);
}
};
})();
var t,i=0,boxes=[],
els=document.getElementsByTagName('input');
while(t=els[i++])
if(t.type=='checkbox')
boxes[boxes.length]=t;
setLimit(boxes,3);
</script>
</body>
</html>
Of course, the reset button still breaks it. So if you wanted to use a reset button or otherwise change the checkboxes without the user interacting with them you would have to take a different approach, like recounting the checkboxes on every click.
I think you misunderstood me about the browsers. My goal is to support the last 2 versions of the 5 major browsers, but your comment made me check again and realize I had failed to do so. That's why I posted a new version that fixed that, though I still didn't include the oldest method because we're going to have to give it up at some point.
well yea it does more than only look for checkbox xD it take 2 things that are accorted to the checkbox and pu them into another place. And yes that is all done, my only question is how to you put a maximum in the checkbox, i think you guys found the solution let me try and i'll say you if it worked probably tonight
Bon je n'ai pas réussis -_-' Je suis désoler je suis simplement dans mes début de java... en fait c'est ma premiere page ... Je vais vous envoyer mon code pour que vous puissiez voir tous le code. Car j'ai esseyer de faire les fonctions checklimits mais sa na pas fonctionner.
ho yea right .. xD mmhm the problem is that when the checkbox number 10 comes up, it just show me a message, i want that, but on the 11th checkbox not on the 10th i tried to do it but nothing worked cause if i changed the if(poschoix!=10), it just never show the meassage box. So mmhm i just didnt make it and im starting in the javascript. So all i know is in there.... The Page is up there, it is separed in 2 parts because i couldnt put more than 10 000 characters.... Its all my code, so if u wanna try something.... you can Sorry for having spoke in french xD And ur not tired hahahah :P probably i was ! :P
Ok, I get it now, I was just having trouble visualizing it before. Well ... there are a lot of problems. You're recounting poschoix every time, so it shouldn't be a global variable and you shouldn't be subtracting from it. You should always act on liste[i], not liste[i-1], because you don't know if the previous box is checked (so unchecking it may do nothing). Also, you should be unchecking the box the user just checked, not the last one in the list.
There are those issues, and a few matters of efficiency. Then there are bad practices, like putting javascript in attributes and in the head. As a rule of thumb, you should use javascript to attach events and put all your code right before the </body> tag if you can - this way the entire page can be displayed before the browser starts worrying about javascript.
Anyway, here's a new page for you. Notice that it takes a few different approaches: I added a global "count" variable, which keeps track of how many boxes are checked. This way, if a user tries to check an 11th box, you can just uncheck that box and do nothing else. I attached the events in a way that preserves "this", so now "valide" can refer to the box being checked as "this". And I took the box clearing outside of the loop, so it isn't executed more than once. But, it's probably easier to just look at the code.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xlmms="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<!-- Penser à un meilleur titre -->
<title>Liste des joueurs de hockey!</title>
<meta http-equiv="Content-type" content = "test/html; charset=iso-8859-1"/>
</head>
<body >
<form id="FrmExam" name="FrmExam">
<table>[...]</table>
</form>
<script language="JavaScript" type="text/javascript">
var count=0;
function valide()
{
var i=0,t,poschoix=0,total=0;
if(this.checked&&count==10) {
this.checked=false;
alert("Vous ne pouvez pas dépassé 10 joueurs, veuillez en désélectionner un pour en sélectionner un autre.");
} else {
count+=this.checked?1:-1;
for(i=0;i<document.FrmExam.liste.length;i++) {
if(document.FrmExam.liste[i].checked) {
document.FrmExam.listechoix[poschoix].value=document.FrmExam.listenom[i].value;
document.FrmExam.numchoix[poschoix].value =document.FrmExam.listenum[i].value;
poschoix++;
total+=+document.FrmExam.listenum[i].value;
}
}
if(poschoix<10) {
document.FrmExam.listechoix[poschoix].value="";
document.FrmExam.numchoix[poschoix].value ="";
}
document.FrmExam.Nbpoint.value=total;
}
}
var t,i=0,
els=document.getElementsByName('liste');
while(t=els[i++])
t.onclick=valide;
</script>
</body>
</html>
Reply With Quote
Please note that the javascript AND HTML have been redone/cleaned up.
Bookmarks