jQuery Modal Popup TextBox values Empty (Blank) on Button Click in ASP.Net

makumbi
 
on Jun 03, 2022 02:17 AM
Sample_107763.zip
1064 Views

Please help when click on the submit button these fields become empty yet they contain values before click.

The modal is opening using jQuery and TextBoxes are set using jQuery.

The values affected are admno.text

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Public Class StudentSearch
    Inherits System.Web.UI.Page
    Protected Sub Submit(ByVal sender As Object, ByVal e As EventArgs)
        Dim id As String = lblId.Text
        Dim admnor As String = admno.Text
        Dim city As String = txtCity.Text
        Dim country As String = txtCountry.Text
        Dim classr As String = ddlClass.SelectedItem.Text
        Dim sexr As String = ddlsex.SelectedItem.Text
        Dim stdtype As String = ddlStudentType.SelectedItem.Text
        Dim statusd As String = txtCity.Text
        Dim names As String = txtName.Text
        Dim housed As String = txtHouse.Text        
    End Sub
End Class

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jun 13, 2022 09:44 AM

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