You’re offline. This is a read only version of the page.
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
For future reference, there is also the option of using Multistep Forms.
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.
#1
oliver.rodrigues
33
Most Valuable Professional
#2
Fubar
22
Super User 2025 Season 1
#3
JB-10040341-0
18
Share
Report
All responses (
Answers (
