Skip to main content

Notifications

Community site session details

Community site session details

Session Id : 6YacJRKv0VdTvK9FTPkMhI
Power Pages - Design & Build
Answered

How to display another form when clicking the submit button

Like (0) ShareShare
ReportReport
Posted on 14 Dec 2023 07:44:24 by 265

hi,

I have created a form(form A) in a subpage. But When I submit the form by clicking submit button, I want Hide form A and need to show Form B in same page.

What are the ways to achieve it?

Thanks 

Categories:
  • Verified answer
    fm_skeller Profile Picture
    277 Super User 2025 Season 1 on 04 Jan 2024 at 12:25:07
    Re: How to display another form when clicking the submit button

    For future reference, there is also the option of using Multistep Forms.

  • Erandi Profile Picture
    265 on 20 Dec 2023 at 06:12:52
    Re: How to display another form when clicking the submit button

    @Jcook Thank you very much for your support...

  • Verified answer
    Jcook Profile Picture
    7,770 Most Valuable Professional on 20 Dec 2023 at 06:10:15
    Re: How to display another form when clicking the submit button

    Hello @Erandi 

     

    You will have to go a code approach here.

    There are many ways to achieve this:

    Use Liquid to Render Both Forms: Ensure both Form A and Form B are on the same page. You can use Liquid templates to render these forms. Initially, set Form B to be hidden.
    2. Add JavaScript for Form Submission and Toggling: Implement JavaScript to handle the submission of Form A. Upon successful submission, you can use JavaScript to hide Form A and display Form B.
    3. JavaScript to Hide/Show Forms: You can use simple style manipulation in JavaScript. For example, you might set display: none on Form A and display: block (or flex, depending on your layout) on Form B when Form A is successfully submitted.

    Here’s a basic JavaScript snippet for the toggle effect:

    document.getElementById('formA-submit').addEventListener('click', function(e) {
    e.preventDefault();
    // Add your form submission logic here

    // After successful submission
    document.getElementById('formA').style.display = 'none';
    document.getElementById('formB').style.display = 'block';
    });

    Replace 'formA-submit', 'formA', and 'formB' with the appropriate IDs of your submit button and forms.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Understanding Microsoft Agents - Introductory Session

Confused about how agents work across the Microsoft ecosystem? Register today!

Warren Belz – Community Spotlight

We are honored to recognize Warren Belz as our May 2025 Community…

Congratulations to the April Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard > Power Pages - Design & Build

#1
oliver.rodrigues Profile Picture

oliver.rodrigues 33 Most Valuable Professional

#2
JB-10040341-0 Profile Picture

JB-10040341-0 12

#3
Ă–E-05091504-0 Profile Picture

Ă–E-05091504-0 6

Overall leaderboard

Featured topics

Loading started
Loading complete