Bootstrap modal form won't submit with knockout's submit binding

Question

I have a jsFiddle example here: http://jsfiddle.net/vsZhg/

I'm building a form inside of my bootstrap modal. The issue is that unless the user clicks on the submit input, the knockout submit binding is never executed. I suspect that bootstrap is preventing the knockout binding from executing, however, I'm not sure how to solve this problem.

If you hit the enter key the modal dialog closes and the binding function is never executed (as a result I can't send off the data). However, if you hit the submit input, the binding is executed as expected.

Here is the related code:

Script:

function ArticleViewModel() {
    var self = this;

    self.SendArticleName = ko.observable('');
    self.SendArticleEmail = ko.observable('');

    self.SendArticle = function() {
        $.ajax('http://example.com', {
            data: ko.toJSON({ name: self.SendArticleName, email: self.SendArticleEmail }),
            type: "post", contentType: "application/json",
            success: function(result) {
                $('#share-modal').modal('hide');
            }
        });
    };

}

var articleViewModel = new ArticleViewModel();

ko.applyBindings(articleViewModel);

HTML:

<div id="share" class="row article-section">
    <div class="span12">
        <h4>Share</h4>
        <a class="btn btn-large" role="button" data-toggle="modal" href="#share-modal"><i class="icon-envelope"></i> Share This Article</a>

        <div id="share-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <form class="form-horizontal" data-bind="submit: SendArticle" class="modal-form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel">Share</h3>
                </div>
                <div class="modal-body">
                    <p>Who would you like to send the article to?</p>
                    <br />
                        <div class="control-group">
                            <label class="control-label">Name</label>
                            <div class="controls">
                                <input type="text" placeholder="Name" data-bind="value: SendArticleName" />
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label">Email</label>
                            <div class="controls">
                                <input type="text" placeholder="Email" data-bind="value: SendArticleEmail" />
                            </div>
                        </div>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                    <input type="submit" value="Send" />
                </div>
            </form>
        </div>
    </div>
</div>

score 3 · Accepted Answer · edited May 23 '17 at 12:20

3

The reason for this is that the first button in the form is always the default, so your cancel button is being clicked when you hit Enter.

This SO question suggests a few workarounds: Multiple submit buttons on HTML form – designate one button as default

edited May 23 '17 at 12:20

Community

1
1

answered Aug 16 '13 at 15:21

DaveRead

3,371
1
21
24

Ah-ha! You're absolutely right. I've dealt with that before, but, it totally slipped my mind. I'll mark this as the answer shortly. I'm going to switch my cancel button to an `` to get around the issue. Thanks! – Justin Helgerson Aug 16 '13 at 15:24
you can just add type="button" to fix it – nathan hayfield Aug 16 '13 at 22:35

Bootstrap modal form won't submit with knockout's submit binding

1 Answers1