在Jquery Remodal中提交ASP.NET表单

Question

I've created an ASP.NET web page (.aspx) which is using a Jquery plugin containing a subscription form.

The modal containing the form pops with no problems or errors, but the problem is when I complete the form with data and press the submit button, the form doesn't post back so the C# in codebehind can't process the the form data.

This is the JQuery Modal Plugin: http://vodkabears.github.io/remodal/

Here is the ASP.NET page code:

<a href="#" data-remodal-target="modal" class="action-button">Get Free Trial</a>

<div class="remodal" data-remodal-id="modal">
    <label>First Name</label>
    <asp:TextBox ID="TextBoxFirstName" runat="server" />

    <label>Last Name</label>
    <asp:TextBox ID="TextBoxLastName" runat="server" />

    <label>Email</label>
    <asp:TextBox ID="TextBoxEmail" runat="server" />

    <asp:button runat="server" ID="ActiveCampaignSend" Text="Subscribe" OnClick="FormSubmit_Click"/>
</div>

Sample of the C# Code Behind:

 protected void FormSubmit_Click(object sender, EventArgs e)
 {
    // Code thate processes the form goes here....
 }

I've tested the form witout using the Jquery ReModal and it submits and works perfectly. I would try and not use a Modal window but my client has specifically requested it happens this way.

If someon can help me fix this issue, I'd be really grateful!

Answer 1

The remodal plugin uses your <div class="remodal" data-remodal-id="modal"> as a prototype to build the dom elements for the modal window. When it does this, it appends them to the body , outside the form tag. Thats why they dont interact with your form and you dont get a postback

When your asp:button is clicked, copy the values of email, first and last name inputs to the inside the form and then call submit on the form .

Answer 2

After further research, I found this post which fixed the issue:

jQuery modal form dialog postback problems