HTML how to validate any of checkbox which are in Array before submit

Question

Below is the HTML/PHP code, in which i need to validate any of the checkbox out of 5 before submit the Form.

function checkAddress(checkbox)
{
    if (checkbox.checked)
    {
document.frmUser.action = "edit_user.php";
document.frmUser.submit();
    }

else {alert("checkbox");}
}

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Details Form</title>
<script language="javascript" type="text/javascript">

function checkAddress(checkbox)
{
    if (checkbox.checked)
    {
document.frmUser.action = "edit_user.php";
document.frmUser.submit();
    }

else {alert("checkbox");}
}
</script>      
</head>

<body>

<div class="form-style-1">
<form name="frmUser" method="post" action="">
<?php
i=0;
while(i=5){
?>
<input type="checkbox" name="users[]" value="<?php echo i; ?>" >
<input type="button" name="update" class="button" value="Update" onClick="checkAddress(this);" />
<?php
$i++;}
?>
</form></div></body></html>

Do you mean that you want to test that at least one of the checkboxes is checked, and if not prevent the submission? — nnnnnn
– nnnnnn, Commented Sep 13, 2016 at 7:18
what is this while(i=5)? A condition is never given like that. It sholud be while(i<=5). — Sidharth Gusain
– Sidharth Gusain, Commented Sep 13, 2016 at 7:20
yes , at least one of the checkboxes is checked, and if not prevent the submission? — Prayag
– Prayag, Commented Sep 13, 2016 at 7:20

Sidharth Gusain · Accepted Answer · 2016-09-13 07:39:16Z

1

I think you are trying to do this

function checkAddress(checkbox) {
  if (checkbox.checked) {
    document.frmUser.action = "edit_user.php";
    //document.frmUser.submit();
  } else {
    document.frmUser.action = "#";
    alert("checkbox");
  }
}

<div class="form-style-1">
  <form name="frmUser" method="post" action="">
    <?php $i=0; while($i<=5){ ?>
    <input type="checkbox" name="users[]" onClick="checkAddress(this);" value="<?php echo $i; ?>">

    <?php $i++;} ?>
    <input type="submit" name="update" class="button" value="Update" />
  </form>
</div>

Some errors in your code

you have not used $ while denoting the variable i
you are taking the button inside the while loop so it also repeating with the checkboxes.

answered Sep 13, 2016 at 7:39

Sidharth Gusain

1,5111 gold badge13 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Prayag Over a year ago

below is my update code. it works great !!..Thanks guys for helping me out.

nnnnnn · Accepted Answer · 2016-09-13 07:43:02Z

You are calling onClick="checkAddress(this);" from your button, so this refers to the button and not a checkbox, so then in your function checkbox.checked is testing if the button is checked - which obviously it never will be.

To test whether at least one checkbox is checked you could loop through them testing them in turn, but you can also do it in one step as follows:

if (document.querySelector('form[name="frmUser"] input[name="users[]"]:checked')) {
  // at least one is checked
}

The .querySelector() method returns the first matching element (which is a truthy value for use in an if test), or returns null if no matching elements are found (which is a falsey value for use in an if test).

(If the page has only one form with one group of checkboxes then you could simplify the selector to something like .querySelector(':checked'), but I think it is better to be explicit about which items you're testing.)

In context:

function checkAddress()
{
    if (document.querySelector('form[name="frmUser"] input[name="users[]"]:checked')) {
        alert("Success! (form would be submitted here)");
        //document.frmUser.action = "edit_user.php";
        //document.frmUser.submit();
    } else {
        alert("You must select at least one checkbox");
    }
}

<div class="form-style-1">
<form name="frmUser" method="post" action="">
<input type="checkbox" name="users[]" value="1" >
<input type="checkbox" name="users[]" value="2" >
<input type="checkbox" name="users[]" value="3" >
<input type="checkbox" name="users[]" value="4" >
<input type="checkbox" name="users[]" value="5" >
<input type="button" name="update" class="button" value="Update" onClick="checkAddress();" />
</form>
</div>

Professor Abronsius · Accepted Answer · 2016-09-13 07:42:51Z

There was another problem with the code posted - the variable i wasn't correctly defined ~ it should have been $i

Rather than assigning the function directly to the button you can create an event listener like this.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Details Form</title>
        <script language="javascript" type="text/javascript">
            function validate(e){
                var form=e.target.parentNode;
                var col=form.querySelectorAll('input[type="checkbox"]');
                var checked=[];
                if( col )for( var n in col )if( col[n].nodeType==1 ){
                    if( col[n].checked ) checked.push( col[n].name );
                }
                if( checked.length > 0 ){
                    form.action='edit_user.php';
                    form.submit();
                } else {
                    alert('You MUST tick at least one checkbox');
                }
            }
            function bindEvents(){
                var bttn=document.forms['frmUser'].querySelectorAll('input[type="button"]')[0];
                    bttn.addEventListener( 'click', validate, false );
            }
            document.addEventListener('DOMContentLoaded', bindEvents, false );
        </script>      
    </head>
    <body>
        <div class="form-style-1">
            <form name="frmUser" method="post" action="">
            <?php
                $i=0;
                while( $i <= 5 ){
                    echo "<input type='checkbox' name='users[]' value='{$i}' >";
                    $i++;
                }
                echo "<input type='button' name='update' class='button' value='Update' />";
            ?>
            </form>
        </div>
    </body>
</html>

Prayag · Accepted Answer · 2016-09-13 07:51:29Z

0

<html>
<head>
<script language="javascript" type="text/javascript">
function checkAddress()
{
    if (document.querySelector('form[name="frmUser"] input[type="checkbox"]:checked')) {
        alert("Success! (form would be submitted here)");
        //document.frmUser.action = "edit_user.php";
        //document.frmUser.submit();
    } else {
        alert("You must select at least one checkbox");
    }
}
</script>      
</head>

<body>

<div class="form-style-1">
<form name="frmUser" method="post" action="">
<?php
$i=0;
while($i<=5){
?>
<input type="checkbox" name="users[]" value="<?php echo $i; ?>" >
<input type="button" name="update" class="button" value="Update" onClick="checkAddress(this);" />
<?php
$i++;}
?>
</form></div></body></html>

answered Sep 13, 2016 at 7:51

Prayag

2111 silver badge14 bronze badges

1 Comment

Prayag Over a year ago

here is my Updated Code.

Collectives™ on Stack Overflow

HTML how to validate any of checkbox which are in Array before submit

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related