Validation Forms "JavaScript"

Dev Shed Forums Sponsor:

March 15th, 2002, 12:25 AM

Pimmy

Junior Member

Join Date: Mar 2002

Location: Vancouver Island, BC Canada

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

Validation Forms "JavaScript"

Im working with a Javascript validation (form) and trying to get some areas to work, and seem to be having difficulty doing it. What it is that i want to accomplish is this:

I have a drop down list "say called SurfaceArea" and it drops down a list of items, and at the bottom it has a selection "other". This is a mandatory item.

Under the drop down list there is a text box named "OtherSurfaceArea". But its only mandatory if "other" is selected in the above list.

Does anyone know the code for something like this in javascript. Here is what I have now:

}

// Check for Surface Area
if (document.frmEnquiry.SurfaceArea.value == "" || document.frmEnquiry.SurfaceArea.value == "Other")
{
errorMsg += "\n\tEnter Info into Other Area \t ";

}

// Check for Other Surface Area
if (document.frmEnquiry.OtherSurfaceArea.value == "") {
errorMsg == "";

}

Thank you,
Pimmy

March 15th, 2002, 01:12 AM

zkent

Joonior Meember

Join Date: Mar 2001

Location: Barre, VT, USA, Earth

Posts: 11

Time spent in forums: < 1 sec
Reputation Power: 0

Your approach seems fine but I have done it successfully this way. The prob may be that .value does not always work cross-browser with select elements (drop-down lists). You can extract the value into a variable first. Try this method.

------------- code ---------------
// create a var (select) to hold the name of the select element
// and then create another var (value) to hold the currently
// selected option of the element

var select = document.frmEnquiry.SurfaceArea;
var value = select.options[select.selectedIndex].value;

// Check the value for "Other" and test that the selectedIndex
// element is not 0 (indicates nothing was selected)

if (value == "Other" or select.selectedIndex == 0 ) {
errorMsg += "\n\tEnter Info into Other Area \t ";
}

------------- end code ------------

Hope this helps,
Zach

March 15th, 2002, 12:45 PM

Pimmy

Junior Member

Join Date: Mar 2002

Location: Vancouver Island, BC Canada

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

I will give that a shot, i am integrating this script with an .asp file (calls one) on an Intranet...and they only use IE

Thanks, will let you know if i have success or not
Pimmy

March 15th, 2002, 06:16 PM

mrrichardfeder

Contributing User

Join Date: Nov 2001

Posts: 765

Time spent in forums: 3 m 45 sec
Reputation Power: 12

Code:

<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="JavaScript">

function showHideOther(sel_ref,other_id) {
var bWhich = (sel_ref[sel_ref.selectedIndex].value == 'other');
var otherEl = document.getElementById(other_id);
if (!otherEl) return;
otherEl.style.visibility = (bWhich) ? 'visible' : 'hidden';
(bWhich) ? otherEl.all(0).focus() : otherEl.all(0).value = '';
}

function checkSurfaceAreaInput(f) {
var SA = f.SurfaceArea[f.SurfaceArea.selectedIndex].value;
if (!SA) {
alert('Please choose a "Surface Area" option.');
f.SurfaceArea.focus();
return false;
} else if (SA == 'other' && !f.OtherSurfaceArea.value) {
alert('Please enter a specific "Surface Area" in square feet.');
f.OtherSurfaceArea.select();
return false;
}
return true;
}

function checkform(f) {
if (!f) return;
if (!checkSurfaceAreaInput(f)) return false;
return true;
}

</script>
</head>
<body>
<form name="frmEnquiry" onsubmit="return checkform(this)">
<hr>
<b>Choose Surface Area (square feet): </b>
<select name="SurfaceArea" onchange="showHideOther(this,'otherInput')">
<option selected="selected">-- Select One --</option>
<option value="100">-- 100</option>
<option value="200">-- 200</option>
<option value="300">-- 300</option>
<option value="other">Other Surface Area</option>
</select>
<span id="otherInput" style="position:relative;padding-right:12px;visibility:hidden;">
<input name="OtherSurfaceArea" type="text" size="12">
</span>&nbsp;
<input type="submit" value="DONE">
<hr>
</form>
</body>
</html>

God bless intranets. I've had success using the above. You can stack additional routine calls in the checkform() function, using the same approach.

Validation Forms "JavaScript"

Developer Shed Advertisers and Affiliates