Results 1 to 8 of 8

Thread: checkbox validation and confirm alert

  1. #1
    Join Date
    Jun 2008
    Posts
    121
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default checkbox validation and confirm alert

    hi all

    i have one form inside other form in which i have delete button and i want to apply validation on it.

    This is form code
    Code:
    <form id="form1" name="form1" method="get" action="" onsubmit='return cbox();'>
    <?php
    echo "<form name='del_sel' method='post'>"; 
    echo "<td valign='top' colspan='9'><input name='submit' type='submit' value='Delete Selected' onClick=\"return confirm('Are you 100% totally certain that you want to DELETE this ?')\"/>";
    echo "<input type='hidden' name='checkbox[]' value=".$row2['order_id']." />";
    echo "</td>";
    echo "</form>";
    ?>
    </form>

    this is validation function which checks whether one checkbox is selected or not.
    Code:
    function cbox()
    {
    var chks = document.getElementsByName('checkbox[]');
    var hasChecked = false;
    for (var i = 0; i < chks.length; i++)
    {
    if (chks[i].checked)
    {
    hasChecked = true;
    break;
    }
    }
    if (hasChecked == false)
    {
    alert("Please select at least one.");
    return false;
    }
    return true;
    }
    now the problem is that cbox() function and confirm function both appears one after another. i want that if cbox() returns true means if any one of the chekbox is selected then only the confirm alert should appear otherwise it should not appear.


    vineet

  2. #2
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    You're using two functions to do something that one can do by itself. You're also using HTML event attributes, which are poor practice. The below code separates layout and operation in accordance with current best-practices (or at least the strain I agree with - all of them do it but in different ways and to different extents).
    Code:
    <form id="form1" name="form1" method="get" action="">
    <?php
    echo "<form name='del_sel' method='post'>"; 
    echo "<td valign='top' colspan='9'><input name='submit' type='submit' value='Delete Selected'/>";
    echo "<input type='hidden' name='checkbox[]' value=".$row2['order_id']." />";
    echo "</td>";
    echo "</form>";
    ?>
    </form>
    Code:
    window.onload = function(){
        document.forms.namedItem('form1').registerEventListener('submit', cbox, false);
    };
    function cbox(event)
    {
    event = event || window.event;
    var success = true;
    var chks = document.getElementsByName('checkbox[]');
    var hasChecked = false;
    for (var i = 0; i < chks.length; i++)
    {
    if (chks[i].checked)
    {
    hasChecked = true;
    break;
    }
    }
    if (hasChecked == false)
    {
    alert("Please select at least one.");
    success = false;
    }
    success = success && confirm('Are you 100% totally certain that you want to DELETE this ?'))
    if(!success)
    event.preventDefault();
    return success;
    }
    HTMLElement.prototype.registerEventListener = function(type, listener, useCapture){
    	if(this.addEventListener)
    		this.addEventListener(type, listener, useCapture);
    	else if(this.attachEvent)
    		this.attachEvent('on' + type, listener);
    	else
    		this['on' + type] = listener;
    };
    Last edited by Jesdisciple; 06-22-2009 at 04:55 AM.
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.

  3. #3
    Join Date
    Jun 2008
    Posts
    121
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    hi Jesdisciple

    i inserted the script in the <head></head> and got error and it doesnt alert anything

    Code:
    line : 41
    Char: 92
    Error: Expected';'
    Code:0
    From where do we count line 41. From <doc type> or from <script>.

    The is <head> part
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="includes/styles2.css" />
    <script language="javascript">
    function chose()
    {
    if(document.form1.choice.value=='0')
    {
    alert("choose your option");
    return false;
    }
    }
    window.onload = function(){
        document.forms.namedItem('form1').registerEventListener('submit', cbox, false);
    };
    function cbox(event)
    {
    event = event || window.event;
    var success = true;
    var chks = document.getElementsByName('checkbox[]');
    var hasChecked = false;
    for (var i = 0; i < chks.length; i++)
    {
    if (chks[i].checked)
    {
    hasChecked = true;
    break;
    }
    }
    if (hasChecked == false)
    {
    alert("Please select at least one.");
    success = false;
    }
    success = success && confirm('Are you 100% totally certain that you want to DELETE this ?'))
    if(!success)
    event.preventDefault();
    return success;
    }
    HTMLElement.prototype.registerEventListener = function(type, listener, useCapture){
    	if(this.addEventListener)
    		this.addEventListener(type, listener, useCapture);
    	else if(this.attachEvent)
    		this.attachEvent('on' + type, listener);
    	else
    		this['on' + type] = listener;
    };
    </script>
    </head>
    vineet

  4. #4
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    On the line with the call to confirm(), replace the last paren with a semicolon. (The semicolon isn't necessary, but I guess I just like consistency between languages.)
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.

  5. #5
    Join Date
    Jun 2008
    Posts
    121
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Jesdisciple View Post
    On the line with the call to confirm(), replace the last paren with a semicolon. (The semicolon isn't necessary, but I guess I just like consistency between languages.)
    hi Jesdisciple

    with "Last Paren" If u mean the last bracket then i replaced the last bracket with semi colon
    Code:
    success = success && confirm('Are you 100% totally certain that you want to DELETE this ?');
    and received another error
    Code:
    Line:20
    char:5
    object doesnt support this property or method
    vineet
    Last edited by vineet; 06-22-2009 at 06:21 AM. Reason: code

  6. #6
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    I don't get any error, and the indicated line only contains a curly bracket. What browser are you using (Firefox 3.0.5 here) and what triggered the error?
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.

  7. #7
    Join Date
    Jun 2008
    Posts
    121
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Jesdisciple View Post
    I don't get any error, and the indicated line only contains a curly bracket. What browser are you using (Firefox 3.0.5 here) and what triggered the error?
    hi Jes

    i m using IE 7. Try it in IE 7 it wil show error in status bar.

    i just opened the file it showed me this error in the status bar.

    Firefox here also doesnt show any error.

    vineet

  8. #8
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    I'm running Linux, but I'll try to install ies4linux so I can test in IE7.

    In the mean time, when you view the page's source what's on line 20? There should be line numbers somewhere or maybe an option to Edit > Go To Line...
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •