IE11 Issue with form submit button within datatables

spacerobot

I have a coldfusion page that outputs a form with each row of a table based on results from a query. The submit button is used to trigger an action off of the row. In chrome everything works fine, but in IE when I press the same button nothing happens. Here is the form code:

<table class="table table-striped table-bordered table-hover" id="example" >
<tr>
<form action="##" method="post" name="form"> 
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td><button name="submit" id="submit" type="submit" class="btn btn-large btn-primary">Email Entry</button></td>
</form>
</tr>
</table>

At the bottom of the page I have this table init code:

<script type="text/javascript">
            $(document).ready(function() {
     
                $('#example').DataTable({
                "lengthMenu": [ 10, 25, 50, 75, 100, 500, 1000],
                "responsive": true,
                "bFilter": true
             

               });
                
            });
        </script>

If I remove that javascript code the button works in IE, but obviously I do not get the datatables sorting and search features. Does anyone know what would cause this to happen and what to do to fix this?

tangerine

I'm surprised that your code works in Chrome. DataTables requires a valid HTML table, and yours is invalid.

spacerobot

Sorry I didn't have a lot of time so I didn't put all of the code in the post. This is the full table structure.

<table class="table table-striped table-bordered table-hover" id="example">
    <thead>
        <tr>
            <th width="10%" scope="col" style="padding-left:8px"></th>
            <th width="5%" scope="col"></th>
            <th width="5%" scope="col"></th>
            <th width="15%" scope="col"></th>
            <th width="18%" scope="col"></th>
            <th width="18%" scope="col"></th>
            <th width="18%" scope="col"></th>
            <th width="7%" scope="col"></th>
            <th width="5%" scope="col"></th>
            <th width="5%" scope="col"></th>


        </tr>
    </thead>
    <tbody>
        <cfoutput>
            <tr>

                <form action="##" method="post" name="form">


                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                    <td> <button name="submit" id="submit" value="" type="submit" class="btn btn-large btn-primary">Email Entry</button></td>
                </form>
            </tr>

        </cfoutput>
    </tbody>
</table>

tangerine

Your HTML is invalid. A form should not be a child element of a table, tbody or tr.

spacerobot

Ok thanks. I ended up making it an href link instead of form submit. That works.