[Resolved] post form with multiple submit buttons

[Author]

Posts

[catherineH-3]

Tell us what you are trying to do?

I have a post form that has two submit buttons. The main submit button keeps refreshing the same page so the user can keep adding multiple instances of the repeating field group. This works fine. And then I have a second submit button that is supposed to allow the user to "complete" the form submission. I have a cred_save_data hook in my functions.php that detects the existence of this 2nd submit button in $_POST, if it does a few things and then redirects the user to a "thank you" page. So all of this seems to work fine as is. However, as soon as I try to add a jquery confirm dialog to the 2nd button, then it doesn't work. It just keeps refreshing the page and acts as though it's not hitting the cred_save_data hook at all. I have a "if ($form_data['id']==xxx)" in my cred_save_data function -- and again, it works withOUT the jquery confirm, but as soon as I add it in, it doesn't get hit. With my jquery confirm, I'm just simply running submit() on the form that contains both submit buttons. It refreshes the page, which implies the JS is working. But it no longer triggers any of the cred actions. Do you have any thoughts on what might be happening?

Here's the jquery:

$('.btn-confirm-final').click(function(e) {
e.preventDefault();
var c = confirm("Click OK to continue?");
if(c){
$('form#cred_form_1059_1').submit();
}
});

It's working. But it refreshes the page in a way that bypasses the cred_form hooks.

And in my functions.php:

add_action('cred_save_data', 'custom_save_calculator',20,2);

function custom_save_calculator($post_id, $form_data) {
if ($form_data['id']==1059) { // <-- this is definitely the correct form ID
// a few steps that normally work withOUT the jquery confirm()
// ending with...
wp_redirect( get_permalink( 1084 ) );
exit();
}
}

Is there any documentation that you are following?
I've looked through similar issues in your forum, and they all seem to suggest that what I have should work.

Is there a similar example that we can see?

What is the link to your site?
hidden link (It's the form on on the 2nd step of the submission process)

[Minesh]

Hello. Thank you for contacting the Toolset support.

First thing the help you are asking is for a custom code that is beyond the scope of our support policy. Please note that as a supporter we are not allowed to support such custom edits.

To clarify the things, you added jQuery confirm box and that works on frontend and the Toolset form API hook works on server side (backend). That is the reason the hook cred_save_data you added is not fired with the jQuery confirm box and it's expected because confirm box works on frontend and form's hook works on server side.

Please check the following related ticket hat might help you;
=> https://toolset.com/forums/topic/are-you-sure-you-want-to-submit/#post-1196285

You need to submit the form using the jQuery itself then it should work. Please check the following links for more details:
=> hidden link
=> https://stackoverflow.com/questions/11581462/how-can-i-submit-form-on-button-click-when-using-preventdefault

if you need further help with your custom code, you are welcome to contact any of our certified partners with the following link:
=> https://toolset.com/contractors/

[catherineH-3]

Thank you. I totally understand that JavaScript (jquery) is front end and the form hooks (PHP) are back end. My issue is that when I submit the form using jquery, the hooks aren’t triggered. I included a sample of my relevant jquery in my original question, which shows that I am submitting the form using jquery:

$('form#cred_form_1059_1').submit();

I don’t need help with the jquery/JavaScript, I’m just trying to figure out why the cred_save_data hook isn’t triggered when the form is submitted using jquery. The jquery is definitely working as I’ve added error checking to make sure it works, and it’s definitely submitting the form as the page is refreshing.

Any other ideas?

[Minesh]

The thing is that to submit the form using jQuery is not how Toolset form used to work. I understand what you are saying.

If you can share access details, I will try to look at it quickly. Please share the problem URL where you added the form.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

It says you are still editing the pages and I do not able to have control of edit form pages.

Also, I wonder why you have added the custom JS to theme file as Toolset form offers the JS box where you can add your custom JS code and it will be added only when you displayed that form.

Can you please move the your custom JS to your forms where its applicable rather adding to the custom JS file which is added to theme and make sure you stop editing.

[catherineH-3]

Yes, there appears to be a bug where it says posts are being edited when they're not. You can just click Take Over, and then click the back button if it takes you to the edit screen instead of the Post Form page. I need to figure that out next.

I prefer to have all my JS throughout the site in one location, but I've moved the JS for that page to the post form as you suggested.

[catherineH-3]

Sorry, now I'm having issues getting the JS to work in that box. Hold on a moment.

[catherineH-3]

OK, the js/jquery has now been moved to the Post Form page and I am not editing it, so feel free to take a look.

[catherineH-3]

Just wondering if you're still able to help me? Again, the problem is that when I submit the form via javascript (using submit()), it doesn't trigger the Toolset form hooks. So I'm wondering if there's some additional POST data I need to pass when I trigger that JS submit in order to get the hooks to run?

[catherineH-3]

Never mind. I found the solution is to add the second submit button as a hidden input before running the JS submit() function. So here's my 2nd submit button (as outputted by the Toolset shortcodes):

<input type="submit" id="cred_form_133_1-submit-2-1588698494" name="form_submit_2" value="Submit Application" class="btn btn-primary btn-lg btn-confirm-final wpt-form-submit form-submit submit js-wpt-form-submitting" jc-attached="true">

In my jquery confirm function, I added this:

// add submit button as hidden field since doesn't get included in $_POST
jQuery( "form#cred_form_1059_1" ).append("<input type='hidden' name='form_submit_2' value='true' />");
// now can do regular JS submit
jQuery( "form#cred_form_1059_1" ).submit();

It seems it doesn't pass along the 2nd submit button in $_POST automatically (as suggested in some other support posts), so I had to manually add as a hidden field.

[catherineH-3]

I was able to figure out my issue on my own, thanks for trying.