[Resolved] Error submitting Woo Toolset Form. "A variable mismatch has been detected"

[Author]

Posts

[peterJ-3]

I have a Toolset form with Woocommerce enabled on a development site.

All seems to be working fine until the form is submitted. Instead of directing to checkout I get the following error:

"A variable mismatch has been detected."

At this point I still see the URL of the page containing the form in my browser and cannot continue.

[peterJ-3]

OK. I have been trying to drill this down by process of elimination.

I have identified that it is a problem with the field labelled "Make".

This field is a taxonomy select. It is being populated by a post param in the URL. We are also using javascript to populate this form via the taxonomy term, rather than ID, as we have no way of querying the ID at this point.

The method I am using is seen documented here: https://toolset.com/forums/topic/can-i-pass-a-taxonomy-term-to-a-cred-form-via-a-url-parameter/

That's as far as I can get. I can see where the problem is, but cannot understand the nature of it.

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please share problem URL where I can see the form?

[peterJ-3]

Yes. Please start here: hidden link

You will need to use the following vehicle registration for testing purposes: "MT09NKS"

[Minesh]

Once I used the code "MT09NKS" you shared with the following URL:
=> hidden link

Once I submit the code - it redirect me to the following page:
=> hidden link
- On the above page I can see the following notice:

Notice: Undefined index: step in /home/customer/www/peters72.sg-host.com/public_html/wp-content/toolset-customizations/shortcode-post-params.php on line 9

When I checked the code you added to "Custom Code" section:

function wpv_post_param_shortcode( $atts ) {
  if ( !empty( $atts['var'] ) ) {
    $var = (array)$_GET[$atts['var']];
    return esc_html( implode( ', ', $var ) );
  }
}
add_shortcode( 'wpv-post-param', 'wpv_post_param_shortcode' );

I can see that there is no "step" url param passed. From where you are passing the "step" attribute?

Can you please clarify where exactly you have added the shortcode [wpv-post-param]?

[peterJ-3]

That's only a notice. You don't need to worry about it. All you need to worry about is the Toolset Form, which appears after that once you have selected a package in "Step 2".

Everything happens on the same page, but with url params defining the steps and passing data between forms. The process is as such.

1. The customer arrives at the page: hidden link

At this point the package is irrelevent. You can ignore it.

Step=1 determins that the DVLA form displays (using a Toolset conditional block)

2. Once submitting the DVLA search you will arrive at the same page, but with the result returned. hidden link

We check that "?dvla_search_registration" is not empty with a Toolset Conditional block and then display the results of the DVLA search. We can output all of the parameters using a DVLA shortcode.

3. We then have a continue button (a Toolset Blocks Button). Here we link again to the same page, but we add all of the returned DVLA data as queries on the URL. This takes us to step 2.

4. The page now checks that step=3 (the shortcode for url params can be found in Toolset Custom Code in Toolset Settings.

Now we grab all of the data from the URL and again pass that in the URL into the button link for each of the packages, also including the id of the package. The user submits and the page reloads.

5. Now we check if step=3, again with a Toolset conditional block. Assuming step=3, the Toolset form will now display. The form fields will also be pre-populated from the url parameters using standard Toolset behaviour.

--------------------------------------------------------

Great. So now we have our Toolset form populated with all of the data we retreived from the DVLA. Everything looks like it should work. However, this is where the problem is. If we complete the form and submit, we get an error, preventing us from reachin ghte checkout.

I have systematically tested each field one by one. The issue is cause by the "Make" field. The Make field is populated by some javascript, as it is a taxonomy. We need to match the field name rather than the ID, because we don't know the ID at this point, or at least we cannot match it with the data we received from DVLA.

In this case, it is Volkswagen. We know it is matching, because the select filed for the taxonomy is properly populating.

So, the question is, what is preventing the form from submitting? The fields all appear to be populated with valid data.

[Minesh]

It was nail biting issue but finally I am happy that its resolved now.

Can you please check now:
=> hidden link

The issue was indeed using the "make" as url pram. I've editing the loop content template for your view that displays the package "Select" buttons and I've change the "make" url pram to "urlparam_make":
=> hidden link

Then within your form, I've also changed the JS code as given under:
=> hidden link

jQuery(document).ready(function($){
  

/* Populate "vehicle make" taxonomy from URL */
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
   
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
   
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};
var urlparam_make = getUrlParameter('urlparam_make');
  jQuery('select[name="make[]"]').find("option:contains('" + urlparam_make + "')").attr('selected', 'selected');
});

I can see now its working. Can you please confirm it works at your end as well.

[Minesh]

Can you please confirm now when you submit the form it redirect you to cart page and your issue is resolved.