Pass selected value server side dropdown list to javascript function

Question

I have web form and JavaScript function like this:

web form

<div>
    <asp:DropDownList runat="server" ID="ddlType">
        <asp:ListItem Value="1" Text="Type1"></asp:ListItem>
        <asp:ListItem Value="2" Text="Type2"></asp:ListItem>
    </asp:DropDownList>
    <asp:LinkButton  ID="lnkTest" OnClientClick='<%= "getValue('0' + '|' + 'ddlType.SelectedValue');return false;" %>' runat="server" Text="text">
                           new
    </asp:LinkButton>
</div>

JavaScript function

<script>
    function getValue(Input) {       
        var result = Input.split("|");
        section1 = result[0];
        section2 = result[1];
    }
</script>

I need to pass string includes '0' (hardcoded) and ddlType.SelectedValue to getValue. This web form has syntax error Server tags cannot contain <% ... %> constructs (I know). I can get selected value by getElementById but I want to pass SelectedValue as argument. I read many posts but none of them don't pass SelectedValue.

It would be very helpful if someone could explain solution for this problem.

ADyson · Accepted Answer · 2016-09-21 10:40:30Z

0

SelectedValue is a server-side value. It's available to the server-side code at page load (i.e. before the page is rendered to the user). In javascript it has no meaning at all, and isn't available at the time when a user clicks on the link.

If you want to get the selected value on the client side you can do something like this:

First get rid of the all the OnClientClick code from your LinkButton.

Second, write some javascript like this (at the bottom of the page, after all your HTML/ASP markup:

document.getElementById("<%=lnkTest.ClientID %>").addEventListener("click", function(event) {
  event.preventDefault(); //stop default action of the link button, to allow script to execute
  var selectedVal = document.getElementById("<%=ddlType.ClientID %>").value;
  getValue('0|' + selectedVal);
});

This will cause the browser to listen for a user clicking on the button, and then run the JS function given. That function fetches the currently selected value of the dropdown (as selected in the browser - at this point the server has no idea what's selected because no postback has happened) and passes that selected value to your existing getValue function.

N.B. In case you're wondering, the reason I use the contruct <%=ddlType.ClientID %> is because ASP.NET dynamically creates the client-side ID of each element based on the structure of the server-side controls it lies within. So just relying directly on the server-side ID (e.g. "ddlType") will not reliably identify the element in the rendered DOM. .NET provides the ClientID value at runtime in order to allow us to access the generated ID.

answered Sep 21, 2016 at 10:40

ADyson

62.9k16 gold badges88 silver badges100 bronze badges

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

6 Comments

Ali Soltani Over a year ago

Thanks for answer.‍I think document.getElementById("<%=lnkTest.ClientID %>").addEventListener("click", function(event) in your code is equivalent to OnClientClick.But I need pass value of ddlType in OnClientClick event as argument.Then I tested ddlType.ClientID in OnClientClick but isn't work properly.

ADyson Over a year ago

No, you don't need to do that, mainly because you can't, as I've already explained. My version is the equivalent using the correct client-side code, and produces your desired outcome.

Ali Soltani Over a year ago

Are you sure that I can't pass selectedValue as argument?

ADyson Over a year ago

yes because it almost certainly won't let you put the <% %> in, which you need in order to identify ddlType on the client properly. There's no need to get hung up on using the OnClientClick syntax - my version is an exact equivalent of that. And you'll notice within my version, it then passed selectedValue to your getValue function as an argument, just the same. Lastly, from a design point of view most developers now agree that using the event listener syntax (as I have done) is much better than doing inline script calls (because it promotes re-use and code/presentation separation)

Ali Soltani Over a year ago

OnClientClick is string in System.Web.dll (see this). I tried to set this string by javascript but I could't. I think there is a way for convert selectedvalue to string by using script tag in html attribute (like this)and pass to function.

|

Collectives™ on Stack Overflow

Pass selected value server side dropdown list to javascript function

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related