I want to have a callback after my form has successfully been submitted. This form does not reload the page and the ajax alternative is not available to us because of "cross origin" issues.

What I have now is:

$('#uploadform form').on('submit', function(){
    // DO STUFF HERE
});

But this is firing as soon as submit event is triggered and not as a callback. Without using ajax, how do I make code run after and only after the response is received (and get the response to do stuff with)? Is this even possible?

It is through AWS's S3 file hosting and cannot use JSONP.

I would rather not use an iframe if I don't have to for simplicity's sake.

EDIT It doesn't reload the page just like a file download link doesn't reload the page. Otherwise it's exactly like any other form. It's not submitted inside of an iframe. It's a normal form, but the headers involved don't require the page to reload.

I want to have a callback after my form has successfully been submitted. This form does not reload the page and the ajax alternative is not available to us because of "cross origin" issues.

What I have now is:

$('#uploadform form').on('submit', function(){
    // DO STUFF HERE
});

But this is firing as soon as submit event is triggered and not as a callback. Without using ajax, how do I make code run after and only after the response is received (and get the response to do stuff with)? Is this even possible?

It is through AWS's S3 file hosting and cannot use JSONP.

I would rather not use an iframe if I don't have to for simplicity's sake.

EDIT It doesn't reload the page just like a file download link doesn't reload the page. Otherwise it's exactly like any other form. It's not submitted inside of an iframe. It's a normal form, but the headers involved don't require the page to reload.

• javascript
• jquery
• forms
• amazon-s3
• cross-domain

• You can use jquery setTimeOut function to trigger the submit after x seconds. Without AJAX i don't think thats possible that the page doesn't reload. – Vucko Commented Nov 1, 2012 at 23:11
• How is the form submitted? We can't help you if we don't know what type of request you'r making. Are you using a target on the form and submitting it into an iframe? – Diogo Raminhos Commented Nov 1, 2012 at 23:11
• 2 @Vucko, it's possible by using an hidden iframe as a form target (I've done it before for handling forms with file uploads). – Diogo Raminhos Commented Nov 1, 2012 at 23:13
• I'm not using an iframe or anything like that. It's just a simple form, it's just that the headers don't require a page reload so no reload happens. – Kevin Beal Commented Nov 1, 2012 at 23:15
• @KevinBeal can you send us a link for your page? Or tell us what header you're using? Either way it doesn't seem that you can catch that request easily with javascript. Is the possibility of using an hidden iframe as target available? Otherwise I believe that it would be very difficult to detect that request and get any result from it. – Diogo Raminhos Commented Nov 1, 2012 at 23:22

2 Answers 2

A solution has e to me that will allow me to submit my form without reloading the page, not use an iframe or JSONP, and while it probably technically counts as AJAX, it does not have this same "cross origin" issue.

function uploadFile() {

    var file = document.getElementById('file').files[0];
    var fd = new FormData();

    fd.append('key', "${filename}");
    fd.append("file",file);

    xhr = new XMLHttpRequest();

    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);

    xhr.open('POST', 'http://fake-bucket-name.s3-us-west-1.amazonaws./', true); //MUST BE LAST LINE BEFORE YOU SEND 

    xhr.send(fd);
}

function uploadProgress(evt) {
    if (evt.lengthComputable) {
      var percentComplete = Math.round(evt.loaded * 100 / evt.total);
      document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
    }
    else {
      document.getElementById('progressNumber').innerHTML = 'unable to pute';
    }
}

function uploadComplete(evt) {
    /* This event is raised when the server send back a response */
    alert("Done - " + evt.target.responseText );
}

function uploadFailed(evt) {
    alert("There was an error attempting to upload the file." + evt);
}

function uploadCanceled(evt) {
    alert("The upload has been canceled by the user or the browser dropped the connection.");
}

With a simple form like this:

<form id="form1" enctype="multipart/form-data" method="post">
    <div class="row">
      <label for="file">Select a File to Upload</label><br>
      <input type="file" name="file" id="file">
    </div>
    <div id="fileName"></div>
    <div id="fileSize"></div>
    <div id="fileType"></div>
    <div class="row">
      <input type="button" onclick="uploadFile()" value="Upload">
    </div>
    <div id="progressNumber"></div>
</form>

The uploadComplete(evt) function being the callback. As you can see, it also gives you the percentage plete you can show your users.

Note: To do this you have to set the correct upload policy and CORS policy in your S3 account. – RonSper

You will run into 'cross origin' issues with ajax and iframes equally if you need access to the response.

JSONP is the only way around your 'cross-origin' issues. It is what is used by all JSON APIs that are hosted on a different domain, unless you try to use CORS which isn't supported in legacy IE versions.

If you can control the server where the form is submitted you should be able to make it return a JSONP patible response. If not, you are kind of out of luck.