[Resolved] Accordion and Forms

[Author]

Posts

[PiotrO586]

Hi,

I included a form inside Accordion, e.g.:
hidden link (Booking tab).

The form is set up to “Display a message instead of the form”, and has “Ajax submission” option enabled.

The problem is that when I submit the form, the page reloads anyway (the url is appended by “?_tt=xxx&_success_message=xxx_x&_target=xxx#cred_form_xxx_x”) and the Accordion moves to the first tab, instead of showing the Booking tab (the second tab), which is not expected as user should see a message being shown upon form submission. Is there any workaround to keep displaying the tab which has the form?

[Nigel]

You are right that displaying a success message with a Form involves a page redirect even if submitting the form via ajax, so the status of the accordions is lost.

What you can do is check whether one of the URL parameters is presented in the page URL to know whether the redirect for the message has occurred, and, if so, force a click on the link to open the appropriate accordion.

I did the following on a test site.

I created my form with the settings to display the message after submitting via ajax.

I inserted this form on a standard page.

Because I want to add some custom JS to just this page I created a Content Template that is not assigned to any post type which includes just the post body and nothing else.

In the custom JS section I then added the following code:

( function( $ ) {
	$( document ).ready( function(){
		let url = new URL(location.href);
		let success = url.searchParams.get("_success_message");
      
		if ( success ) {

          $("a[href='#collapseTwo']").click();
        }
	});
})( jQuery );

I then edited the page that contains the form and assigned this specific Content Template to that page alone.

I then tested submitting the form, and after the page reloads the correct accordion is opened.

Note with the code above you would need to edit the selector for the link to click.

In my testing I simply copied and pasted the Bootstrap doc markup for the accordions, and so my second accordion has an id of "collapseTwo". You'll need to edit that for your site depending on your accordion implementation.

[PiotrO586]

Hi Nigel,

In my case, the accordion is placed inside layout, which is assigned to custom post. I placed the code in Layouts CSS and JS Editor.

Anyway, the part I cannot figure out for now is how you assign ID to the second accordion tab? I tried to placed ID in the Edit accordion panel screen (screen), but no luck.

[Nigel]

I couldn't see any way to helpfully add an ID or class where required.

Your booking tab is the second tab, so I think you can use an alternative selector to target the required link, like so:

( function( $ ) {
    $( document ).ready( function(){
        let url = new URL(location.href);
        let success = url.searchParams.get("_success_message");
       
        if ( success ) {
 
          $(".panel-group .panel:nth-child(2) a").click();
        }
    });
})( jQuery );

[PiotrO586]

Nigel, great stuff, that works. Thanks.