Passing .Net control values to a javascript function

Question

I am attempting to pass different values to a javascript function depending on which button is clicked.

I have two hiddenfields on the page and I want the value of the first field hidA to be used when btnA is clicked and the second field hidB value to be used when btnB is clicked.

The value will then be read by javascipt.

EXAMPLE

onclick="test(22);"

However I am unable to read .Net control values without breaking the syntax.

ASPX

<input id="btnA" type="button" value="A" onclick="test($('#<%= hidA.ClientID%>').val());"/>
<input id="btnB" type="button" value="B" onclick="test($('#<%= hidB.ClientID%>').val());"/>

Jquery

function test(e){
  $('#label').text(e);
}

QUESTION

How can ASP.NET control values be passed to a javascript function?

If you're seeing the `<% %>` tags client-side then it's not really a syntax issue, it's that the page isn't being processed by ASP.NET on the server-side at all. It's just being passed to the client as-is, like standard HTML. If that's not the case then I may have misread your question, can you clarify? — David, Dec 08 '14 at 14:44
What are you trying to do? Do you want the ClientID (actual generated ID from .NET) or do you want "some" ID from code-behind to be used in the DOM? — Leon, Dec 08 '14 at 14:48
The issue using .net controls in this way is that the apostraphes prematurely end the string. — DreamTeK, Dec 08 '14 at 14:51
I have two hiddenfields on the page and I want the value of the first field to be used when button A is clicked and the second field value to be used when button B is clicked. — DreamTeK, Dec 08 '14 at 14:53

Giorgos Betsos · Answer 1 · 2014-12-08T15:35:16.757

You can add the onclick attribute server-side, e.g.

protected void Page_Load(object sender, EventArgs e)
{
    btnA.Attributes.Add("onclick", "test($(" + hidA.ClientID + ").val());");
    btnB.Attributes.Add("onclick", "test($(" + hidB.ClientID + ").val());");                
}

provided of course that both input elements have runat attribute correctly set in the .aspx:

<input id="btnA" type="button" value="A" runat="server"  />
<input id="btnB" type="button" value="B" runat="server" />

The above sends the following html back to the client:

<input type="hidden" name="hidA" id="hidA" value="22" />
<input type="hidden" name="hidB" id="hidB" value="33" />        

<input name="btnA" type="button" id="btnA" value="A" onclick="test($(hidA).val());" />
<input name="btnB" type="button" id="btnB" value="B" onclick="test($(hidB).val());" />

which I think is the desired output.

score 1 · Accepted Answer · answered Dec 08 '14 at 15:08

The easiest method of doing this is setting the ClientIDMode to static on the hidden fields and post either 'A' or 'B' in the test variable. Like this:

<input id="btnA" type="button" value="A" onclick="test('A');"/>

Then in the test-method you get the value from that hidden control (and not in the call itself):

$("#hid" + parameterValue).val();

That's one option. You are however in this way limited to the controls you push to the client. But since you're already creating hidden controls in the original request I don't think this'll be an issue.

This was the alternative and preferred method I was looking at doing but I ran into a similar problem building up the string. — DreamTeK, Dec 08 '14 at 15:30

B2K · Answer 3 · 2014-12-08T15:52:50.060

1

Have you considered moving the click event out of the control?

<input id="btnA" type="button" value="A" cssClass="btnA hidBtn" />
<input id="btnB" type="button" value="B" cssClass="btnB hidBtn" />

<script type="text/javascript">
      jQuery(function($) {
           $(".btnA").click(function() {
               test($("#<%= hidA.ClientID %>").val());
           });
           $(".btnB").click(function() {
               test($("#<%= hidB.ClientID %>").val());
           });

           // Or you could try something like this
           $(".hidBtn").click(function() {
              var hidId = "#"+this.id.replace("btn","hid");
              test($(hidId).val());
           });
      });
</script>

edited Dec 08 '14 at 15:52

answered Dec 08 '14 at 15:20

B2K

2,541
1
22
34

Yes this is the way I am doing it at the moment but the reality is there are not 2 buttons and two hiddenfields, there are ten. This question arose because I am trying to combine all the click events into one smaller function. Thanks for the answer though. – DreamTeK Dec 08 '14 at 15:23
See also http://stackoverflow.com/questions/2027062/jquery-hidden-field You could use the $= selector to look up the value or make the id static as mentioned by Leon. – B2K Dec 08 '14 at 15:52

Passing .Net control values to a javascript function

3 Answers3