[Resolved] How to run a Ajax request along with a post form, having ajax submit ?

[Author]

Posts

[puneetS-3]

I have a custom ajax request that checks if the cookies are set in the browser or not, and according to some condition it opens a popup having " CRED post Form with AJAX submit" .

My request has the following scripts enqued.

add_action( 'wp_enqueue_scripts', 'aj_enqueue_scripts' );
function aj_enqueue_scripts() {
 
    wp_enqueue_script( 'aj-demo', plugin_dir_url( __FILE__ ). 'ajax-script.js', array('jquery') );
    wp_localize_script( 'aj-demo', 'aj_ajax_demo', array(
                        'ajax_url' => admin_url( 'admin-ajax.php' ),
                        'aj_demo_nonce' => wp_create_nonce('aj-demo-nonce') 
    ));
}

Now Whenever I try to submit the form in popup, it gives follwing error in the console:

jquery.min.js:2 POST <em><u>hidden link</u></em> 500 (Internal Server Error)

Now I am guessing its something to do with the localization that I did, but I am unsure how to make it run together ?

The affected page is:
hidden link

Click on any category, it will open a form in popup, submitting which will reproduce the error.

Please help.

[puneetS-3]

I was able to figure out why was this happeing.

My Ajax Script

jQuery(document).ready( function(){
    jQuery('.download-button').on('click', function(e) {
        var category = jQuery(this).data( 'category' );  
        // Get post type via the 'data-type' attribute of the button.

        e.preventDefault();

        jQuery.ajax({
            url : aj_ajax_demo.ajax_url, // Note that 'aj_ajax_demo' is from the wp_localize_script() call.
            type : 'post',
            data : {
                action : 'edu_check_if_form_filled',  // Note that this is part of the add_action() call.
                nonce : aj_ajax_demo.aj_demo_nonce,  // Note that 'aj_demo_nonce' is from the wp_localize_script() call.
                category : category
            },
            success : function( response ) {

                if(response === category) {
                    $('.js-modal-shopify').toggleClass('is-shown--off-flow').toggleClass('is-hidden--off-flow');
					$('.wpt-form-hidden').val(response)
                }
                console.log(response);
            },
            error : function( response ) {
                alert('Error retrieving the information: ' + response.status + ' ' + response.statusText);
                console.log(response);
            }
        });
    });
});

You can see in line 21 I am trying to set the value of hidden field. Whenever I do tried submiting the form it gave back an error and upon checking the log I found that:

[15-Nov-2019 10:23:36 UTC] PHP Fatal error:  Uncaught TypeError: Argument 1 passed to CRED_Frontend_Form_Flow::form_start() must be an instance of WP_Post, null given, called in /home/edumentor2/edumentor.krenovate.xyz/wp-includes/class-wp-hook.php on line 286 and defined in /home/edumentor2/edumentor.krenovate.xyz/wp-content/plugins/cred-frontend-editor/application/controllers/frontend_form_flow.php:111

This was the error, after removing the line I was able to successfully submit the form but my problem still exists.

I also tried this.

$('.wpt-form-hidden').addClass( "unique_class_for_hidden_field" );
$('.unique_class_for_hidden_field').val(response);

I thought I am changing the value of something else in effort of chaning the value of hidden field.

Then also I get the same error.

Now my question changes to:

How should I assign the value to the hidden field using jquery ?

[Minesh]

Hello. Thank you for contacting the Toolset support.

This is a pure custom programming case. To offer support for such custom edits is above and beyond the scope of our support policy. If you need custom programming for your project, please feel free to contact our certified partners:
=> https://toolset.com/contractors/

However, I see in your custom code that you are trying to set the response value as I can see with the following line:

  $('.wpt-form-hidden').val(response)

But just above that I see you are comparing the response variable with category variable:

if(response === category) {

so, what if you try the following line:

  $('.wpt-form-hidden').val(category);

Or

Try to target the hidden field with the exact name;

$("input[name=your-field-name]").val(your-value);

This is just a hint and you can check and troubleshoot further.

[puneetS-3]

Hey Minesh,

Thanks for the reply, I was able make the form working with my ajax attached.

But now whenever I am trying to use the cred_save_data API to do something once the form is filled, I am getting error (500) again.

function save_data_for_form_with_id_989($post_id, $form_data)
{
    if ($form_data['id'] == 989) {
		var_dump($form_data);
		 $download_category = $_POST['hidden_category'];        
         if(!$_COOKIE[$download_category]) {
         setcookie( $download_category , "1" , time()+2600000);
         }
    }
}
    
add_action('cred_save_data', 'save_data_for_form_with_id_989',10,1);    

Am I making any error in setting this up ?

[Minesh]

Assuming, you are still using the Toolset form and submitting the form using ajax.

what if you try to change the hook priority from 1 to 3.

For example - try the following line and remove your existing line:

add_action('cred_save_data', 'save_data_for_form_with_id_989',10,3);    

More info:
=> https://toolset.com/documentation/programmer-reference/cred-api/#cred_save_data

[puneetS-3]

I also switched off all my custom code then also I am facing the same issue.

This is my error_log :

[18-Nov-2019 05:58:35 UTC] PHP Fatal error:  Uncaught ArgumentCountError: Too few arguments to function set_cookies_for_category(), 1 passed in /home/edumentor2/edumentor.krenovate.xyz/wp-includes/class-wp-hook.php on line 288 and exactly 2 expected in /home/edumentor2/edumentor.krenovate.xyz/wp-content/toolset-customizations/set_cookies_for_download_page.php:10
Stack trace:
#0 /home/edumentor2/edumentor.krenovate.xyz/wp-includes/class-wp-hook.php(288): set_cookies_for_category(1089)
#1 /home/edumentor2/edumentor.krenovate.xyz/wp-includes/class-wp-hook.php(310): WP_Hook->apply_filters(NULL, Array)
#2 /home/edumentor2/edumentor.krenovate.xyz/wp-includes/plugin.php(465): WP_Hook->do_action(Array)
#3 /home/edumentor2/edumentor.krenovate.xyz/wp-content/plugins/cred-frontend-editor/application/models/form/post.php(644): do_action('cred_save_data', 1089, Array)
#4 /home/edumentor2/edumentor.krenovate.xyz/wp-content/plugins/cred-frontend-editor/application/models/form/base.php(441): CRED_Form_Post->save_form(1089)
#5 /home/edumentor2/edumentor.krenovate.xyz/wp in /home/edumentor2/edumentor.krenovate.xyz/wp-content/toolset-customizations/set_cookies_for_download_page.php on line 10

It seems that the arguments are null for the function that I created.

[Minesh]

I just ran a test on my local test install where I've added a simple Toolset post form and added the cred_save_data hook and used the same code you are using and I see its working just fine. A cookie is set without any issue. I checked with both AJAX submit form as well as without AJAX.

What if you remove your custom ajax request or any other custom code you added and just check with the Toolset form + cred_save_data hook, does it works for you? If yes, the issue is due to the custom code you added. Or, if I need to setup Toolset form in a different way to reproduce the issue, let me know.

[puneetS-3]

After removing my custom code also I am getting the same error.
Uncaught ArgumentCountError: Too few arguments to function set_cookies_for_category()

[Minesh]

Can you please share the problem URL where you added the form as well as access details. I need to check how exactly you setup 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.

[puneetS-3]

Hey Minesh, I wasn't able to solve this issue but I found a work-around and don't require the support further. Thanks!