Any way to support/shim button form attribute in IE10?

Question

I've been using HTML5's button form attribute to have my submit button show up outside of the form and still trigger my submit.

My form looks something like this:

<article>
  <header>This is my form</header>
  <section>
    <p>Something explaining what is happening on this form.</p>
    <form id="myform" action="/submit" name="myform">
      <input type="text" name="thing">
    </form>
  </section>
  <footer>
     <button type="submit" form="myform">Submit</button>
  </footer>
</article>

I have this working fine in Chrome/Firefox/Safari, but I went to test it in IE10 today and the form doesn't submit!

Besides redesigning all of my pages to not use the form= attribute, does anyone know how to get around this? I want it to work like a normal submit button inside a form, where hitting enter in the text field will submit the form as well as clicking the button.

I'd like to avoid adding click events and listening for enter on text fields to trigger the submit in JavaScript if possible.

Answer 1

It seems the attribute form="myForm" is not supported on IE.

View the table here for more info: http://caniuse.com/#search=Form%20features

The only way to replicate this will be to use/create a javascript polyfill to replicate the desired behaviour.

You can find a list of cross-browser polyfills here:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

I couldn't find one to fill the form behaviour (but only looked for a min, so check yourself).

I think you will have to write your own custom polyfill for this.

A simple inline onclick would look like this:

<button 
    type="submit"
    form="myform"
    onclick="javascript:getElementById(this.getAttribute('form')).submit();"
>Submit</button>

JSFiddle: http://jsfiddle.net/mf63k/4/