Data bound submit event not firing on form (fires on test button)

[CM]

This one is driving me nuts. I have a form inside of my mobile application such as this:

<form data-bind="event: { submit: submitJbSearch }">
        <ul data-role="listview">
            <li>
                <label>Job
                    <input type="text" placeholder="Job Number" data-bind="value: test" />
                </label>
            </li>
            <li>
                <label>Status
                    <select data-bind="options: statuses">
                    </select>
                </label>
            </li>
            <li>
                <label>Customer
                    <input type="text" placeholder="Customer" />
                </label>
            </li>
            <li>
                <label>PO#
                    <input type="text" placeholder="PO#" />
                </label>
            </li>
        </ul>
    </form>

I'm using the knockout data binding of submit here (also tried the events Kendo binding and the event and submit knockout binding) and the function that I'm bound to is not firing when hitting the enter key inside of Chrome or on my iPhone when hitting the 'Go' button on the keyboard.

I also added a button to the bottom of the form for a sanity check to ensure my knockout VM function was firing. Here is the button code:

<a href="#" data-bind="click: submitJbSearch" data-role="button">Submit</a>

And my VM:

define('app/vm.jobboss',
['jquery', 'ko', 'app/config'],
function ($, ko, config) {
var 
statuses = ko.observableArray(config.jobbossJobStatuses),
test = ko.observable('Test Value'),

// Methods
submitJbSearch = function() {
alert(test());
};

return {
statuses: statuses,
test: test,
submitJbSearch: submitJbSearch
};
});

I feel as if I'm going insane. I have a feeling that this is something dumb I'm missing. 

I apologize for the bad formatting, but the forums kept saying "Invalid post content" when I was trying to post code blocks.

[Alexander Valchev]

Hello Christopher,

Thank you for getting in touch with us.

I believe that the problem comes from the fact that there is no submit input element inside the form. Please try the following:

<div id="foo" data-role="view" data-model="viewModel">
    <form data-bind="events: { submit: onSubmit }">
        <ul id="listview" data-role="listview">
            <li>
                <label>Job
                    <input type="text" placeholder="Job Number"/>
                </label>
            </li>
            <li>
                <label>Customer
                    <input type="text" placeholder="Customer" />
                </label>
            </li>
            <li>
                <label>PO#
                    <input type="text" placeholder="PO#" />
                </label>
            </li>
        </ul>
        <input type="submit" class="km-button" />
    </form>
</div>

For your convenience I prepared a small sample:

• http://jsbin.com/avuwih/2/edit
  
  

Regards,
Alexander Valchev
Telerik

[CM]

Ok, so can I hide the button with CSS so the "Go" button on the iOS keyboard will submit instead?

[Alexander Valchev]

Hello Christopher,

Yes you can hide the element with:

<input type="submit" class="km-button" style="visibility: hidden" />

Regards,
Alexander Valchev
Telerik