I have a div on page, which content will change by javascript, I want get its value from c# code. but, its always returns empty or initial value, not changed value.
If I changed from div to hidden, it works well. I don't know why?
here is the code:
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
foo = function()
{
var d = document.getElementById('divTest');
d.innerHTML = 'my value';
var e = document.getElementById('hiddenTest');
e.value = 'my value';
}
</script>
</head>
<body>
<form id="form1" runat="server" >
<div>
<div id="divTest" runat="server" />
<input type="hidden" runat="server" id="hiddenTest" />
<input type="button" value="test" onclick="javascript:foo();" />
<asp:Button ID="btnTest" runat="server" Text="ASP.NET Button" OnClick="OnbtnTest" />
</div>
</form>
</body>
here is the c# code:
protected void OnbtnTest(object sender, EventArgs e)
{
Response.Write( string.Format("alert('{0}');", hiddenTest.Value) );
}
I have a div on page, which content will change by javascript, I want get its value from c# code. but, its always returns empty or initial value, not changed value.
If I changed from div to hidden, it works well. I don't know why?
here is the code:
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
foo = function()
{
var d = document.getElementById('divTest');
d.innerHTML = 'my value';
var e = document.getElementById('hiddenTest');
e.value = 'my value';
}
</script>
</head>
<body>
<form id="form1" runat="server" >
<div>
<div id="divTest" runat="server" />
<input type="hidden" runat="server" id="hiddenTest" />
<input type="button" value="test" onclick="javascript:foo();" />
<asp:Button ID="btnTest" runat="server" Text="ASP.NET Button" OnClick="OnbtnTest" />
</div>
</form>
</body>
here is the c# code:
protected void OnbtnTest(object sender, EventArgs e)
{
Response.Write( string.Format("alert('{0}');", hiddenTest.Value) );
}
5 Answers
Reset to default 2Form input elements inside a form element posted to server, all other content is static and not posted to server. It's fundamental rule of HTTP, you can see details from here.
You have two option, while preparing your div's content, write the same content inside a hidden field. And at server side get the hidden field's value.
Or make an AJAX call while preparing your content to get it at server side.
That's because only the form elements are submitted back to the server-side.
So what is the actual goal? You want to keep track of the previous value when a user changes an input, or you want to return the value entered by the user to a server-side script? Or you just want the user to see an alert of the data they just entered?
If it's the first one, you just need to move the previous data to an array or object in that function. So you'd add an onchange event handler that would move the previously stored "current value" to the "old value" array before replacing the "current value".
If you want to pass the input value to the server, you'll need to use AJAX. This will simplify your code as well. Instead of having C# doing the UI work, it just crunches the user input, decides on the return value, and passes that back to the javascript, which then does the work of outputting it to the user. I suggest jquery for making ajax easier, for instance:
$("input#testinput).post(
"myserverscript.aspx",
{question : "Who Loves the Sun?"},
function(answer) {
alert("Answer: " + answer);
});
But with your question, I'm a bit fuzzy on the exact right answer, as I'm not sure why you are using the C# bit in the first place to do something javascript can do and why you are using asp buttons instead of plain html.
In my case I ended up using AJAX HTMLEditor instead of Div tag. unlike Div any changes made to HTMLEditor on client side will be posted to the server
Your javascript code won't be able to see the hiddenTest and divTest controls since they run from server-side. Your javascript will try to look for the control's client ID. Please try and replace function foo() with this :
foo = function()
{
var d = document.getElementById('<%= this.divTest.ClientID %>');
d.innerHTML = 'my value';
var e = document.getElementById('<%= this.hiddenTest.ClientID %>');
e.value = 'my value';
}