This is a migrated thread and some comments may be shown as answers.

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

3 Answers 395 Views
Application
This is a migrated thread and some comments may be shown as answers.
CM
Top achievements
Rank 1
CM asked on 07 Jul 2013, 02:40 AM
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.

3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 09 Jul 2013, 12:50 PM
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:

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
CM
Top achievements
Rank 1
answered on 09 Jul 2013, 12:53 PM
Ok, so can I hide the button with CSS so the "Go" button on the iOS keyboard will submit instead?
0
Alexander Valchev
Telerik team
answered on 09 Jul 2013, 01:22 PM
Hello Christopher,

Yes you can hide the element with:
<input type="submit" class="km-button" style="visibility: hidden" />


Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Application
Asked by
CM
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
CM
Top achievements
Rank 1
Share this question
or