Javascript-Generated Submit Button Not POSTing in Firefox

Question

I have seen similar posts related to this question but none have proven useful.

I have a several javascript-generated submit buttons for a form.

PHP sets certain parameters for functions depending on which button is pushed. The problem is that the submit buttons do not get added to the POST array AT ALL if they are generated by javascript; If I put submit buttons directly into the view they work just fine. This is only a problem in Firefox

NOTE: this is not a problem with the form actually submitting - just that the name=>value of the submit button is not being passed to POST.

$('#my-total-dial').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {
        min: 0,
        max: myTotalRecords,
        title: {
          text: 'All Time'
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        name: 'All',
        data: [myTotalRecords],
        dataLabels: {
            format: '<div style="text-align:center"><span style="font-size:18px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/></div>' +
                   '<button name="my-total-records-view" class="glyphicon glyphicon-eye-open" title="View Records"></button><button name="my-total-records-csv" class="glyphicon glyphicon-file" title="Export Records to Spreadsheet"></button>'
        },
        tooltip: {
            valueSuffix: ' records'
        }
    }]

}));

In Chrome, this is what is spit out by POST:

array(3) { ["_token"]=> string(40) "XB16S144KnTue3ER6x4H8mdQO1rwxGP6BmAciYvK" ["my-total-records-view"]=> string(6) "Submit" ["user_name"]=> string(1) "1" }

And this is what I get in Firefox

array(2) { ["_token"]=> string(40) "UTKWISXMNvUfGjfFxxya8ojYXSgGc8dS5kUS5Hck" ["user_name"]=> string(1) "1" } 

Answer 1

By default <button> elements does not submit the form. Use <input type='submit'> instead.