Classic Joke
A man lay sprawled across three entire seats in the posh theatre. When the usher came by and noticed this, he whispered to the man, "Sorry, sir, but you're only allowed one seat." The man groaned but didn't budge. The usher became impatient. "Sir, if you don't get up from there I'm going to have to call the manager." Again, the man just groaned, which infuriated the usher who turned and marched briskly back up the aisle in search of his manager.
In a few moments, both the usher and the manager returned and stood over the man. Together the two of them tried repeatedly to move him, but with no success. Finally, they summoned the police. The cop surveyed the situation briefly then asked, "All right buddy, what's your name?" "Sam," the man moaned. "Where ya from, Sam?" With pain in his voice Sam replied "The balcony."
Basic Form Validation Function
Well lately on the forum people have been asking how to do a quick and simple validation on the form to check if all of the fields are filled in. This just makes sure that everything is filled in.
When the form is submitted, it will execute the function and determine which fields are not filled in. It looks at the field type and determines which parameter to check (length or checked). The form displays an error message and highlights the fields that are left blank. The field with the first error is also scrolled into view. If all fields are filled in it allows the form to be submitted.
If anyone wants anything explained, just asked!
<html>
<head>
<style type="text/css">
.error{background-color:red;}
.normal{}
</style>
<script type="text/javascript">
var errorElem;
var strRadio;
var errorCount;
var alertMessage = " error(s) found!\n\nAll fields must be filled in before submitting the form.";
function ValidateForm(xForm){
errorElem = false;
strRadio = "";
errorCount = 0;
for(i=0;i<xForm.elements.length;i++){
xForm.elements[i].className = "normal";
SubVal(xForm,xForm.elements[i]);
}
if(errorElem){
errorElem.focus();
ScrollToElement(errorElem);
alert(errorCount + alertMessage);
return false;
}
else{
return true;
}
}
function SubVal(xForm,xElem){
switch(xElem.type.toLowerCase()){
case "text":
case "textarea":
if(xElem.value.length==0){
xElem.className = "error";
if(!errorElem) errorElem = xElem;
errorCount++;
}
break;
case "checkbox":
if(!xElem.checked){
xElem.className = "error";
if(!errorElem) errorElem = xElem;
errorCount++;
}
break;
case "select-one":
case "select-multiple":
if(xElem.selectedIndex == -1){
xElem.className = "error";
if(!errorElem) errorElem = xElem;
errorCount++;
}
break;
case "radio":
if(strRadio.indexOf("^tree^") == -1){
if(!RadioCheck(xForm,xElem.name)){
xElem.className = "error";
if(!errorElem) errorElem = xElem;
errorCount++;
}
}
break;
}
}
function RadioCheck(xForm,xElemName){
strRadio += "^" + xElemName + "^";
var radElem = document.forms[xForm.name].elements[xElemName];
for(ix=0;ix<radElem.length;ix++){
if(radElem[ix].checked) return true;
}
return false
}
function ScrollToElement(theElement){
var selectedPosX = 0;
var selectedPosY = 0;
while(theElement != null){
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
window.scrollTo(selectedPosX,selectedPosY);
}
</script>
</head>
<body>
<form name="Form1" onsubmit="return ValidateForm(this)">
<h3>Text Boxes</h3>
<input type="text" name="t1">
<input type="text" name="t2">
<input type="text" name="t3">
<h3>Text Areas</h3>
<textarea name="ta1"></textarea>
<textarea name="ta2"></textarea>
<textarea name="ta3"></textarea>
<h3>Checkboxes</h3>
<input type="checkbox" name="cb1">
<input type="checkbox" name="cb2">
<input type="checkbox" name="cb3">
<h3>Select</h3>
<select name="s1">
<option>Shona</option>
</select>
<select name="s1" size="3" multiple>
<option>Shona</option>
<option>professional</option>
<option>dog walker</option>
</select>
<h3>Radio</h3>
R1
<input type="radio" name="r1" value="1">
<input type="radio" name="r1" value="2">
<input type="radio" name="r1" value="3">
<input type="radio" name="r1" value="4">
<input type="radio" name="r1" value="5">
<br/>
R2
<input type="radio" name="r2" value="1">
<input type="radio" name="r2" value="2">
<input type="radio" name="r2" value="3">
<input type="radio" name="r2" value="4">
<input type="radio" name="r2" value="5">
<br/>
R3
<input type="radio" name="r3" value="1">
<input type="radio" name="r3" value="2">
<input type="radio" name="r3" value="3">
<input type="radio" name="r3" value="4">
<input type="radio" name="r3" value="5">
<br/><br/>
<input type="submit" name="btnSubmit" value="Submit">
</form>
</body>
</html>
Hope that helps!
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages
Bad Bar Joke
A man walks into a bar with a sandwich on his shoulder.
The bartender turns, looks at him and says, ''Sorry sir, we don't serve food here!!''
Basic Calculation Tutorial
A great thing for beginners to do is to make a simple calculation script. It teaches them how to reference form
elements, use basic math functions, and display information to the user. Here is a simple tutorial to do a
calculation between a field and display the result.
In this example, we are going to calculate the tax rate on an item purchased. Basically it is a simple
multiplication problem.
First you need to create a form where the user can enter in a value. We need a textbox and a button to perform
the calculation when clicked. The button needs an onclick event handler added to it and call a function MyCalc()
which we will make in a bit.
<form name="Form1"> $<input type="text" name="textTotal"> <input type="button" name="btnCalc" value="Calculate Tax" onclick="MyCalc()"> </form>Now we need to build a function called MyCalc(). This function gets called when you click the button.
<script type="text/javascript">
function MyCalc(){
}
</script>
You then need to reference the value in the text box, you do this by referencing the form object.
var val1 = document.formName.elementName.value;
After that we need to do our calculation. You need to parseFloat to turn the form element value from a string to
a number. The reason is if you were to an addition, it would join together instead of increasing in value. For
example, two strings added together would equal "2" + "2" = 22 instead of 2 + 2 = 4.
var amt = 1.06 * parseFloat(val1);
The last step is to display a total, for this we will use an alert.
alert("Your total is $" + amt);
Putting it all together it looks like:
<script type="text/javascript">
function MyCalc(){
var val1 = document.formName.elementName.value;
var amt = 1.06 * parseFloat(val1);
alert("Your total is $" + amt);
}
</script>
Hope that helps you understand a basic JavaScript application.Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages