Forum

Thread tagged as: Problem, Forms

Unable to Submit 2 Forms in Same Template File

Hi all,

I currently have the following in a content template file...

            <div class="col-xs-12 col-sm-4 middle">
                <h2><i class="fa fa-angle-double-right" aria-hidden="true"></i><perch:content id="downloadH2" type="text" label="H2 title" /></h2>
                <h3><perch:content id="downloadH3" type="text" label="H3 title" /></h3>
                <img src="<perch:content id="downloadImg" type="image" label="Brochure image" />" alt="<perch:content id="downloadH3" />" />

                <perch:form id="download" method="post" app="perch_forms">
                    <div class="form-field">
                        <perch:label for="nameDownload" class="sr-only">Enter Your Name</perch:label>
                        <perch:input type="text" id="nameDownload" required="true" label="Name" placeholder="Enter Your Name" />
                    </div>
                    <div class="form-field">
                        <perch:label for="emailDownload" class="sr-only">Enter Your Email</perch:label>
                        <perch:input type="text" id="emailDownload" required="true" label="Email" placeholder="Enter Your Email" />
                    </div>
                    <div class="text-center">
                        <div class="btn-blue">
                            <perch:input type="submit" value="Yes Please" />
                        </div>
                    </div>

                    <perch:success>
                        <div class="alert alert-success" role="alert">                  
                            <h3><i class="fa-li fa fa-angle-double-right" aria-hidden="true"></i> Thank You</h3>
                            <a href="<perch:content id="alertDownload" type="file" label="Brochure PDF" bucket="docs" />" target="_blank">Click here to download our brochure</a>
                        </div>
                    </perch:success>
                </perch:form>
            </div>

            <div class="col-xs-12 col-sm-4 right">
                <h2><i class="fa fa-angle-double-right" aria-hidden="true"></i><perch:content id="newsletterH2" type="text" label="H2 title" divider-before="Newsletter Column" /></h2>
                <h3><perch:content id="newsletterH3" type="text" label="H3 title" /></h3>
                <img src="<perch:content id="newsletterImg" type="image" label="Newsletter image" />" alt="<perch:content id="newsletterH3" />" />

                <perch:form id="newsletter" method="post" app="perch_forms">
                    <div class="form-field">
                        <perch:label for="nameNewsletter" class="sr-only">Enter Your Name</perch:label>
                        <perch:input type="text" id="nameNewsletter" required="true" label="Name" placeholder="Enter Your Name" />
                    </div>
                    <div class="form-field">
                        <perch:label for="emailNewsletter" class="sr-only">Enter Your Email</perch:label>
                        <perch:input type="text" id="emailNewsletter" required="true" label="Email" placeholder="Enter Your Email" />
                    </div>
                    <div class="text-center">
                        <div class="btn-blue">
                            <perch:input type="submit" value="Sign Me Up" />
                        </div>
                    </div>

                    <perch:success>
                        <div class="alert alert-success" role="alert">
                            <ul class="fa-ul">
                                <li>
                                    <i class="fa-li fa fa-angle-double-right" aria-hidden="true"></i>
                                    <perch:content id="alertNewsletter" type="textarea" editor="redactor" html="true" label="Newsltter signup success message" />
                                </li>
                            </ul>
                        </div>
                    </perch:success>
                </perch:form>
            </div>

...unfortunately, I can't get both forms to work.

If I remove the second form id="newsletter" the first form id="download" works and submits perfectly, add the second form back in and the first form doesn't work (takes me staight back to the same page on submit) but the second form does work.

I have checked for duplicate IDs and they all seem fine.

Knowing me it's something pretty simple and I've been looking at it too long to notice the mistake.

Many thanks

Glen
Glen Piggott

Glen Piggott 0 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Can you show me what HTML output you get?
Glen Piggott

Glen Piggott 0 points

4 years ago

Hi Drew, here you go...

                            <div class="col-xs-12 col-sm-4 middle">
                <h2><i class="fa fa-angle-double-right" aria-hidden="true"></i>Download</h2>
                <h3>Download Our Brochure</h3>
                <img src="/cms/resources/brochure-download.jpg" alt="Download Our Brochure" />

                <form id="form1_download" action="/" method="post">
                    <div class="form-field">
                        <label class="sr-only" for="form1_nameDownload">Enter Your Name</label>
                        <input id="form1_nameDownload" name="nameDownload" placeholder="Enter Your Name" type="text" required="required" />
                    </div>
                    <div class="form-field">
                        <label class="sr-only" for="form1_emailDownload">Enter Your Email</label>
                        <input id="form1_emailDownload" name="emailDownload" placeholder="Enter Your Email" type="text" required="required" />
                    </div>
                    <div class="text-center">
                        <div class="btn-blue">
                            <input value="Yes Please" type="submit" /><input type="hidden" name="cms-form" value="ZG93bmxvYWQ6cGVyY2hfZm9ybXM6L3RlbXBsYXRlcy9jb250ZW50L2hvbWUvY3RhLmh0bWw6MTQ4ODQ3NjQ5OQ==" />
                        </div>
                    </div>


                </form>
            </div>

            <div class="col-xs-12 col-sm-4 right">
                <h2><i class="fa fa-angle-double-right" aria-hidden="true"></i>Keep Up To Date</h2>
                <h3>Sign Up To Our Newsletter</h3>
                <img src="/cms/resources/newsletter-signup.png" alt="Sign Up To Our Newsletter" />

                <form id="form2_newsletter" action="/" method="post">
                    <div class="form-field">
                        <label class="sr-only" for="form2_nameNewsletter">Enter Your Name</label>
                        <input id="form2_nameNewsletter" name="nameNewsletter" placeholder="Enter Your Name" type="text" required="required" />
                    </div>
                    <div class="form-field">
                        <label class="sr-only" for="form2_emailNewsletter">Enter Your Email</label>
                        <input id="form2_emailNewsletter" name="emailNewsletter" placeholder="Enter Your Email" type="text" required="required" />
                    </div>
                    <div class="text-center">
                        <div class="btn-blue">
                            <input value="Sign Me Up" type="submit" /><input type="hidden" name="cms-form" value="bmV3c2xldHRlcjpwZXJjaF9mb3JtczovdGVtcGxhdGVzL2NvbnRlbnQvaG9tZS9jdGEuaHRtbDoxNDg4NDc2NDk5" />
                        </div>
                    </div>


                </form>
            </div>
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

That looks like it should be fine - everything is being properly prefixed by Perch.

What does debug output when the submission fails?
Glen Piggott

Glen Piggott 0 points

4 years ago

Hi Drew,

The page debug on index.php after the form id="download" has been submitted looks like this...

Debug Message
[1] SELECT * FROM perch2_pages WHERE pagePath='/index.php' LIMIT 1
[26] SELECT DISTINCT settingID, settingValue FROM perch2_settings WHERE userID=0
Array
(
    [nameNewsletter] => required
    [emailNewsletter] => required
)
Using template: /templates/pages/attributes/seo.html
Template file not found: /home/indx/7ZO3HW67/htdocs/cms/templates/pages/attributes/facebook.html
Template file not found: /home/indx/7ZO3HW67/htdocs/cms/templates/pages/attributes/twitter.html
[8] SELECT * FROM perch2_pages WHERE pageNew=0 AND pageHidden=0 AND pageDepth >=0 AND pageDepth<=1 ORDER BY pageTreePosition ASC
[1] SELECT pageTreePosition FROM perch2_pages WHERE pagePath='/index.php' LIMIT 1
[1] SELECT pageID FROM perch2_pages WHERE pageTreePosition IN ('000-001', '000') ORDER BY pageTreePosition DESC
[8] Using template: /templates/navigation/main_nav.html
[8] SELECT regionKey, regionHTML FROM perch2_content_regions WHERE regionPage='/index.php' OR regionPage='*' ORDER BY regionPage DESC
[1] SELECT SQL_CALC_FOUND_ROWS DISTINCT tbl.* FROM ( SELECT idx.itemID, main.*, idx2.indexValue as sortval FROM perch2_blog_index idx JOIN perch2_blog_posts main ON idx.itemID=main.postID AND idx.itemKey='postID' JOIN perch2_blog_index idx2 ON idx.itemID=idx2.itemID AND idx.itemKey='postID' AND idx2.indexKey='postDateTime' WHERE 1=1 AND idx.itemID=idx2.itemID AND idx.itemKey=idx2.itemKey ) as tbl WHERE (postStatus='Published' AND postDateTime<='2017-03-03 09:07:00' ) GROUP BY itemID, sortval ORDER BY sortval DESC LIMIT 0, 1
[1] SELECT FOUND_ROWS() AS `count`
[1] Using template: /templates/blog/homepage_posts.html
[1] SELECT * FROM perch2_blog_sections ORDER BY sectionTitle ASC
[1] SELECT * FROM perch2_blogs ORDER BY blogTitle ASC
[8] SELECT * FROM perch2_pages WHERE pageNew=0 AND pageHidden=0 AND pageDepth >=0 AND pageDepth<=1 ORDER BY pageTreePosition ASC
[1] SELECT pageTreePosition FROM perch2_pages WHERE pagePath='/index.php' LIMIT 1
[1] SELECT pageID FROM perch2_pages WHERE pageTreePosition IN ('000-001', '000') ORDER BY pageTreePosition DESC
[8] Using template: /templates/navigation/footer_nav.html

I don't know if this is helpful within the debug...

Array
(
    [nameNewsletter] => required
    [emailNewsletter] => required
)

...as that's the 2 fields on the second id="newsletter" form which is the other form that wasn't submitted?
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

That's very helpful, thanks. It looks like there's a bug there somewhere. We should only be running validation on the form that was submitted.
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

I've managed to fix it so it should be fine in future versions.

For now, are you able to split your forms into two templates?
Glen Piggott

Glen Piggott 0 points

4 years ago

Thanks Drew - glad it's helped.

Yes, I've split the 2 forms into 2 different content templates and they're both working fine.

Glen