What is different about a form submit action versus an AJAX request?

Question

We have a form on a webpage that submits to an external URL and returns "1" on that webpage if it went through correctly.

We are trying to check against that response on our webpage so that we can redirect to a "Thanks for submitting" type page after we know the form went through. The issue I am running into is how to check against that value.

My first idea was to try and make the form submission through AJAX. I ran into CORS exceptions. That made me wonder: What is the difference between a form submitting to a URL and an HTTP request that I make via AJAX? Is there any way I can make my AJAX request essentially the same as what my HTML form is doing?

I have also tried loading the form response into an Iframe using the target attribute. I thought I would be able to just grab the response from the page with JavaScript, but I can't do that either because of CORS.

There are only a limited set of requests that won't trigger CORS. They are called ["simple requests"](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests). You can make AJAX requests that won't cause CORS exceptions, but you have to fit into the narrow scope of a "simple request". — zero298, Oct 14 '19 at 14:22
When you submit a form, the browser navigates to the form's `action`, and the user consequently sees the server's reply in the main window. An AJAX request happens in the background, there's no navigation, and the reply must be processed in the AJAX success callback function. — , Oct 14 '19 at 14:23
The CORS exception is not due to any significant _technical_ differences between those two “ways” of sending the data; CORS was explicitly _implemented_ to allow control over such cross-domain AJAX requests. No, you can not circumvent CORS from your end by making the AJAX request “send like a form” in any way. And with the iframe, the reason you got no access wasn’t CORS, but the Same Origin Policy. The only way you can get AJAX to work without the remote party enabling CORS for you, is to use a proxy. — 04FS, Oct 14 '19 at 14:24
What you can do to fix the CORS issue: 1. send the form to your own server 2. "forward" the form data by running a server-side request to the 3rd party server 3. redirect the user according to the reply — , Oct 14 '19 at 14:26

score 0 · Answer 1 · edited Jun 25 '22 at 14:22

Taken from : Send POST data using XMLHttpRequest

Works like a charm - no CORS issues, no AJAX required

Create an iframe called transframe... You can hide it in a hidden div if you like...

<script>

        var my_params='a=b&c=d';
    
        var Target_LINK='https://yourscript.php';
        parsed_params={}; 
        my_params.split("&").forEach(function(item) {
        var s = item.split("="), k=s[0], v=s[1]; 
        parsed_params[k] = v;});
        post(Target_LINK, parsed_params); 
    
    
    }
    
    
    function post(path, params) {   
        var xForm= document.createElement("form");
        xForm.setAttribute("method", "post");   
        xForm.setAttribute("action", path); 
        xForm.setAttribute("target", "transFrame");   
        for(var key in params) {   
            if(params.hasOwnProperty(key)) {        
                var hiddenField = document.createElement("input");
                hiddenField.setAttribute("name", key);
                hiddenField.setAttribute("type", 'hidden');
                hiddenField.setAttribute("value", params[key]);
                    xForm.appendChild(hiddenField);
            }
        } 
        document.body.appendChild(xForm);
        xForm.submit(); 
        xForm.remove();
    }

Please use proper code formatting – Joshua Jun 23 '22 at 11:46 — Joshua, Jun 23 '22 at 11:46

What is different about a form submit action versus an AJAX request?

1 Answers1