Using jQuery.html set form with submit button

Question

I'm trying to set form for modifying bootstrap table and I'm using JQuery .html() method for that. I did step by step from Jquery API Documentation but can't get why my save button doesn't fire. Where is my mistake?

this is my plunk

JS:

$(function () {

   $("#button").click(function () {
  $('#table').bootstrapTable('refreshOptions', {
                data: data,
                detailView: false,
                filterControl: true,
                columns: [
                    {
                        field: 'name',
                        title: 'Name',
                        sortable: true,
                        editable: true,
                        filterControl: 'input'
                    }, {
                        field: 'stargazers_count',
                        title: 'Structure',
                        sortable: true,
                        editable: true,
                         filterControl: 'input'
                    }, {
                        field: 'forks_count',
                        title: 'Class',
                        sortable: true,
                        editable: true,
                         filterControl: 'input'
                    }, {
                        field: 'description',
                        title: 'Description',
                        sortable: true,
                        editable: true,
                         filterControl: 'input'
                    }
                ]
            });
    });


    $('#table').bootstrapTable({
       detailView: true,
        formatNoMatches: function () {
            return "This table is empty...";
        },

         onClickCell: function(field, value, row, $element) {
                        if (field == 'name') {
                            $element.parent('tr').find('>td>.detail-icon').click();
                             // NOTE: needs index to call to expandRow
                             var $tr = $element.parent('tr');
                             // NOTE: literally first google result: http://stackoverflow.com/questions/469883/how-to-find-the-index-of-a-row-in-a-table-using-jquery
                             var index = $("> tr",  $('#table').find('> tbody')).index($tr);
                             $('#table').bootstrapTable('expandRow',index);
                        }
                    },
      onExpandRow: function(index, row, $detail) {
      // console.log(row)
      $detail.html('<table></table>').find('table').bootstrapTable({
        columns: [{
          field: 'id',
          title: 'id'
        }, {
          field: 'status',
          title: 'stat'
        }, {
          field: 'date',
          title: 'date'
        }],
        data: row.children,
        // Simple contextual, assumes all entries have further nesting
        // Just shows example of how you might differentiate some rows, though also remember row class and similar possible flags
      });
}
});
});

$(function () {
    var $result = $('#form');

   $( "#newTable" ).submit(function( event ) {
                    alert("your changes has been saved");
                });
                $("form").on("submit", function(){
                    alert("form has been submitted.");
                    return false;
                });



    $('#table').on('click-row.bs.table', function (e, row, $element) {

        $('.success').removeClass('success');
        $($element).addClass('success');
        function getSelectedRow() {
            var index = $('#table').find('tr.success').data('index');
            return $('#table').bootstrapTable('getData')[index];
        }
         $result.html(
           '<form action="">' +
            '<table id="newTable" border="0" align="left" style="padding: 10px; margin: 10px; font-size: 14px; color: #0f0f0f">' + '<h3>'+
            '<tr  align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Name</td>' + '<td>&nbsp;</td>' + '<td><input type="text" id="frm-name" name="frm-name" value="' + getSelectedRow().name + '"/></td>' + '</tr>' +
            '<tr align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Structure</td>'  + '<td>&nbsp;</td>' +  '<td><input type="text" id="frm-structure" name="frm-structure" value="' + getSelectedRow().stargazers_count + '"/></td>'+ '</tr>'+
            '<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Class</td>' + '<td>&nbsp;</td>' +  '<td><input type="text" id="frm-class" name="frm-class" value="' + getSelectedRow().forks_count + '"/></td>'+ '</tr>'+
            '<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Description</td>' + '<td>&nbsp;</td>' +  '<td><input type="text" id="frm-description" name="frm-description" value="' + getSelectedRow().description + '"/></td>'+ '</tr>'+
            '</h3>' + '<input style="float: right; margin-top: 20%; margin-right: 15px;" class="btn btn-default" type="button" id="btn-submit-form" value="Save" type="submit"/>'
                        + '</table>' + '</form> '

        )
    });
});

working plunk

Answer 1

Your current input type for your save button is 'button' and not 'submit', which is why it is not getting submitted.

On line 104 of your table.js replace your ' And now just add the JS/jQuery for this submit event.

Answer 2

Your submit event with #newTable is table, not form.

It should be:

    $(document).on('submit', "#form form", function( event ) {
        alert("Your change has been saved");
    });