How do I get the ASP.NET text boxes updated with the value of the entered form data? The code below is basically the modal dialog form sample from jQuery UI, but with ASP.NET text boxes. The post back is fired, however the text box is not updated.
After post back, I don't have the values in my test boxes. I'm pretty sure this is an easy one, but my brain is blocked now, and can't figure out why.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<link href="Styles/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<title></title>
<style type="text/css">
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none; !important; cursor:pointer; position: relative; text-align: center; }
.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em; }
</style>
<script type="text/javascript">
$(function () {
var name = $("#name"),
email = $("#email"),
password = $("#password"),
allFields = $([]).add(name).add(email).add(password),
tips = $("#validateTips");
function updateTips(t) {
tips.text(t).effect("highlight", {}, 1500);
}
function checkLength(o, n, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass('ui-state-error');
updateTips("Length of " + n + " must be between " + min + " and " + max + ".");
return false;
} else {
return true;
}
}
function checkRegexp(o, regexp, n) {
if (!(regexp.test(o.val()))) {
o.addClass('ui-state-error');
updateTips(n);
return false;
} else {
return true;
}
}
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 300,
modal: true,
open: function(type,data){
$('#dialog').parent().appendTo($("form:first"));
},
buttons: {
'Create an account': function () {
var bValid = true;
allFields.removeClass('ui-state-error');
bValid = bValid && checkLength(name, "username", 3, 16);
bValid = bValid && checkLength(email, "email", 6, 80);
bValid = bValid && checkLength(password, "password", 5, 16);
bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");
bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]");
bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");
if (bValid) {
$('#users tbody').append('<tr>' +
'<td>' + name.val() + '</td>' +
'<td>' + email.val() + '</td>' +
'<td>' + password.val() + '</td>' +
'</tr>');
$(this).dialog('close');
<%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button1))%>;
}
},
Cancel: function () {
$(this).dialog('close');
}
},
close: function () {
allFields.val('').removeClass('ui-state-error');
}
});
$('#createuser1').click(function () {
$('#dialog').dialog('open');
})
.hover(
function () {
$(this).addClass("ui-state-hover");
},
function () {
$(this).removeClass("ui-state-hover");
}
).mousedown(function () {
$(this).addClass("ui-state-active");
})
.mouseup(function () {
$(this).removeClass("ui-state-active");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="javascript: $('#dialog').dialog('open');return false;"
OnClick="Button1_Click" />
</div>
<div class="demo">
<div id="dialog" title="Create new user">
<p id="validateTips">
All form fields are required.</p>
<fieldset>
<label for="name">
Name</label>
<asp:TextBox runat="server" name="name" ID="name" CssClass="text ui-widget-content ui-corner-all">UserUser</asp:TextBox>
<label for="email">
Email</label>
<asp:TextBox runat="server" name="email" ID="email" CssClass="text ui-widget-content ui-corner-all">[email protected]</asp:TextBox>
<label for="password">
Password</label>
<asp:TextBox runat="server" name="password" ID="password" CssClass="text ui-widget-content ui-corner-all">password</asp:TextBox>
</fieldset>
</div>
</div>
<div id="users-contain" class="ui-widget">
<h1>
Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>
Name
</th>
<th>
Email
</th>
<th>
Password
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
John Doe
</td>
<td>
[email protected]
</td>
<td>
johndoe1
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
protected void Button1_Click(object sender, EventArgs e)
{
string name = this.name.Text;
}