Form submission after ajax request

Questions
1

Silverstrip V4.1.1

Submitting a form after performing an ajax request fails

I have a standard silverstripe form that uses jquery validate to validate the required field. I need to perform some other validation prior to the form being submitted so have used the submithandler of jquery validate to perform an ajax request and if a successful result come back, to submit the form as per the code below:

$('form').validate({
         rules: {
                  {**MY FIELD RULES**}
         },
         submitHandler: function(form) {
                  $.ajax({
                           url: {**MY URL**},
                           success: function(response) {
                                    var resp = JSON.parse(response);
                                    if(resp.ErrorMessage == '') {
                                             form.submit();
                                    } else {
                                             alert(resp.ErrorMessage);
                                    }
                           },
                  });
         }
});

When submitting the form using the code above, the Ajax function is called and returns correctly, however, when the form is submitted, I receive the following message:

ERROR [UNKNOWN TYPE, ERRNO 404]: 
IN POST {**MY FORM URL**} 
Line in 
Trace 
===== 
SilverStripe\Dev\CliDebugView->renderTrace() 
DetailedErrorFormatter.php:119 

SilverStripe\Logging\DetailedErrorFormatter->output(404, , , , ) 
DetailedErrorFormatter.php:54 

SilverStripe\Logging\DetailedErrorFormatter->format(Array) 
HTTPResponse.php:355 

SilverStripe\Control\HTTPResponse->outputBody() 
HTTPResponse.php:283 

SilverStripe\Control\HTTPResponse->output() 
index.php:26

However, if I place the form submit before the ajax call like so:

$('form').validate({
         rules: {
                  {**MY FIELD RULES**}
         },
         submitHandler: function(form) {
                 form.submit();
                 $.ajax({
                           url: {**MY URL**},
                           success: function(response) {
                                    var resp = JSON.parse(response);
                                    if(resp.ErrorMessage == '') {
//                                             form.submit();
                                    } else {
                                             alert(resp.ErrorMessage);
                                    }
                           },
                  });
         }
});

The form submission works correctly.

I do have custom routing in this project, but I don’t think this is what is causing the problem as the form submission works in the second example. However, the routing.yml is as follows:

---
Name: myproject
---
SilverStripe\Core\Manifest\ModuleManifest:
  project: mysite
SilverStripe\SiteConfig\SiteConfig:
  extensions:
    - SalonVision\SalonVision\SiteConfigExtension
---
Name: modelascontrollerroutes2
Before: 
  - '#modelascontrollerroutes'
After:
  - '#adminroutes'
  - '#graphqlroutes'
---
SilverStripe\Control\Director:
  rules:
    '$Salon/$Location/$URLSegment//$Action/$ID/$OtherID': 'SalonVision\SalonVision\CModelAsController'

Any thoughts as to what is going on?

2

Perhaps the first ajax is invalidating the Security token for the second post?

3

I did wonder if that was the issue, so tried $form->disableSecurityToken(); and got the same issue.

Any other ideas?

4

I have done a little more digging.

As I understand it, when you submit a Silverstripe form, the original form method is called (the one that generates the form) and then the form action method is called.

If I display the form page in my browser and then add a php die statement at the end of the form method, then submit the form, the die message is shown. If I place the die message at the start of the form action method, the error above is shown.

This means that the problem must lie when silverstripe is trying to call the form action method. I don’t know how this works internally but any thoughts would be greatly appreciated.