JavaScript Submit Problem IE9 and Below

JavaScript
1

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" />
     </button>
    </form>

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…

2

Does this work?

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

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#">
       <h3>#getCARDS.card_title#</h3>
       <p>#getCARDS.card_smtext#</p>
     </button>
     <input type="hidden" name="thisCARD" value="#getCARDS.card_id#" />
    </form>


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

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">
5

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

6

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