Show alert() if no checkbox is selected

2k Views Asked by At

After click the button "Delete", How to display an alert if none of checkbox is selected. My html form

<form name="Delete" method="post" action="DeleteAdministrator">
                <table width="800px" cellpadding="5" style="color:black; border-top:1px solid #ccc;" border="0">
                </table>
                    <div id="container">
                    <div id="demo_jui">
                    <table id="adminList" class="display" cellpadding="0" cellspacing="0" border="0" style="font-size:12px;" >
                    <thead id="headed">
                    <tr>
                        <th  align="center" title="Select">Select</th>
                        <th align="center" title="Email Address">Email Address</th> 
                        </tr>
                    </thead>
                    <tbody></tbody>
                    </table>
                    </div>
                    </div>
                    <table id="footed">
                        <tr>
                            <td colspan="2">
                                <a href="#"><img src="images/Delete.png" style="border:none;" onClick="javascript:Go()"
                                onmouseover="this.src='images/Delete_Hover.png'" onmouseout="this.src='images/Delete.png'"/></a>
                                &nbsp;&nbsp;&nbsp;
                                <a href="#"><img src="images/Reset.png" style="border:none;" onClick="javascript:clearForm()"
                                onmouseover="this.src='images/Reset_Hover.png'" onmouseout="this.src='images/Reset.png'"/></a>
                            </td>
                        </tr>
                    </table>
                </form>
</body>
</html>

The checkbox value will be retrieved in table. When I test it, When checkbox is select or non-select, it still alert "Please select to delete admin"

In function Go(), is the way validate document.Delete.delAdlist[i].checked correct? Thank you

<script language="JavaScript">                      
    var running = 0;
    function Go() {
        var f = document.forms[0];
        for (i = 0; i < document.Delete.delAdlist.length) {
            if (!document.Delete.delAdlist[i].checked) {
                alert("Please select to delete admin.");
                return false;
            }
            else {
                f.submit();
                return true;
            }
        }  
        f.submit();
        running++;
    }                               
</script>
3

There are 3 best solutions below

2
MrCode On BEST ANSWER

It would be more logical to look for checked items, and when the first one is found: submit the form and quit. If none are found checked then the alert is shown. You haven't shown the checkbox HTML so I'm assuming you have a checkbox array named delAdlist[].

Plain Javascript Solution

function Go() {
    var f = document.forms["Delete"];

    for (i = 0; i < f.elements["delAdlist[]"].length; i++) {
       if (f.elements["delAdlist[]"][i].checked) {
            f.submit();
            return true;
        }
    }  

    alert("Please select at least one to delete");
}

jQuery Solution

function Go() {
    if($('form[name=Delete] input[name=delAdlist\\[\\]]:checked').length > 0)
    {
        $('form[name=Delete]').submit();
    }
    else
    {
        alert("Please select at least one to delete");
    }
}

Note: the above code will work if your checkboxes are an array. If your checkboxes are not an array and are all named delAdlist (without brackets) then remove [] from the first solution, and change the selector in the second solution to form[name=Delete] input[name=delAdlist]:checked

0
vusan On

You should check in this format

var notChecked=0;
for (i = 0; i < document.Delete.delAdlist.length) 
                {
                    if(!document.Delete.delAdlist[i].checked)
                         notChecked=1;

                }  

if(notChecked==1) {
      alert("Please select to delete admin.");
      return false;
}
else {
     f.submit();
}
0
yednamus On
<script language="JavaScript">                      
    var running = 0;
    function Go() {
    var f = document.forms[0];
   if( $("input[type='checkbox']:checked").length < 1)
        alert("Please select to delete admin.");
   else
     f.submit();
}