CODEWITHSUNDEEP
c#javascriptasp.net
TheChampp
TheChampp

Reputation: 1437

Get Value Of Control In Code-Behind

When I call <%= this.HiddenField.Value %> the value of HiddenField control in this case remains the same state (5) ? But when I call it with console.log(document.getElementById('<%= this.HiddenField.ClientID %>').value); this return the changed state in this case "active", why? How I can get the changed value in code behind (I want <%= this.HiddenField.Value %> to return "active"(the changed value)) ?

code: 

<script>
    $(function () {
        document.getElementById('<%= this.HiddenField.ClientID %>').value = "active";
        console.log(document.getElementById('<%= this.HiddenField.ClientID %>').value); // this return te changed value "active"
        console.log('<%= this.HiddenField.Value %>') //this again is 5 not "active"
    });
</script>
<asp:HiddenField ID="HiddenField" runat="server" Value="5" />

Upvotes: 0

Views: 2043

Answers (5)

Apurv Gupta
Apurv Gupta

Reputation: 860

In the following line

 console.log('<%= this.HiddenField.Value %>')

<%= this.HiddenField.Value %> is evaluated at server so in the browser its

console.log('5')

because that's the value of the expression.

Upvotes: 1

Can
Can

Reputation: 371

Or you can use ClientIDMode

<asp:HiddenField ID="HiddenField1" runat="server" ClientIDMode="Static" />

Set and Get;

in jquery

$('#HiddenField1').val('active');
console.log($('#HiddenField1').val());

in javascript

document.getElementById('HiddenField1').value = 'active';
console.log(document.getElementById('HiddenField1').value);

Upvotes: 0

Giorgio Minardi
Giorgio Minardi

Reputation: 2775

It happens because the asp.net control shows the "server" value, that is 5. With javascript you are modifing the dom on the client side, the asp.net control value doesn't change until you post the page.

Upvotes: 0

Oded
Oded

Reputation: 499272

You are confusing server side and client side code and when they run.

Server side code runs first. This is what's in the <%=%> blocks. In it, when using this.HiddenField.Value, it will output the server side value of the control, before it has been changed client side. this.HiddenField.ClientID will output the control ID as output by the server so you can get it from client side code.

When the page first loads, the <%=%> sections will be replaced with the server side values.

This would look like (in the browser once the page loads do - view source to see what was actually rendered to the browser):

<script>
    $(function () {
        document.getElementById('someId').value = "active";
        console.log(document.getElementById('someId').value); // this return te changed value "active"
        console.log('5') //this again is 5 not "active"
    });
</script>
<input type="HiddenField" ID="someId" Value="5" />

Then, and only then, will client side code run, with the results you have seen.

Upvotes: 3

Rawling
Rawling

Reputation: 50174

<%= whatever %> evaluates whatever when the page is rendered on the server.

If you look at the HTML sent to your client, you will find something like

$(function () {
    document.getElementById('blahblah_HiddenField').value = "active";
    console.log(document.getElementById('blahblah_HiddenField').value);
    console.log('5')
});

The 5 is rendered by the server - there's nothing on the client's end linking that 5 to the value in the hidden field, so it doesn't get updated when the hidden field's value changes.

Upvotes: 0

Related Questions