Disable Form Redirect

Question

So I have this form, that uploads a file to a third party host, upload works fine, but I'm getting a redirect when upload is done, I have read that Ajax can solve this, but I have tried many Ajax solutions and non seem to have worked, might it be because the action is done outside of my website? any help is much appreciated!

<form id="myform" enctype="multipart/form-data" action="https://website/upload/01" method="post">
    <input type="hidden" name="api_key" value="XXXXXXX">
    <input name="file" type="file">
         <input value="Upload" type="submit">

Please add the ajax code and specify where is the issue you have faced. — Inzamam Idrees, Mar 03 '20 at 05:22
_“might it be because the action is done outside of my website?”_ - if you want to make an AJAX request to a different website (different _origin_, technically) - then the remote endpoint must explicitly make this possible, using a mechanism called Cross-Origin Resource Sharing, CORS for short. We have no idea whether that is the case here, or not. — CBroe, Mar 03 '20 at 08:52
CBroe answered the Question, it was not possible due to CORS! Thanks mate — TheDabny, Mar 14 '20 at 08:04

score 0 · Answer 1 · answered Mar 03 '20 at 05:07

You can use e.preventDefault();

Here i attached sample code with Jquery and ajax.

jQuery + Ajax

 $("form#myform").submit(function(e) {
        e.preventDefault();    
        var formData = new FormData(this);

        $.ajax({
            url: window.location.pathname, // location of form submit
            type: 'POST',
            data: formData,
            success: function (data) {
                alert(data)
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });

Reference: Uploading both data and files in one form using Ajax?

Disable Form Redirect

1 Answers1