JQuery Modal Dialog form post-back issue

时间:2016-02-12 21:23:38

标签: javascript c# jquery asp.net

I am using a jquery modal dialog box to accept information from the user (as in a fillable form).

My modal form is displayed by the click of an input button:-

int numberOfVowels = 0;
for (int i = 0; i<strUserResponse.length();i++){
        char v = strUserResponse.charAt(i);
         if (v == 'a' || v == 'e' || v == 'i' || v == 'o' || v == 'u'
         || v == 'A'|| v == 'E' || v == 'I' || v == 'O' || v == 'U')
        {
            System.out.println ("Vowels: " + v); //just print the vocal
            numberOfVowels++; //increment numberOfVowels
        }
}

System.out.println ("Total of Vowels is: " + numberOfVowels);

I must point out that the reason I have this input button as type="button" rather than the default of "submit" is because, If I leave it to default, there is a postback and the modal popup disappears (which I do not want for obvious reasons).

The modal-form looks as follows:-

<button id="create-user" type="button">Please Check-in</button>

Inside the modal popup there are several fields and at the end is a submit button:-

 <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="CheckInSystem._Default" %>

 <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
 <script type="text/jscript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
 <script type="text/jscript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <script src="Scripts/ProgramFiles/Popup.js" type="text/javascript"></script>
 </asp:Content>
 <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Welcome to the Check-In Kiosk!
    </h2>
    <div style="margin-top: 40px">
    </div>
<div style="margin-left: 20px;">
        <asp:GridView ID="ActiveCheckIn" runat="server" BackColor="White" BorderColor="#999999"
            BorderStyle="Outset" BorderWidth="1px" CellPadding="5" ForeColor="Black" 

            onrowcancelingedit="ActiveCheckIn_RowCancelingEdit" 
            onrowediting="ActiveCheckIn_RowEditing" 
            onrowupdating="ActiveCheckIn_RowUpdating" >
            <AlternatingRowStyle BackColor="#CCCCCC" />
            <Columns>
                <asp:CommandField ShowEditButton="True"  />
            </Columns>
            <FooterStyle BackColor="#CCCCCC" />
            <HeaderStyle BackColor="Gray" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
            <SortedAscendingCellStyle BackColor="#F1F1F1" />
            <SortedAscendingHeaderStyle BackColor="#808080" />
            <SortedDescendingCellStyle BackColor="#CAC9C9" />
            <SortedDescendingHeaderStyle BackColor="#383838" />
        </asp:GridView>
    </div>
    <div style="margin-top: 40px">
    </div>
    <hr />
    <div style="margin-top: 20px">
    </div>
    <h2 style="margin-left: 20px">
        New Check-In?
    </h2>
       <button id="create-user" type="button" style="margin-left: 20%">
        Click Here!</button>
    <div id="dialog-form" title="New Visitor Check-in:">
        <form id="myForm" method="post">
        <p>
            * All form fields are required.</p>
        <div class="formContainer">
            <div class="row">
                <b>Visitor:</b>
                <input id="visitor" type="text" runat="server" style="margin-left: 60px" required="true" />
            </div>
            <div class="row">
                <b>Type of Visit:</b>
                <asp:DropDownList ID="TypeOfVisitDesc" runat="server" DataValueField="TypeOfVisitKey"
                    DataTextField="TypeOfVisitDesc" CssClass="ddlist" DataSourceID="TypeOfVisitDataSrc">
                </asp:DropDownList>
                <asp:LinqDataSource ID="TypeOfVisitDataSrc" runat="server" ContextTypeName="CheckInSystem.CheckInSystemDataContext"
                    EntityTypeName="" TableName="TypeOfVisits">
                </asp:LinqDataSource>
            </div>
            <div class="row">
                <b>Visitee:</b>
                <input id="visitee" type="text" runat="server" style="margin-left: 59px" required="true" />
            </div>
            <div class="row">
                <b>Arrival:</b>
                <input id="arrival" type="text" runat="server" style="margin-left: 59px" required="true" />
            </div>
            <div class="row">
                <b>Departure:</b>
                <input id="departure" type="text" runat="server" style="margin-left: 33px" required="true" />
            </div>
        </div>
        <div>
            <input id="Submit1" type="submit" runat="server" value="Check-In" class="myButton" />
        </div>
        </form>
    </div>
    <div class="statusMessage">
        <asp:Label ID="Status" runat="server" Text=""></asp:Label>
    </div>
</asp:Content>

My JS file for the jquery dialog box is as follows:-

<input id="Submit1" type="submit" runat="server" value="Check-In" class="myButton"/>

The issue I am facing currently, is that because I have had to disable the first button ("create-user") from doing a postback...the submit button inside my modal popup is also not doing a postback...which means, the mechanism by which I collect the user data on the C# side of things is not being traversed:-

   $(function () {
    var form;

    var dialog = $("#dialog-form").dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 50
        },
        hide: {
            effect: "explode",
            duration: 1000
        },
        height: 455,
        width: 796,
        modal: true,
        buttons: {

            Cancel: function () {
                dialog.dialog("close");
            }
        }
    });

    $("#create-user").button().on("click", function () {
        dialog.dialog("open");
    });

    $("#myForm").submit(function (event) {
        alert("you have submitted the form!");
    });
});

However, I cannot make the first button a submit type... any suggestions what I can do, so that my Allow_CheckIn() is traversed after the data is inserted in the modal popup.

1 个答案:

答案 0 :(得分:0)

From what I can tell, your issue has nothing to do with the 'create-user' button. That is just a button that opens the modal window. You have done nothing to "disable the first button" as you have described.

Most likely your issue is that the form in the modal dialog isn't actually a form. There is no form tag with an action attribute to define what will happen when your submit button is clicked.

I'd suggest you check out w3schools explanation on form actions.

check this plunker that shows your submit action works if you add a form tag

struct Node
{
    void* data_;
    Node* next_;

    Node()
    {
        data_ = 0;
        next_ = 0;
    }
};

class Star
{
private:
    char name_[ENTRY_SZ];
    long temperature_;
    double luminosity_;
    double mass_;
    double radius_;

public:
    static char filePath_[ENTRY_SZ];

    Star(char* name);
    void SetTemperature(char* temp);
    void SetLuminosity(char* lum);
    void SetMass(char* mass);
    void SetRadius(char* rad);
    void PrintToConsole();
    void AppendToFile();
};