提交按钮可在Chrome中使用，但不能在Firefox或IE中使用

Question

I have a submit button which seems to be clickable in Chrome but not in FF or IE. Any help would be appreciated! I feel like the formatting of the button is incorrect.

  <button> <img src="http://button_image.png" onclick="mySubmit();" ></button>

The JQ attached to the mySubmit is:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>
function mySubmit(){
    var myForms = $("form");
    myForms.each(function(index) {
        var form = myForms.eq(index);
        var serializedForm = form.serialize();
        serializedForm += '&s_referer_fname='+$('#s_refererFname').val();
        $.post("http://post.aspx", serializedForm, function (data, status) {
            if (status === "success"){
                window.location.href= "http:url.aspx?";
            }  
        });   
    });
}
</script>

Answer 1

In FF and IE it seems the onclick event is captured by the button and not the image tag.

If you want to trigger the event cross-browser assign it to the button. That way it gets propagated up from the image in browsers that raise it from the image while other browsers capture it on the button right away.

<button onclick="mySubmit();"> <img src="http://button_image.png" ></button>

Will work in FF, IE and Chrome ► https://jsfiddle.net/aspqwc3p/1/

Answer 2

If you want an image to be a submit button you you should use the input tag with the type="image" attribute:

 <input type="image" src="http://button_image.png" onclick="mySubmit();" />

Note that inside your mySubmit function you should disable the default behavior using preventDefault() :

function mySubmit() {
    this.preventDefault();

Answer 3

It's generally recommended not to put any JavaScript in your HTML. Try giving your button an ID and using

$('#yourid').on('click', function(e) {
  e.preventDefault();
  .... your code
});

in your javascript. (and put your script tag at the very end of your html)