[javascript] How to check the value of a checkbox?

Glaanieboy

OSNN Veteran Addict
Joined
6 Mar 2002
Messages
2,628
Code:
<script type="text/javascript">
function checkForm(){
  if (document.bestelformulier.ingredient[3].value == '1'){
    alert('U dient wel een keus te maken!');
  }else{
    document.bestelformulier.submit.disabled = true;
    return true;
  }
}
</script>
Stel zelf een pizza samen<br>
<form action="zelf.php?action=zelf" method="POST" onSubmit="javascript:checkForm();" name="bestelformulier">
<table>
<tr><td><input type="checkbox" name="ingredient[3]" value="1"></td><td>ui</td><td>&euro; 0.70</td></tr>
<tr><td><input type="checkbox" name="ingredient[2]" value="1"></td><td>tomaat</td><td>&euro; 0.60</td></tr>
<tr><td><input type="checkbox" name="ingredient[1]" value="1"></td><td>Kaas</td><td>&euro; 0.50</td></tr>

<tr><td><input type="checkbox" name="ingredient[4]" value="1"></td><td>champions</td><td>&euro; 0.80</td></tr>
</table>
Opmerkingen bij bestelling:<br>
<textarea rows="15" cols="40" name="opmerking"></textarea>
<input type="submit" value="OK" name="submit">
</form>

Have a look at this code. This code should do two things:
  • First check if at least one checkbox is checked.
  • Then set the OK button to disabled, so users can't click it again

First point: How do I do that? As a test, I have set it up in a way, so that it checks the value of ingredient[3], if checked, warning, if not, continue. But it doesn't do that, why? And how to set it up? That brings me to the second point, how to check if at least one checkbox is checked?

Third point: The grey-out thingy worked perfect when it was in the onSubmit="" quotes, but now that I have put it in a form, it doesn't work.


Help me!
 
hmm, to check if something is checked, untested, but you get the idea

Code:
var checked = 0;
for (i=1; i=<4; i++) {
  if (document.bestelformulier.ingredient[i].checked == true) {
    checked += 1;
  }
if (checked == 0) {
  alert('You have not checked anything!');
}

not sure how to disable the button from memory here, I'll look for it
 
Created this (You forgot a } there :p):
Code:
function checkForm(){

  var checked = 0;
  for (i=1; i=<4; i++) {
    if (document.bestelformulier.ingredient[i].checked == true) {
      alert('bla');
      checked += 1;
    }
  }
  if (checked == 0) {
    alert('You have not checked anything!');
    return false;
  }else{
    document.bestelformulier.submit.disabled = true;
    return true;
  }
}
and for onSubmit:
Code:
onSubmit="javascript:return checkForm();"

But it doesn't work :(
 
php error on the page, can't view it
 
I'm not sure if anything else doesn't work but i did this *edit changed*
Code:
function checkForm(){


  var check = 0;
  if(document.bestelformulier.ingredient==null)
	  {
		check =0;
	}
	else
	{	
		for (i=0; i<4; i++)
		{
			if (document.bestelformulier.elements[i].checked) 
			{
			//alert('bla');
			check += 1;
			}
		}
	}
	
	
  if (check == 0) {
    document.bestelformulier.submit.disabled = true;
    alert('You have not checked anything!');
    return false;
  }else{
    document.bestelformulier.submit.disabled = true;
    return false;
  }
}

hope its what you want
 
I don't have the time to test it out, I have found a PHP workaround for the moment for this (I was getting foreach() errors each time there wasn't made a selection), but I thought a javascript generated error would be nice too.
 
Glaanie, could you post the full phps for me, I found the javascript error, you cannot define the array in the form, just use multiples of the same variable:

<tr><td><input type="checkbox" name="ingredient" value="1"></td><td>ui</td><td>&euro; 0.70</td></tr>
<tr><td><input type="checkbox" name="ingredient" value="1"></td><td>tomaat</td><td>&euro; 0.60</td></tr>
<tr><td><input type="checkbox" name="ingredient" value="1"></td><td>Kaas</td><td>&euro; 0.50</td></tr>
<tr><td><input type="checkbox" name="ingredient" value="1"></td><td>champions</td><td>&euro; 0.80</td></tr>

Then the first ingredient is ingredient[0], second one is ingredient[1], etc. I'll write a similar total script in js like what the php code is doing. brb
 
OK, here goes, the only way I could get javascript to write the totals et al was in a new window. You seem to have that part down in PHP though, here ya go. The disabling of the submit button is working as well. http://j79zlr.homeunix.com/misc/glaanie.php

Code:
<script type="text/javascript">
<!--

function checkForm(){

  var check = 0;
  for (i=0; i<4; i++) {
    if (document.bestelformulier.ingredient[i].checked == true) {
      check += 1;
    }
  }
  if (check == 0) {
    document.bestelformulier.submit.disabled = false;
    alert('You have not checked anything!');
    return false;
  }
  else {
    document.bestelformulier.submit.disabled = true;
    var ttlwin = window.open("","","width=350,height=400,toolbars=no,status=no,scrollbars=yes,resizable=yes");
    var total = 0;
    //total script, including in else loop so it doesn't total without checked items
    if (document.bestelformulier.ingredient[0].checked == true) {
      ttlwin.document.writeln('ui voor ' + document.bestelformulier.ingredient[0].value + '<br \/>');
      total += 0.70;
    }
    if (document.bestelformulier.ingredient[1].checked == true) {
      ttlwin.document.writeln('tomaat voor ' + document.bestelformulier.ingredient[1].value + '<br \/>');
      total += 0.60;
    }
    if (document.bestelformulier.ingredient[2].checked == true) {
      ttlwin.document.writeln('Kaas voor ' + document.bestelformulier.ingredient[2].value + '<br \/>');
      total += 0.50;
    }
    if (document.bestelformulier.ingredient[3].checked == true) {
      ttlwin.document.writeln('champions voor ' + document.bestelformulier.ingredient[3].value + '<br \/>');
      total += 0.80;
    }
    ttlwin.document.writeln('Totaal: ' + total + '0 <br \/>');
    if (document.bestelformulier.opmerking.value != "") {
      ttlwin.document.writeln('Als opmerking had u: ' + document.bestelformulier.opmerking.value + '<br \/>');
    }
    else {
      ttlwin.document.writeln('U had geen opmerking bij de bestelling');
    }
    ttlwin.document.writeln('<hr \/>');
    ttlwin.document.close();
    return false;
  }
}

-->
</script>



Stel zelf een pizza samen<br>
<form action="" method="post" onsubmit="javascript:return checkForm(this);" name="bestelformulier">
<table>
<tr><td><input type="checkbox" name="ingredient" value="0.70"></td><td>ui</td><td>&euro; 0.70</td></tr>
<tr><td><input type="checkbox" name="ingredient" value="0.60"></td><td>tomaat</td><td>&euro; 0.60</td></tr>
<tr><td><input type="checkbox" name="ingredient" value="0.50"></td><td>Kaas</td><td>&euro; 0.50</td></tr>
<tr><td><input type="checkbox" name="ingredient" value="0.80"></td><td>champions</td><td>&euro; 0.80</td></tr>
</table>
Opmerkingen bij bestelling:<br>
<textarea rows="15" cols="40" name="opmerking"></textarea>
<input type="submit" name="submit" value="OK">
</form>
 
Tadaaaa! This works :D :
Code:
<html>
 <head>
  <title>Test Javascript with check for checkboxes</title>
 </head>
 <script type="text/javascript">
  function checkBoxes(){
   listlength = document.listIngredient.length;
   var counter = 0;
   for(x=0;x<listlength;x++){
     if ((document.listIngredient.elements[x].checked == true) && (document.listIngredient.elements[x].type == 'checkbox')){
       counter++;
     }
   }
   if (counter == 0){
    alertText = 'Error! Please choose at least one Ingredient! (listLength ' + listlength + ')';
    alert(alertText);
    document.listIngredient.submitbutton.disabled = false;
    return false;

   }else{
    alertText = 'Correct! You chose '+ counter +' ingredients! (listLength ' + listlength + ')';
    alert(alertText);
    document.listIngredient.submitbutton.disabled = true;    
    return true;
    
   }
  }
 </script>
 <body>
  <form method="POST" onSubmit="return checkBoxes();" name="listIngredient">
    <input type="checkbox" name="ingredient[1]" value="1">Option 1<br>
    <input type="checkbox" name="ingredient[2]" value="2">Option 2<br>
    <input type="checkbox" name="ingredient[3]" value="3">Option 3<br>
    <input type="checkbox" name="ingredient[4]" value="4">Option 4<br>
   <input type="submit" name="submitbutton" value="Check">
  </form>
 </body>
</html>
It turned out the code checked for the value of the submitbutton as well, so all I had to do is tell it it only has to check checkboxes and tadaaa, it worked.
j79zlr: I haven't tested your code, but I see you hardcoded each checkbox into the javascript, which is not necessary with my code.
 
And it's getting better! This code shows a confirm screen, listing the checkboxes you chose and with a confirm thingy. I only need to find out how to get the value of <label><value></label> with a Javascript. Right now the names are hardcoded in the javascript itself.

edit: When you press cancel, it now unchecks the boxes :D
Code:
<html>
 <head>
  <title>Test Javascript with check for checkboxes</title>
 </head>
 <script type="text/javascript">
  function checkBoxes(){
   listlength = document.listIngredient.length;
   var confirmText = '';
   var counter = 0;
   var option = new Array(5);
   option[0] = 'Option 1';
   option[1] = 'Option 2';
   option[2] = 'Option 3';
   option[3] = 'Option 4';

   for(x=0;x<listlength;x++){
     if ((document.listIngredient.elements[x].checked == true) && (document.listIngredient.elements[x].type == 'checkbox')){
       confirmText += option[x] + '\n';
       counter++;
     }
   }
   if (counter == 0){
    alertText = 'Error! Please choose one Ingredient! (listLength ' + listlength + ')';
    alert(alertText);
    document.listIngredient.submitbutton.disabled = false;
    return false;

   }else{
    alertText = 'Are you sure you want to order the following:\n'+ confirmText +'Click OK to continue or Cancel to cancel.';
    if(confirm(alertText)){
     document.listIngredient.submitbutton.disabled = true;    
     return true;
    }else{
     alert('OK, nothing is ordered....');
     if ((document.listIngredient.elements[x].checked == true) && (document.listIngredient.elements[x].type == 'checkbox')){
      document.listIngredient.elements[x].checked = false;
     }
     return false;
    }
    
   }
  }
 </script>
 <body>
  <form method="POST" onSubmit="return checkBoxes();" name="listIngredient">
    <input type="checkbox" name="ingredient[1]" value="1">Option 1<br>
    <input type="checkbox" name="ingredient[2]" value="2">Option 2<br>
    <input type="checkbox" name="ingredient[3]" value="3">Option 3<br>
    <input type="checkbox" name="ingredient[4]" value="4">Option 4<br>
   <input type="submit" name="submitbutton" value="Check">
  </form>
 </body>
</html>
 
*bump*
problem: I have integrated this script in the rest of the HTML I created, but it's not doing things like expected. Have a look at this code:
Code:
   if (counter == 0){
    alertText = 'Fout! U dient minimaal 1 ingredient te kiezen';
    alert(alertText);
    document.bestelformulier.submitbutton.disabled = false;
    return false;

   }else{
    alertText = 'Weet u zeker dat u het volgende wilt bestellen?:\n'+ confirmText +'Klik OK om door te gaan of Annuleren om te annuleren.';
    if(confirm(alertText)){
     document.bestelformulier.submitbutton.disabled = true;
     return true;
    }else{
     alert('OK, niets is besteld....');
     if ((document.bestelformulier.elements[x].checked == true) && (document.bestelformulier.elements[x].type == 'checkbox')){
      document.bestelformulier.elements[x].checked = false;
     }
     return false;
    }

   }
  }
And the HTML
Code:
<form action="zelf.php?action=zelf" method="POST" onSubmit="return checkBoxes();" name="bestelformulier">

As you can see, in the javascript, I have return false and true. As I understand it, when it returns false, it shouldn't submit the form to {action} using {method} and when it returns true it should. Now, in this code example (a part of bigger code, only this is relevant though), it always submits, no matter if it's false or true. How can I prevent that? I already tried adding document.bestelformulier.submit() before the return true and document.bestelformulier.reset() before the return false, but they don't work. The only way of doing it (this is how I tested this script), I think, is removing the {action} part of the <form>, but then I have a problem submitting it.

HELP! :D
 
Solved it! As you can see, I have these document.bestelformulier.submitbutton.disabled = true; thingies that disables the submit button when pressed, to prevent users to submit an order twice. But when transferring the code from my test-html file to the actual file, I forgot to rename my submit button to 'submitbutton'. Therefore there was a javascript error and it would never reach the return false/true :D
 

Members online

No members online now.

Latest profile posts

Also Hi EP and people. I found this place again while looking through a oooollllllldddd backup. I have filled over 10TB and was looking at my collection of antiques. Any bids on the 500Mhz Win 95 fix?
Any of the SP crew still out there?
Xie wrote on Electronic Punk's profile.
Impressed you have kept this alive this long EP! So many sites have come and gone. :(

Just did some crude math and I apparently joined almost 18yrs ago, how is that possible???
hello peeps... is been some time since i last came here.
Electronic Punk wrote on Sazar's profile.
Rest in peace my friend, been trying to find you and finally did in the worst way imaginable.

Forum statistics

Threads
62,015
Messages
673,494
Members
5,621
Latest member
naeemsafi
Back