Pass an ASP.Net control into JavaScript function

Question

I've written a javascript function which I want to take in a textbox, dropdownlist and a integer. Within the function I need to check the length of the text string and the value of the DDL. The function is below:

function CheckSearch(name, code, iMinSize) {
if (name.value.length < iMinSize && code.value === '') {
    alert('You must enter ' + iMinSize + ' letters or more when searching.');
    name.focus();
    return false;
}
else {
    return true;
}

}

I think the function is OK but I can't seem to call it from a Button control in ASP.NET.

Here is my button tag:

<asp:Button ID="buttonSearch" runat="server" Text="Search" OnClick="buttonSearch_Click"
                OnClientClick="javascript:return CheckSearch('textBoxSearch','comboCodes', 3);" />

When I click the button I receive an Object Expected error.

The code break on the following line:

<input type="submit" name="ctl00$contentBody$buttonSearch" value="Search" onclick="return CheckSearch(document.getElementById(&#39;textBoxSearch&#39;),document.getElementById(&#39;comboCodes&#39;), 3);" id="contentBody_buttonSearch" /> 

The error message is: Microsoft JScript runtime error: Object expected

Please help.

I'm using ASP.NET4.0

Thanks

Answer 1

At the bottom of your page, I would add references to your various client IDs. For example:

<script type="text/javascript">
  var buttonSearch  = document.getElementById('<%= buttonSearch.ClientID %>');
  var textBoxSearch = document.getElementById('<%= textBoxSearch.ClientID %>');
  var comboCodes    = document.getElementById('<%= comboCodes.ClientID %>');
</script>

You could then refer to those DOM objects in your client click:

<asp:Button ID="buttonSearch" runat="server" Text="Search" OnClick="buttonSearch_Click"
                OnClientClick="return CheckSearch(textBoxSearch, comboCodes, 3);" />

Now your handler doesn't have to change, since you passed in the correct DOM objects:

if (name.value.length < iMinSize && code.value === '') {
    alert('You must enter ' + iMinSize + ' letters or more when searching.');
    name.focus();
    return false;
}

Another way you could do it is to set the ClientIDMode to static on each control:

<asp:TextBox ID="textBoxSearch" runat="server" ClientIDMode="Static" />

Now, you can access the value of this text box with:

document.getElementById('textBoxSearch').value;

Answer 2

The reason for this error is that you are not passing the objects rather you are passing the IDs of the objects. Solution could be.

OnClientClick="return CheckSearch('<%= textBoxSearch %>','<%= comboCodes %>', 3);

replace it with your OnClientClick and check if it works or not.

Answer 3

You might want to change your CheckSearch function to something like this:

function CheckSearch(name, code, iMinSize) {
    var textBox, comboBox; // use these variables
    textBox = document.getElementById(name);
    comboBox = document.getElementById(code);
    if (textBox.value.length < iMinSize && comboBox.value === '') {
        alert('You must enter ' + iMinSize + ' letters or more when searching.');
        textBox.focus();
       return false;
    }
    else {
        return true;
    }
}

You're currently passing just a string on your markup and your function is expecting an object.

Edit : Alternatively, you can leave the function as it is and change your markup like so:

Edit 2 : Changed the string on document.getElementById

<asp:Button ID="buttonSearch" runat="server" Text="Search" OnClick="buttonSearch_Click"
                OnClientClick="return CheckSearch(document.getElementById('<%= textBoxSearch.ClientID %>'),document.getElementById('<%= comboCodes.ClientID %>'), 3);" />

This way you're passing a reference to the combo and textbox and not just the id string.

Hopefully the last edit :

I didn't look too much into it, but when I ran that code, I noticed that just like yours, some chars are not being escaped, so it was rendering it like this:

document.getElementById('textBoxSearch')

(this can be dealt with, but I don't have the time to do it right now)

so the function would receive null objects since it couldn't find it through that parameter, so I ended up doing this:

<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="textBoxSearch" runat="server" />
            <asp:DropDownList ID="comboCodes" runat="server" >
            <asp:ListItem Text=""></asp:ListItem>
            <asp:ListItem Value="1" Text="One"></asp:ListItem>
            <asp:ListItem Value="2" Text="Two"></asp:ListItem>
            <asp:ListItem Value="3" Text="Drei"></asp:ListItem>
            <asp:ListItem Value="4" Text="Four"></asp:ListItem>
            </asp:DropDownList>

            <asp:Button ID="buttonSearch" runat="server" Text="Search" OnClick="buttonSearch_Click"
                OnClientClick="return CheckSearch(3);" />
        </div>
    </form>
    <script type="text/javascript">

        function CheckSearch(iMinSize) {
            var textBox, comboBox; 
            textBox = document.getElementById('<%= textBoxSearch.ClientID %>');
            comboBox = document.getElementById('<%= comboCodes.ClientID %>');
            if (textBox.value.length < iMinSize && comboBox.value === '') {
                alert('You must enter ' + iMinSize + ' letters or more when searching.');
                textBox.focus();
                return false;
            }
            else {
                return true;
            }
        }
    </script>
</body>

Note that this is not ideal as your function will not be generic enough to handle other controls since I'm getting the reference of the control in the function itself. That being said, I would recommend doing something along the lines of Mike Christensen example (+1) as you'd have the reference to the controls when calling and wouldn't have issues with char escaping, but I haven't tested his code tho.

Hope this helps

Answer 4

The problem is that you are sending harcoded text: 'textBoxSearch','comboCodes' . You should be sending the ClientId:

OnClientClick="javascript:return CheckSearch('<%= textBoxSearch.ClientId %>','<%= comboCodes.ClientId %>', 3);"