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

Discussion in 'Web Design & Coding' started by Glaanieboy, Jun 7, 2004.

  1. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    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!
     
  2. j79zlr

    j79zlr Glaanies script monkey Political User

    Messages:
    2,725
    Location:
    Chicago
    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
     
  3. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    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 :(
     
  4. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
  5. j79zlr

    j79zlr Glaanies script monkey Political User

    Messages:
    2,725
    Location:
    Chicago
    php error on the page, can't view it
     
  6. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    fixed. Sorry.
     
  7. Khayman

    Khayman I'm sorry Hal... Political User Folding Team

    Messages:
    5,518
    Location:
    England
    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
     
  8. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    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.
     
  9. j79zlr

    j79zlr Glaanies script monkey Political User

    Messages:
    2,725
    Location:
    Chicago
    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
     
  10. j79zlr

    j79zlr Glaanies script monkey Political User

    Messages:
    2,725
    Location:
    Chicago
    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>
     
  11. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    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.
     
  12. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    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>
     
  13. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    *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
     
  14. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    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