JavaScript Submit Problem IE9 and Below

What I’ve got is a number of dynamically generated “cards” on a page.
Clicking anywhere on the card needs to submit over to a detail page.
Works fine in IE10, Firefox, Chrome … IE9 and below - absolutely NOT working.

I suspect it’s an issue with the <button> tag surrounding off the form contents (which lets you click anywhere on the “card”, but I’ve not found a work around yet.

So, there’s mutliple of these on a page. Each has a unique id number. This one is obviously “2”.

<form name="form2" action="category.cfm" method="post" class="theFORM" id="form2">
     <button id="cbut2" onMouseDown="submit();">
       <h3>This is a Card Title</h3>
       <p>This is some small text that goes here</p>
       <input type="hidden" name="thisCARD" value="2" />

Clicking any of the top row of cards changes the bottom row to the proper category.
Clicking any of the bottom cards takes you to a detail page.
Also tried onClick instead of OnMouseDown. Same results.
Working great outside of IE9 and below…

Does this work?

<button id="cbut2" onClick="document.getElementById("form2").submit()">

Nope. But, switching to jQuery, and moving the hidden id field outside the <button> tag finally fixed it.

    <form name="form#getCARDS.card_id#" action="category.cfm" method="post" class="theFORM" id="frm#getCARDS.card_id#">
     <button id="cbut#getCARDS.card_id#">
     <input type="hidden" name="thisCARD" value="#getCARDS.card_id#" />

  <cfoutput query="getCARDS">
    $("##card_#getCARDS.card_id#").submit(function() { return true; });

I didn’t notice the hidden field was inside the button. lol

Also, is there a reason you’re not simply using this? Seems like what you’re trying to do.

<button type="submit">

submit is the default type for a button inside a form so you don’t even need the type attribute

Just moving the hidden id field outside the <button></button> would have been enough. There is no need for jQuery here.