Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Detect if form is empty

    I have a form with a varying number of <input> boxes. Each input box has a different name:

    Code:
    <form action="next_step.asp" method="post">
    	input 1 <input type="text" size="1" name="692-448" value=""><br />
    	input 2 <input type="text" size="1" name="782-148" value=""><br />
    	input 3 <input type="text" size="1" name="242-467" value=""><br />
    	input 4 <input type="text" size="1" name="102-993" value=""><br />
    	<input type="submit" value="continue">
    </form>
    I want an alert box to show only if nothing has been entered into any of the input boxes (i.e. it is completely blanck).

    If a value has been entered into any of the input boxes the form should process as normal.

    Sorry if this seems very easy, but I've only just started to learn js!

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Do you mean a validator for empty fields?:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="txt/javascript">
    <script type="text/javascript">
    var req=['username','address']//the required fields
    
    function valid(f){
    var i=0, t
    while(t=f[req[i++]]){
    	if(t.value==''){
    		alert('Please complete all the required fields!')
    		t.focus();return false
    	}
    }
    }
    </script>
    </head>
    <body>
    <form id="myform" action="" onsubmit="return valid(this)">
    Name<input type="text" name="username"> - required
    <br>
    Address<input type="text" name="address"> - required
    <br>
    Age<input type="text" name="name">
    <br>
    <br>
    <input type="submit" name="sub" value="Submit">
    </form>
    </body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, sort of. Sorry I should have explained further: The form is an order form containg a list a products.

    It's dynamically generated so the number of input boxes on the page is not a set number.

    The only requirement is for at least 1 of the input boxes to be filled in. All the others can remain empty as long as there is an entry in at least one.

    Hope this helps!

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="txt/javascript">
    <script type="text/javascript">
    function valid(f){
    var i=0, q=true, t
    while(t=f.elements[i++]){
    t.type=='text'&&t.value.length>0?q=false:null
    }
    if(q){
    alert('Please, complete at least one text field!');
    return false
    }
    }
    </script>
    </head>
    <body>
    <form action="next_step.asp" method="post" onsubmit="return valid(this)">
    	input 1 <input type="text" size="1" name="692-448" value=""><br />
    	input 2 <input type="text" size="1" name="782-148" value=""><br />
    	input 3 <input type="text" size="1" name="242-467" value=""><br />
    	input 4 <input type="text" size="1" name="102-993" value=""><br />
    	<input type="submit" value="continue">
    </form>
    </body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Elecellent, what a fast response! It works perfectly.

    As mentioned I am just beginning to learn js. Would you mind giving a brief explanation of what your code does, as I'd love to have a good understanding of how you made it work!

    Thanks once again for the solution.

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    - to prevent a HTML action (click, submit) javascript uses a return false method, thus to validadte I have used onsubmit="return valid(this)". If the condition falied, the return value is false, thus the submit action is stopped.

    -the argument this passes the form object to the function where it is used as f variable

    - f.elements = all the forms controls(elements)

    - while(t=f.elements[i++]){ = circle through all the form's controls
    while() loop is useful when you don't know or you don't care about the length of the collection(array). The way I have coded, the condition checks the possibility of an asignment. When there are no elements to be asigned, the while() stops,as the result of the try is false.

    - t.type=='text'&&t.value.length>0?q=false:null

    is a ternary operator, it is the shortcut for the equivalent:

    if(t.type=='text'&&t.value.length>0){
    q=false;
    }
    else{
    null;//do nothing
    }

    - if(q) is same as if(q==true) because if() verifys the Boolean value
    Last edited by Kor; 11-03-2006 at 08:13 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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