Check out my jsFiddle example by clicking here.
I am currently working on a form within a bootstrap modal. The problem I'm facing is that the knockout submit binding doesn't get executed unless the user clicks on the submit input. It seems like bootstrap might be interfering with the knockout binding, but I'm not sure how to resolve this issue.
Pressing the enter key closes the modal dialog without executing the binding function (which means I can't send the data). However, clicking on the submit input triggers the binding as expected.
Below is the excerpt of relevant 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>