Unconsistent results because of asynchronous form submit?

Question

I'm trying to convert a canvas to a Jpeg image and put it into a hidden field of a form, and then submit the form.

  function createBlob() {
     var imageblob = canvas.toDataURL('image/jpeg', 0.5);

      document.getElementById("id_hidden_preview_field").value = imageblob; // Here we put the imageurl blob into the hidden_preview_field.

      // Here we submit the form with the 
      $("#design").submit();
      alert("after submit");
}

Here is the code of the form:

<div class="container">

<h2>Add a design</h2>

<form id="design" enctype="multipart/form-data" method="post"><input type="hidden" name="csrfmiddlewaretoken" value="qrGJSSQADxYItnN0TKUUPJA3JExfaFaP">
<input id="id_hidden_preview_field" name="hidden_preview_field" type="hidden"></p>
<!--<input type='submit' value='Save' />-->
<button id="gif" onclick="createBlob()">Save</button>
    </form></div>

For some reason, when I don't put the alert (alert("after submit" + new Date().getTime());), the form gets sent without the image inside of the hidden field.

And when I DO PUT the alert, it gets sent without problems.

It makes me think that there is an issue with the form submit that destroys one of the DOM elements that it needs to send.

Does anyone now if it's really asynchronous, and if it's not that, how can I make sure that $("#design).submit(); gets called only AFTER the image gets copied into the hidden field, or maybe WITHOUT destroying the DOM elements.

Thanks a lot!

It looks like that when calling the function submit, it gets done asynchronously and destroys the elements it needs to send BEFORE sending them. What makes me think that is that if I put the alert, it works fine (blocks the thread) — jhagege, Sep 15 '14 at 14:15

score 2 · Answer 1 · answered Sep 16 '14 at 05:50

I have modified some parts of your code and used JavaScript's addEventListener function to add the click event listener to the button, instead of HTML's onclick attribute.

So here is the code:

HTML

<canvas id="myCanvas"></canvas>
<div class="container">

<h2>Add a design</h2>
    <form id="design" enctype="multipart/form-data" method="post">
        <input type="hidden" name="csrfmiddlewaretoken" value="qrGJSSQADxYItnN0TKUUPJA3JExfaFaP" />
        <input id="id_hidden_preview_field" name="hidden_preview_field" type="hidden" />
        <button id="gif">Save</button>
    </form>
</div>

As you can see I have added the canvas tag (just for demo) and removed onclick of Save button.

JavaScript

/* Some drawing on canvas */
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

/* Get the needed elements from the DOM */
var form = document.getElementById('design'),
    saveButton = document.getElementById('gif'),
    hiddenField = document.getElementById('id_hidden_preview_field');

/* Add click listener on save button click */
saveButton.addEventListener('click', createBlob, false);

/* The click handler function */
function createBlob() {
    var imageblob = canvas.toDataURL('image/jpeg', 0.5);

    hiddenField.value = imageblob; // Here we put the imageurl blob into the hidden_preview_field.

    // Here we submit the form with the 
    form.submit();
}

Here I added some code for drawing on canvas, fetched and cached the elements, added the event listener on save button. The createBlob is almost the same as in your code.

You can check the live example here in JSFiddle.

When you hit the Save button, the JSFiddle gives an error, because you can't submit forms there.

BUT, if you open up the Chrome dev tools and go to the Network tab, you can see, that the request contains the blob. You can check the same in Firefox too, using Firefox dev tools or using Firebug extension (the tab name is Net).

Why does using `addEventListener` instead of the `onclick` attribute solve the problem? — Bergi, Sep 16 '14 at 19:48
It is hard to answer. The reason I used addEventListener is because I got an error "createBlob is undefined", when used onclick. — Karlen Kishmiryan, Sep 16 '14 at 21:33
That error only comes from [a wrong jsfiddle configuration](http://stackoverflow.com/q/5431351/1048572), and is not related to the OPs question. If that was the only change you made to "solve" the problem, you probably should delete your answer. — Bergi, Sep 17 '14 at 13:21
The answer is also demonstrates a **working** solution with JSFiddle. If you check the code, there are more differences between it and the original code, besides the `addEventListener`. — Karlen Kishmiryan, Sep 17 '14 at 13:33
Would you mind to explain what these are, how they work better, and why the original code caused problems? — Bergi, Sep 17 '14 at 13:38
Maybe the reason was the incorrect use of jQuery or something like that. I have provided a solution which works! If it doesn't meet your needs (*and it shouldn't have to*) you can downvote the answer, I will not mind. — Karlen Kishmiryan, Sep 17 '14 at 14:13

Unconsistent results because of asynchronous form submit?

1 Answers1