[Resolved] Keep displaying form with AJAX

[Author]

Posts

[Vincent]

1. I have a custom post type, log. This post type is used for tracking my members' activities each time they share a post on WhatsApp.

2. I have a post form that submits the post id, member information etc to the log. All the fields are hidden, except for the button labelled 'WhatsApp Share'.

Scenario 1:
I placed a <meta redirect> to open up WhatsApp to with the post information with 'Displaying a message instead of the form'.

This works perfectly. However, the 'Submit' buttons disappear after a member click on the 'WhatsApp Share' button.

I want to keep the 'WhatsApp Share' button after submission.

Scenario 2:
I tried 'Keep displaying this form' with AJAX submission.

This works perfectly. However, I am unable to display any message (meta redirect for this case) after submission.

What do I wish to achieve?
1. Continue showing the 'WhatsApp Share' button after a member clicks it. Thereafter, open a custom message that contains a <meta redirect> to open up WhatsApp.

[Shane]

Hi Vincent,

Thank you for getting in touch.

This "WhatsApp Share" button, is it a custom coded button ? Meaning is Javascript involved ?

This could be why the Button isn't there after the Ajax submit because the button would need a callback function to trigger it again.

Please let me know how this button was added to the form.

Thanks,
Shane

[Vincent]

Hi Shane,
this 'WhatsApp Share' button is actually a post form submission button.

[cred_field field='form_submit' output='bootstrap' value='WhatsApp Share' class='btn btn-primary btn-lg']

There is no Javascript script involved.

[Shane]

Hi Vincent,

Thank you for the clarification and the screenshots.

Now I have the full picture of what we are dealing with.

Based on the screenshots you are displaying a success message after the form has been submitted. Now this will in turn NOT cause the form to keep displaying.

If you want your form to keep displaying you will need to select the option for "After visitors submits this form" to "Keep displaying form".

This is the only way the form will be displayed again once it is submitted. So essentially your query here

Scenario 2:
I tried 'Keep displaying this form' with AJAX submission.

This works perfectly. However, I am unable to display any message (meta redirect for this case) after submission.

This would not be possible to do, given that you want to still display the form AND a success message. You can do one or the other but not both.

What you can do as a workaround is to perhaps create a link back to the form. So the user can go back to the form if they so chooses to.

Please let me know if this helps.

Thanks,
Shane

[Vincent]

Hi Shane,
thank you so much for the speedy response.

Do you mind elaborating more on the workaround? I don't quite understand the flow.

[Shane]

Hi Vincent,

Sure its essentially just building a Manual Link back to the forms page. So you will add this in your success message field in the form settings

<a href='my-link-to-form'>Click here to Return to form </a>

What will be produced from the code above is a link with the Text "Click here to Return to form". Note you will need to put the actual link for it to work.

Thanks,
Shane

[Vincent]

Hi Shane,
thank you so much for this. Will go try it out now.

[Shane]

Hi Vincent,

Great once you've test this and it resolves your issue you can go ahead and mark this ticket as resolved.

Thanks,
Shane

[Vincent]

My issue is not resolved, but I have found other alternatives. Thank you!