Two Values Enter, One Value Leaves
        Posted  
        
            by Bunch
        on Geeks with Blogs
        
        See other posts from Geeks with Blogs
        
            or by Bunch
        
        
        
        Published on Wed, 22 Dec 2010 18:47:54 GMT
        Indexed on 
            2010/12/22
            19:55 UTC
        
        
        Read the original article
        Hit count: 252
        
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();
    }
}
© Geeks with Blogs or respective owner