JQuery模式對話框形式回發問題

Question

我正在使用jquery模式對話框接受來自用戶的信息（如在可填寫的形式）。

我的模態形式由輸入按鈕的點擊顯示： -

<button id="create-user" type="button">Please Check-in</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> 

裏面的模式彈出有幾個領域，並在年底是一個提交按鈕： -

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

我對JS文件jQuery的對話框如下： -

$(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!"); 
    }); 
}); 

我目前面臨的問題，是因爲我不得不解散使第一個按鈕（「創建用戶」）做回發...在我的模式彈出窗口中的提交按鈕也沒有做回發...這意味着，我在C＃端收集用戶數據的機制事情沒有被運行： -

protected void Page_Load(object sender, EventArgs e) 
     { 
      if (IsPostBack) 
      { Allow_CheckIn(); } 
     } 

private void Allow_CheckIn() 
     { 
      using (CheckInSystemDataContext objDataContext = new CheckInSystemDataContext()) 
      { 
       Checkin newCheckIn = new Checkin(); 
       newCheckIn.VisitorName = visitor.Value.ToString(); 
       newCheckIn.TypeOfVisitKey = Convert.ToInt32(TypeOfVisitDesc.SelectedValue); 
       newCheckIn.VisiteeName = visitee.Value.ToString(); 
       newCheckIn.Arrival = Convert.ToDateTime(arrival.Value); 
       newCheckIn.Departure = Convert.ToDateTime(departure.Value); 

       objDataContext.CheckIns.InsertOnSubmit(newCheckIn); 
       objDataContext.SubmitChanges(); 

       Status.Text = "Check-In successful!"; 
       Status.CssClass = "success"; 

       Bind_gvw_CheckIn(); 
      } 
     } 

但是，我不能讓第一按鈕提交類型...任何建議我能做些什麼，讓我Allow_CheckIn（）的數據後，經過插入模式彈出。

Answer 1

從我所知道的，你的問題與'創建用戶'按鈕無關。這只是一個打開模式窗口的按鈕。正如你所描述的，你沒有做任何事情來「禁用第一個按鈕」。

最有可能的問題是模式對話框中的窗體實際上並不是窗體。沒有帶有動作屬性的表格標籤來定義點擊提交按鈕時會發生什麼。

我建議你查看w3schools表單操作的解釋。如果通過更改類型=「按鈕」添加一個表單標籤

plunker