Value does not retain in span while using jquery with ajax
I have a form as under
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="JQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnSubmit").click(function() {
$.ajax(
{
url: "Default2.aspx",
data: "get=" + document.getElementById("TextBox1").value,
success: function(data) {
$('#lblServerResponse').html(data);
},
error: function() { alert(arguments[2]); }
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
Enter your name:
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Click Me" />
</td>
</tr>
开发者_运维百科 <tr>
<td>
Server Response:
</td>
<td>
<span id="lblServerResponse"/>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
After I enter some value in the textbox and click on the button, I am able to get the data but it is not retaining in the span.
What is the problem and how can I overcome this?
Thanks
If you can, use client-side elements instead:
<form id="form1">
<div>
<input type="button" id="Button1" value="Button" />
<input type="text" id="TextBox1" />
<span id="Blah"></span>
<!-- the hidden input may no longer be required -->
<input type="hidden" id="Label1" />
</div>
</form>
Then your javascript will be like:
$(document).ready(function() {
$("#Button1").click(function() {
$.ajax(
{
url: "Default2.aspx",
data: "get=" + $("#TextBox1").val(),
success: function(data) {
$('#Blah').html(data);
$('#Label1').html(data); //the hidden input may no longer be required
},
error: function() { /* handle here */ }
});
});
});
加载中,请稍侯......
精彩评论