Submit ASP.NET Form within Jquery Remodal

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