5

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.

Paul
  • 4,422
  • 5
  • 29
  • 55
  • http://jsfiddle.net/mf63k/ - As is, It seems to work in all browsers?, perhaps you have invalid HTML or Javascript somewhere causing this issue? – Anil May 22 '13 at 14:22
  • 1
    @JustAnil Your fiddle is not working in IE10 for me. Button just doesn't do anything. – Paul May 22 '13 at 14:25
  • Still unsupported in IE11 – Crescent Fresh Mar 02 '14 at 13:07
  • Possible duplicate of [polyfill html5 input "form" attribute](http://stackoverflow.com/questions/17742275/polyfill-html5-input-form-attribute) – taber Apr 17 '17 at 20:24

1 Answers1

8

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/

Anil
  • 21,730
  • 9
  • 73
  • 100
  • 1
    you might want to use canisue.com as the source of listed support, it is more uptodate. http://caniuse.com/#search=Form%20features. – jmoreno Aug 07 '15 at 05:46
  • @jmoreno good idea, must've answered this before I had come across caniuse, I've updated the question with the link. thanks! – Anil Aug 07 '15 at 19:08
  • I found your answer on the related tab, from a dup of the question -- the accepted answer had a workaround/polyfill – jmoreno Aug 07 '15 at 19:23
  • 1
    $('button[type="submit"]).on('click tap', function(e){ if ($(this).attr('form')) { e.preventDefault(); $('#" + $(this).attr('form') ).trigger('submit'); } }); – Sasha Mar 04 '16 at 14:29