KnockoutJS submit binding not working with foreach

Question

Hello I am unable use knockout 'submit' binding with 'foreach' binding. I cannot figure out what is mistake here. Please help me find my mistake.

My view model is like this:

function poReceivingModel(){
    var self = this;
    var initial_row = new poReceivingRowModel();
    self.rows = ko.observableArray([initial_row]);
    self.saveAndAdd = function(formElement){
        alert('entered into function');
        var row = new poReceivingRowModel();
        self.rows.push(row);
    };
};

function poReceivingRowModel(){
    var self = this;
    self.building = ko.observable();
    self.isele_abc = ko.observable();
    self.isele_num = ko.observable();
    self.isele_floor = ko.observable();
};

And my html binded to 'viewmodel' is like this:

<tbody data-bind="foreach: rows">
    <form data-bind="submit: $parent.saveAndAdd">
        <tr>
            <td>
                <!-- input field here -->
            </td>

            <td>
                <!-- input field here -->
            </td>

            <td>
                <!-- input field here -->
            </td>
            <td>
                <!-- input field here -->
            </td>
            <td>
                <button type="submit">Save and Add</button>
            </td> 
        </tr>
    </form>
</tbody>

The problem is when I click on 'Add and Save' button 'saveAndAdd' function from 'poReceivingModel' is not called. I do not get any alert message. I tried calling that function with 'click' binding on 'button' element. The function get called this way ie I get alert message.

UPDATE: In firebug I see form tag is closed just after and button is out of 'form' tag.

Answer 1

I found that form tag cannot be used inside table tag. Solution is table tag can be put inside form tag . If we do not want to do so we can change the table tag to div but this may not give you desired output.