This is a fairly easy way to compare values for two different controls. In this example a user needs to enter in a street address and zip code OR pick a county. After that the application will display location(s) based on the
value. The application only wants a specific street/zip combination or a county, not both. This code shows how to check for that on an ASP.Net page using some JavaScript.
The control code:
<table>
<tr>
<td>
<label style="color: Red;">Required Fields</label>
</td>
<td style="width: 300px;">
<label style="color: Red; font-weight: bold;" id="reqAlert" ></label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="Street Address"></asp:Label>
</td>
<td style="width: 200px;">
<input id="Street" type="text" style="width: 200px;" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label5" runat="server" Text="Zip Code"></asp:Label>
</td>
<td style="width: 200px;">
<input id="Zip" type="text" style="width: 200px;"/>
</td>
</tr>
<tr>
<td>
<label style="color: Red; font-size: large;">-- OR --</label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="County"></asp:Label>
</td>
<td style="width: 200px;">
<asp:DropDownList ID="ddlCounty" runat="server">
<asp:ListItem Value="0" Text="" />
<asp:ListItem Value="1" Text="County A" />
<asp:ListItem Value="2" Text="County B" />
<asp:ListItem Value="3" Text="County C" />
</asp:DropDownList>
</td>
</tr>
</table>
<input id="btnMapSearch" type="button" value="Search" onclick="requiredVal()" class="actionButton" />
The onclick for the button runs the requiredVal javascript function. That is where the checks take place. If only one item (street/zip or county) has been entered the application will carry on with it’s locateAddr function; otherwise it will show an error message in the label reqAlert.
The javascript:
function requiredVal() {
var street = document.getElementById("Street").value;
var zip = document.getElementById("Zip").value;
var countyDdl = document.getElementById("ctl00_Content_ddlCounty");
var county = countyDdl.options[countyDdl.selectedIndex].text;
var reqAlert = document.getElementById("reqAlert");
reqAlert.innerHTML = ''; //clears out any previous messages
if (street != '' || zip != '') {
if (county != '') {
reqAlert.innerHTML = 'Please select only one required option'; //values for both were entered
}
else {
locateAddr();
}
}
else if (street == '' && zip == '' && county == '') {
reqAlert.innerHTML = 'Please select a required option'; //no values entered
}
else {
locateAddr();
}
}
Technorati Tags: ASP.Net,JavaScript
