...

View Full Version : Detect if form is empty



JoeAD
11-03-2006, 11:48 AM
I have a form with a varying number of <input> boxes. Each input box has a different name:


<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!

Kor
11-03-2006, 12:03 PM
Do you mean a validator for empty fields?:


<!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>

JoeAD
11-03-2006, 12:11 PM
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!

Kor
11-03-2006, 12:21 PM
<!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>

JoeAD
11-03-2006, 12:38 PM
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.

Kor
11-03-2006, 01:30 PM
- 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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum