Trigger event not happening in Firefox and Safari - php

Question

I have an issue where my trigger event is not happening in Firefox and Safari but works in Chrome.
The trigger event is called here:
<script>
function capture() {
//console.log("function is running");
jQuery('#square').html2canvas({
onrendered: function (canvas) {
var url;
url = canvas.toDataURL("image/png");
jQuery('#img_val').val(canvas.toDataURL("image/png"));
jQuery("#buttonSubmit").trigger( "click" );
}
});
}
</script>
It's triggered from a button in a form:
<form name="addpro" style="float:right;" method="post">
<input id="textInput" name="textInput" type="hidden" value="Vælg tekst, farve mv. under skiltet">
<input id="text2Input" name="text2Input" type="hidden" value="">
<input id="størrelseInput" name="størrelseInput" type="hidden" value="155x60">
<input id="formInput" name="formInput" type="hidden" value="Firkant">
<input id="farveInput" name="farveInput" type="hidden" value="Sort">
<input id="typeInput" name="typeInput" type="hidden" value="Messing Standard">
<input id="fastgøringInput" name="fastgøringInput" type="hidden" value="Skruer">
<input id="fontInput" name="fontInput" type="hidden" value="Arial">
<input id="fontSizeLine1Input" name="fontSizeLine1Input" type="hidden" value="6">
<input id="fontSizeLine2Input" name="fontSizeLine2Input" type="hidden" value="6">
<input id="priceInput" name="priceInput" type="hidden" value="470">
<input type="hidden" name="img_val" id="img_val" value="tape.png" />
<button onclick="capture();" class="buttonSign" value="Læg i kurven" />Læg i kurven</button>
<input class="buttonSign hidden" id="buttonSubmit" type="submit" name="addcustomcarts" value="Læg i kurven" />
</form>
As you can see I want to run the function capture(); before submitting the form! This works in chrome but not in firefox and safari - what's wrong here?

Answer 1

I was initially unable to replicate the issue via JSFiddle. I had to adjust a few things. With the following HTML:
<div id="square">
</div>
<form name="addpro" style="float:right;" method="post">
<input id="textInput" name="textInput" type="hidden" value="Vælg tekst, farve mv. under skiltet" />
<input id="text2Input" name="text2Input" type="hidden" value="" />
<input id="størrelseInput" name="størrelseInput" type="hidden" value="155x60" />
<input id="formInput" name="formInput" type="hidden" value="Firkant" />
<input id="farveInput" name="farveInput" type="hidden" value="Sort" />
<input id="typeInput" name="typeInput" type="hidden" value="Messing Standard" />
<input id="fastgøringInput" name="fastgøringInput" type="hidden" value="Skruer" />
<input id="fontInput" name="fontInput" type="hidden" value="Arial" />
<input id="fontSizeLine1Input" name="fontSizeLine1Input" type="hidden" value="6" />
<input id="fontSizeLine2Input" name="fontSizeLine2Input" type="hidden" value="6" />
<input id="priceInput" name="priceInput" type="hidden" value="470" />
<input type="hidden" name="img_val" id="img_val" value="tape.png" />
<button id="buttonCart" class="buttonSign" value="Læg i kurven" />Læg i kurven</button>
<input class="buttonSign hidden" id="buttonSubmit" type="submit" name="addcustomcarts" value="Læg i kurven" />
</form>
I could execute the following JQuery:
jQuery(document).ready(function(){
jQuery("form[name='addpro']").submit(function(e){
e.preventDefault();
console.log("Form Submitted");
});
jQuery("#buttonCart").click(function(){
html2canvas(jQuery("#square"),{
onrendered: function(canvas){
var imgVal = canvas.toDataURL("image/png");
jQuery("#img_val").val(imgVal);
console.log("Image rendered: " + imgVal);
},
logging: true
});
jQuery("#buttonSubmit").click();
});
});
My jsfiddle: http://jsfiddle.net/Twisty/673q4dmm/10/
This includes the html2canvas v0.4.0 and does seem to work, yet submits the form twice. This might be an issue with the way this plugin works. I have yet to found a work around.