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: 192

Filed under:

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>
            &nbsp;
        </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: ,

© Geeks with Blogs or respective owner