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

OnClientClick is not expecting a URL. Remove the javascript:. — vcsjones
– vcsjones, Commented May 1, 2012 at 15:37
Really, you should improve your acceptances... did any of this answers helped you? — Alejandro B.
– Alejandro B., Commented May 4, 2012 at 11:15

Mike Christensen · Accepted Answer · 2012-05-01 16:05:24Z

2

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;

edited May 1, 2012 at 16:05

answered May 1, 2012 at 15:43

Mike Christensen

91.8k52 gold badges223 silver badges349 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MilkyWayJoe Over a year ago

like I said in my answer, I haven't tested this, but this seems to be the best approach

AlexK Over a year ago

ClientIDMode="Static" was my solution, thanks for that!

Kamran Pervaiz · Accepted Answer · 2012-05-01 15:38:10Z

0

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.

answered May 1, 2012 at 15:38

Kamran Pervaiz

1,9715 gold badges24 silver badges44 bronze badges

2 Comments

Icarus Over a year ago

You have the right idea there but it won't work either. You are just passing the client-side Ids of the controls but not the actual DOM object. the javascript function needs the DOM object in order to call name.value, for example.

Kamran Pervaiz Over a year ago

I edited the minute i saw i used ClientIDs which was pretty pointless and will generate the same error :)

MilkyWayJoe · Accepted Answer · 2012-05-02 13:43:25Z

0

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(&#39;textBoxSearch&#39;)

(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

edited May 2, 2012 at 13:43

answered May 1, 2012 at 15:41

MilkyWayJoe

9,1122 gold badges41 silver badges53 bronze badges

3 Comments

user1131661 Over a year ago

I've tried changing to how your example is and I still receive the error. The code breaks on the following line: <input type="submit" name="ctl00$contentBody$buttonSearch" value="Search" onclick="return CheckSearch(document.getElementById('textBoxSearch'),document.getElementById('comboCodes'), 3);" id="contentBody_buttonSearch" /> and the error message is: Microsoft JScript runtime error: Object expected

user1131661 Over a year ago

I fixed the above error. I now receive the following error:Microsoft JScript runtime error: 'value.length' is null or not an object.

user1131661 Over a year ago

Thanks for the reply. I've changed my code so that it's like your 2nd edit. However I think the problem is now in my JS function. If I try running 'alert(name.length);' this doesn't run and the function stops here without any error. Any ideas?

Alejandro B. · Accepted Answer · 2012-05-02 14:15:27Z

0

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);"

edited May 2, 2012 at 14:15

answered May 1, 2012 at 15:42

Alejandro B.

5,1302 gold badges37 silver badges64 bronze badges

3 Comments

MilkyWayJoe Over a year ago

textBoxSearch.ClientClick ? what??

Alejandro B. Over a year ago

@MilkyWayJoe haha sorry, I meant ClientId!

MilkyWayJoe Over a year ago

I figured :) but still, I think this will probably render ' instead of single-quote

Collectives™ on Stack Overflow

Pass an ASP.Net control into JavaScript function

4 Answers 4

2 Comments

2 Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related