Show a Modal when Form Submission is Successful

Question

Show a Modal when Form Submission is Successful

Currently, I am utilizing a Kentico form to gather data and my goal is to show a Foundation modal once the submission is successful. Our fields have some validation in place, so we are aiming to utilize an update panel to avoid a postback.

We managed to make the modal appear by inserting a div with an ID in the display text and incorporating JavaScript to verify its presence. However, this method only functions properly without the use of an update panel.

I believe there must be a way to showcase the modal with the update panel, but I am uncertain about the most effective approach and would appreciate any suggestions.

javascript forms zurb-foundation kentico

Answer 1

Answer №1

It seems like you're on the right track with your current approach. However, it sounds like there may be an issue with the javascript code not detecting form submissions when an update panel is present. Have you considered utilizing a document ready event handler to address this? If so, you might need to include an additional event handler specifically for update panel requests. Here's a sample snippet of what that could look like:

var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
        ....
        }
     }

I hope this guidance proves helpful!

Answer 2

It seems like you're on the right track with your current approach. However, it sounds like there may be an issue with the javascript code not detecting form submissions when an update panel is present. Have you considered utilizing a document ready event handler to address this? If so, you might need to include an additional event handler specifically for update panel requests. Here's a sample snippet of what that could look like:

var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
        ....
        }
     }

I hope this guidance proves helpful!

Show a Modal when Form Submission is Successful

Answer №1

Similar questions

My Angular7 app.component.html file is not displaying the routing. What could be the issue?

When utilizing Nettuts' CSS navigation resource, the bottom shadow will disappear if the parent element contains child elements

Different strategies for displaying a singular pie chart on multiple pages

Transform the collection of nested objects into an array of objects with identical key-value pairs and then output the result after each iteration

Extracting a lone angular expression from a JSON file

Steps for organizing an array based on unique requirements

What is the deal with mapstatetoprops function in Redux?

I am interested in incorporating jQuery into my React development project

Is there a way to determine if two elements in two arrays share the same index position?

The Carousel created using only CSS and npm packages does not function properly when implemented in a ReactJS environment

Reducing Time Series Data: Comparing Average vs Largest-Triangle-Three-Buckets Technique

Is there a cap on how many simultaneous ajax requests can be sent using node.js?

The promise node design pattern

The .each function in JavaScript is creating conflicts with other classes on the webpage

Overlaying a parent container DIV on top of its child elements

In order to ensure functionality on Firefox 3 and Opera, it is essential to include multiple <script> tags and the <!-- //required for FF3 and

Creating a reverse progress bar in HTML and Javascript that incorporates a countdown date

Issues encountered with rest arguments while setting up gtag

Ways to Determine if a User Has Closed the Page

Having trouble with mapping a localStorage variable containing an Array of Objects, which results in the item disappearing