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

4 posts, 0 answers
  1. CM
    CM avatar
    12 posts
    Member since:
    Nov 2012

    Posted 06 Jul 2013 Link to this post

    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.
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 09 Jul 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. CM
    CM avatar
    12 posts
    Member since:
    Nov 2012

    Posted 09 Jul 2013 Link to this post

    Ok, so can I hide the button with CSS so the "Go" button on the iOS keyboard will submit instead?
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 09 Jul 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready