Check all checkboxes before submit

Question

Well, I have a form where the user can select an item with a checkbox, the user type how many items he wants to send with an input text, but there are some items that requires a serial number that a checkbox holds.

This is my approach:

<script>
      function checkall()
      {
        var ok=true;
        $('input:checkbox[id^="art"]:checked').each(function() {
          var vals = $(this).val();
          //first attempt
          if (typeof document.getElementById(vals+"existencia") === 'undefined') {
            ok=false;
            return false;
            alert("Error message");
          }else
          if (typeof document.getElementById(vals+"-serie")==='undefined') {
            ok=false
            return false;
            alert("Error message 2");
          }

//second attempt
          if (obj.hasOwnProperty(vals+'existencia')) {
            art = document.getElementById(vals+"existencia").value;
            alert(art);
          }else if (obj.hasOwnProperty(vals+'serial')) {
            sert=document.getElementById(vals+"-serie").value;
            alert(sert);
          }
        });


        if(ok)
        {
          document.getElementById("myform").submit();
        }
      }
      </script>

The script is intended to loop all checked checkboxes and if the input is empty stops and alerts the user and the other stage is when he checks an article with serial number, at least 1 have to checked and also alerts the client

The first attempt, I tried, got passed cause those elements are defined and second attempt throws obj is not defined, maybe I missunderstood the codes and answers I searched, can someone help to achieve my goal or explain me what I did wrong, thank you.

UPDATE:

if ($inicio == 0) {
                    echo "<tr bgcolor= '#f4f4f4' >";
                    $inicio = 1;
                  } else {
                    echo "<tr bgcolor= white>";
                    $inicio = 0;
                  }
                  ?>
                  <td style="width: 10%;text-align: center;">
                    <input type="checkbox" name="art[]" id="art" value="<?php echo $articulo; ?>" /></td>
                    <td width="12%" align="center"><?php echo $diferencia_dias ?> d&iacute;as</td>
                    <td width="8%" style="text-align: center;"><?php echo $articulo; ?></td>

                    <td width="45%"><?php echo $descripcion; ?></td>
                    <?php
                    if($numserie>0){
                      $esto = trim($articulo);
                      $bus_serie = mssql_query("execute serial_madness '$esto','$almacen'");
                      echo "<td style='width:10%;text-align:left;'>";
                      while($res_serie = mssql_fetch_array($bus_serie))
                      {
                        echo '<input type="checkbox" id="'.$articulo.'-serie" name="'.$articulo.'-Serie[]" value="'.$res_serie["ARTICULO"].','.$res_serie["NUMSERIE"].'_'.$valor.'  "> '.$res_serie["NUMSERIE"].' <br>';
                      }
                      echo "</td>";
                    }else{
                      ?><td style="width:10%;text-align:center;"><input type="number" style="text-align:center;width:30px; height:30px;" id="<?php echo $articulo_c; ?>existencia" name="<?php echo
                      $articulo_c; ?>existencia" value="<?php echo (int)$existencias; ?>" min="1" max="<?php echo (int)$existencias; ?>"/></td>
                      <?php
                    } ?>

It is quiet obvious that one can not test this code without having markup.. Will you mind sharing that ? — Rayon, May 23 '16 at 15:45
I am quiet sure this question is not related with `php`.. Do share browser rendered/parsed html.. — Rayon, May 23 '16 at 15:56

score 0 · Accepted Answer · edited May 23 '17 at 10:28

0

So, in order to check a checkbox you can just use jquery.

Example: $("#checkboxId").prop('checked', true);

The example above will check the checkbox with id "checkboxId", changing the true to false will uncheck the box;

If you want to check how many or which inputs are checked you can use the .length of the array returned by the jquery selector.

The following will check if all the checkboxes with ids starting with the word "test" are checked:

if($('[id^="test"]:checkbox').length == $('[id^="test"]:checkbox:checked').length) 
{
   // Do stuff here
}

Likewise you can check if nothing is checked if the length is equal to zero.

I prepared a simple example that I think tackles the general issue you are solving here.

https://plnkr.co/edit/2v6x1DXRpAiaKiBFSMz6?p=preview

Notice that when you click 'Submit' in my plunker example all checkboxes will automatically become checked.

If you click the 'Validate' button it will verify that all checkboxes are indeed checked.

You should be able to use my example to create a solution for your specific case.

You may also want to use the .is() jquery function example: $('#' + id).is(":checked")

See the following answer for some similar solutions and explanations: Check if checkbox is checked with jQuery

edited May 23 '17 at 10:28

Community

1
1

answered May 23 '16 at 16:51

njfife

3,555
1
20
31

This helps me with the serial number validation, but I think you give a kick to the right track, thank you! – Neobugu May 23 '16 at 18:34
What else is it that you still don't know how to do? I can try to add it to my answer – njfife May 23 '16 at 18:36
Well in my post I wrote about validate if item checkbox is checked then it need to validate, if it has input text (no serial #) so it checks the input and if item checkbos has serial number validate atleast 1 serial # checkbox is checked – Neobugu May 23 '16 at 18:37
1

That is implementation specific, I can try to add that but I think you are plenty capable of using an if statement with a jquery selector now that you have a way to detect what is and isn't checked. – njfife May 23 '16 at 18:47
1

You are right, thats why i wrote you give me a kick to the right track ;) – Neobugu May 23 '16 at 18:47

Check all checkboxes before submit

1 Answers1