[Resolved] Display Same Form After Entering Detail

[Author]

Posts

[henryH]

Please find and attachment to get the clear Idea. Show Obituary, Service, Condolence all are the buttons. When users click on that I am displaying content related to that tab. So my problem is when User click on "New Condolence" I am displaying Form which I have created using Post Forms. And In selection I have Selected "Keep display same form Option" and Checked the checkbox "AJAX Submission". So when I am clicking on "Submit" button it is displaying "Condolence" tab detail but I want to Display "New Condolence" detail. Below is the code which i had used to implement the functionality.

<?php

get_header();

if( of_get_option('singlelayout',true) != ''){

$layout = of_get_option('singlelayout');

}

?>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>

<style>

<?php

if( of_get_option('singlelayout', true) == 'singleleft' ){

echo '#sidebar { float:left !important; }';

}

?>

</style>

<div class="content-area">

<div class="middle-align">
<div class="blog-post-repeat">
<article id="post-<?php the_ID(); ?> <?php post_class(); ?>" >
<header class="entry-header">
<div class="post-thumb1">">'medium')); ?></div>
<h1 class="entryt">"></h1>
<div class="postmetaO">
<div class="post-date"><font size='5'><?php echo types_render_field( "birth-date" ); ?> - <?php echo types_render_field( "death-date" ); ?></font></div>
</div> <!-- post-meta -->
</header><!-- .entry-header -->
<div class="entry-content1">
<div class="tabO">
<button class="tablinks" onclick="openCity(event, 'ObiDetail')" id="defaultOpen">Obituary</button>
<button class="tablinks" onclick="openCity(event, 'Service')">Service</button>
<button class="tablinks" onclick="openCity(event, 'Condolences')">Condolences</button>
<button class="tablinks" onclick="openCity(event, 'NewCondolences')">New Condolence</button>
<button class="tablinks" onclick="openCity(event, 'SendFlower')">Send Flower</button>
</div>
<div id="ObiDetail" class="tabcontent">
<p><br /><?php echo types_render_field( "enter-description"); ?> <br /><br /></p>
</div>

<div id="Service" class="tabcontent">
<?php $args = array(
'name' => 'listservices');
echo render_view( $args ); ?>
</div>

<div id="Condolences" class="tabcontent">
<p><?php $args = array(
'name' => 'listcondolence');
echo render_view( $args ); ?></p>
</div>
<div id="NewCondolences" class="tabcontent">
<p><?php echo cred_form(752);?></p>
</div>
<div id="SendFlower" class="tabcontent">
<div class="row">To order one of the arrangements pictured below please call us at (416) 259-3705. We accept VISA and Mastercard. Delivery is free.
If you'd prefer a custom arrangement, you're welcome to contact our local florist directly at (416) 251-5128. Tributes from Joan's Blooming Place are delivered free of charge to Ridley Funeral Home.
<?php $args = array(
'name' => 'sendflowers');
echo render_view( $args ); ?></div>

</div>
</div><!-- .entry-content -->

</article><!-- #post-## -->
<div class="spacer20"></div>
</div>
</div>

</div>

<script>document.getElementById("defaultOpen").click();</script>

<!-- blog-post-repeat -->

<?php get_footer(); ?>

[Nigel]

Do I understand correctly that what you want to happen is that someone submits the form in the New Condolence tab and that this then updates to show the new condolence post in place of the form?

I've been experimenting with the settings for Forms and it's not so straightforward.

We need to reload the same page after the form is submitted, but with URL parameters, for example, that can be used by your template to test whether the page is being loaded the first time (and the form should be added to the tab) or whether it is being reloaded after form submission and the post should be loaded in the tab instead (and the JS can set that tab to open).

You can update your Form settings so that "What to show after submitting the form:" is set to redirect back to the same page.

When the form is submitted that will reload the page with a URL parameter that specifies the form that was submitted, e.g.

site.com/page-with-form/?cred_referrer_form_id=98

So, your PHP template will know whether the page with the form is being loaded the first time, or after a form submission, because you can check the $_GET object for the cred_referrer_form_id parameter (it doesn't really matter what the value is).

So where you have a tab which shows the CRED form, you can add a conditional check for this URL parameter, and if it is present you need to display the post inside the tab instead.

But, how do you know which post?

You'll have to use the CRED API to add an additional parameter which has the post id (which you can then retrieve from the $_GET object).

See:
hidden link
https://toolset.com/documentation/programmer-reference/cred-api/#cred_success_redirect

Here's an example of using the API:

add_filter( 'cred_success_redirect', 'tssupp_add_id_to_redirect', 10, 3 );
function tssupp_add_id_to_redirect( $url, $post_id, $form_data ) {

	if ( $form_data['id'] == 98 ){

		$url .= '?pid=' . $post_id;

	}
	return $url;
}

There it adds the post id to a 'pid' parameter, so when the page reloads it will look something like this:

site.com/page-with-form/?pid=181&cred_referrer_form_id=98

The final part is that you will need to update your JS to test for the presence of the same cred_referrer_form_id parameter, and if it exists it should open the page on the corresponding tab.

You'll need to google what's involved in getting URL parameters with JavaScript, see this for an example:
hidden link