CODEWITHSUNDEEP
javascriptjqueryasp.netfunction
DreamTeK
DreamTeK

Reputation: 34207

Passing .Net control values to a javascript function

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?

Upvotes: 0

Views: 699

Answers (3)

B2K
B2K

Reputation: 2611

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>

Upvotes: 1

Giorgos Betsos
Giorgos Betsos

Reputation: 72175

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.

Upvotes: 2

Leon
Leon

Reputation: 919

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.

Upvotes: 1

Related Questions