Hi makumbi,
The TextBoxes values are empty, this is because the dialog is rendered out side of the form element.
So you need to force dialog to render inside the form by using the appendTo function.
Refer below example.
HTML
<div id="dialog" style="display: none">
<table>
<tr>
<td>Name: </td>
<td><asp:TextBox runat="server" ID="txtName" /></td>
</tr>
<tr>
<td>Country: </td>
<td><asp:TextBox runat="server" ID="txtCountry" /></td>
</tr>
</table>
</div>
<asp:Button ID="Button1" Text="Save" runat="server" OnClick="OnSave" Style="display: none;" />
<asp:Button ID="btnShowPopup" runat="server" Text="Show Popup" />
JavaScript
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
title: "jQuery Dialog Popup",
width: 400,
height: 200,
autoOpen: false,
buttons: {
Ok: function () {
$("[id*=Button1]").click();
}
}
});
$("#dialog").parent().appendTo($("form:first"));
$('#btnShowPopup').click(function () {
$("#dialog").dialog('open');
return false;
});
});
</script>
Code
C#
protected void OnSave(object sender, EventArgs e)
{
string name = txtName.Text.Trim();
string country = txtCountry.Text.Trim();
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "alert('Name: " + name + "\\nCountry: " + country + "');", true);
}
VB.Net
Protected Sub OnSave(ByVal sender As Object, ByVal e As EventArgs)
Dim name As String = txtName.Text.Trim()
Dim country As String = txtCountry.Text.Trim()
ClientScript.RegisterStartupScript(Me.GetType(), "Popup", "alert('Name: " & name & "\nCountry: " & country & "');", True)
End Sub
Screenshot