2013-08-16 23 views
3

提交我這裏有一個的jsfiddle例如:http://jsfiddle.net/vsZhg/引導模式窗體不會淘汰賽的submit結合

我建立我的自舉模式的內部形式。問題是,除非用戶點擊提交輸入,否則敲除提交綁定從不執行。我懷疑bootstrap阻止了knockout綁定的執行,但是,我不知道如何解決這個問題。

如果按下回車鍵,模式對話框關閉,綁定功能從不執行(因此我無法發送數據)。但是,如果您點擊提交輸入,則按預期執行綁定。

下面是相關的代碼:

腳本:

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> 

回答

3

這樣做的原因是,在表格的第一個按鈕始終是默認的,所以當您點擊Enter時,您的取消按鈕被點擊。

這太問題提出了幾個解決方法: Multiple submit buttons on HTML form – designate one button as default

+0

啊,哈!你是絕對正確的。我之前已經處理過這個問題,但是,它完全放棄了我的想法。我馬上將其標記爲答案。我要將取消按鈕切換到「」以解決問題。謝謝! –

+0

你可以添加type =「button」來修復它 –