Unable to Pass Modal Form Values to Code-Behind Function
A quick summary of what I'm attempting to do:
Within an aspx page, I have a form with asp controls (text boxes) that I'm loading within a jQuery modal popup dialog. Once the user fills out the form and the register button is clicked in the modal form, it invokes a code-behind function, which seems to be working fine. However, the problem I'm facing is in the code-behind function; none of the field values in the modal popup form are being passed to the code-behind function.
any suggestions on why that is?
I was unable to attach some snapshots directly to the post, so I uploaded it at the following urls:
http://filebox.vt.edu/users/amdesouk/modal_popup_form.JPG
http://filebox.vt.edu/users/amdesouk/codebehind_btRegistration_Click.JPG
Thanks!
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 460,
width: 500,
modal: true,
buttons: {
'Register': function() {
var bValid = true;
$('#dialog').dialog();
if (bValid) {
<%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.btnRegModalSubmit))%>;
$(this).dialog('close');
}
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
allFields.val('').removeClass('ui-state-error');
}
});
$('#btRegistration').click(function() {
$("#dialog").parent().appendTo("/html/body/form[1]");
$('#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="frmRegistration" runat="server">
<div class="demo">
<div id="dialog" title="Registration Form">
<p id="validateTips">All form fields are required.</p>
<fieldset>
<label for="firstname">First Name</label>
<asp:TextBox id="txtFirstName" class="text ui-widget-content ui-corner-all" runat="server"></asp:TextBox>
<br />
<label for="lastname">Last Name</label>
<asp:TextBox id="txtLastName" class="text ui-widget-content ui-corner-all" runat="server"></asp:TextBox>
<br />
<label for="email">Email</label>
<asp:TextBox id="txtEmail" class="text ui-widget-content ui-corner-all" runat="server"></asp:TextBox>
<br />
<label for="passwordR">Password</label>
<asp:TextBox id="txtPasswordR" TextMode="Password" class="text ui-widget-content ui-corner-all" runat="server"></asp:TextBox>
<br />
<label for="address">Address</label>
<asp:TextBox id="txtAddress" class="text ui-widget-content ui-corner-all" runat="server"></asp:TextBox>
<br />
<label for="city">City</label>
<asp:TextBox id="txtCity" class="text ui-widget-content ui-corner-all" runat="server"></asp:TextBox>
<br />
<label for="state">State</label>
<asp:TextBox id="txtState" class="text ui-widget-content ui-corner-all" runat="server"></asp:TextBox>
<br />
<label for="zip">Zip Code</label>
<asp:TextBox id="txtPostalCode" class="text ui-widget-content ui-corner-all" runat="server"></asp:TextBox>
<br />
<label for="country">Country</label>
<asp:TextBox id="txtCountry" class="text ui-widget-content ui-corner-all" runat="server"></asp:TextBox>
<br />
<label for="program">Program Type</label>
<asp:TextBox id="txtProgram" class="text ui-widget-content ui-corner-all" runat="server"></asp:TextBox>
<asp:Button ID="btnRegModalSubmit" Visible="false" runat="server" OnClick="btRegistration_Click" />
</fieldset>
</div>
</div>
</form>
