如何在提交後清除模態值

我是Meteor和Javascript的新手。我已經慢慢地想出瞭如何設置一個模式表單，當我點擊一個按鈕時它將顯示出來，並且可以捕獲我的表單數據並在單擊提交時關閉表單。我卡住的地方在於，無論何時點擊按鈕添加更多數據，以前的值仍處於模態形式。我已經嘗試了大部分我發現的其他答案和例子，但我似乎無法弄清楚我需要做些什麼來使其清晰。任何建議，將不勝感激。以下是我目前有：如何在提交後清除模態值

莫代爾模板

<template name="addButton"> 
    <div class="modal fade" id="addButton"> 
    <form> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title">Add Button</h4> 
     </div> 
     <div class="modal-body"> 
     <form role="form"> 
      <div class="form-group"> 
       <label for="buttonOrder">Button Order</label> 
       <input type="text" class="form-control" name="buttonOrder"> 
      </div> 
      <div class="form-group"> 
       <label for="buttonName">Button Name</label> 
       <input type="text" class="form-control" name="buttonName"> 
      </div> 
      <div class="form-group"> 
       <label for="buttonDescription">Button Description</label> 
       <input type="text" class="form-control" name="buttonDescription"> 
      </div> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> 
     <input type="submit" value="Submit" class="btn btn-primary"/> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
    </form> 
    </div> 
</template>

莫代爾JS助手

Template.addButton.events({ 
    'submit form': function(e) { 
     e.preventDefault(); 

     var button = { 
      buttonOrder: $(e.target).find('[name=buttonOrder]').val(), 
      buttonName: $(e.target).find('[name=buttonName]').val(), 
      buttonDescription: $(e.target).find('[name=buttonDescription]').val() 
     } 
     button._id = Buttons.insert(button); 

     $('#addButton').modal('hide'); 
     $(this).removeData('#addButton.modal'); 
    } 
})

@傑里米-S

我不能讓你的建議的工作，雖然會話密鑰建議爲我提供了一個適用於Bootstrap 2但不適用於Bootstrap 3的解決方案。儘管我懷疑它是最優雅的解決方案，但我終於可以使用Bootstrap 3了。我加了IDS的元素，只是將值設置爲每個元素設置爲null，像這樣：

$('#addButton').modal('hide') 
$('#buttonOrder').val(null); 
$('#buttonName').val(null); 
$('#buttonDescription').val(null);

現在我只需要弄清楚爲什麼我不能讓它與會話密鑰和Bootstrap 3工作。

來源

2014-05-25 extension23

一種可行的方法是使用Meteor's findAll來查找模板中的輸入，然後遍歷它們並將每個輸入的值設置爲null。 findAll是一個jQuery選擇器，但在這裏僅限於模板的上下文。

Template.addButton.events({ 
    'submit form': function(e) { 
    e.preventDefault(); 

    var button = { 
     buttonOrder: $(e.target).find('[name=buttonOrder]').val(), 
     buttonName: $(e.target).find('[name=buttonName]').val(), 
     buttonDescription: $(e.target).find('[name=buttonDescription]').val() 
    } 

    button._id = Buttons.insert(button); 

    _.each(
     this.findAll("input"), 
     function(element){element.value = null} 
    ); 

    $('#addButton').modal('hide'); 
    } 
})

還要注意，而不是使用jQuery來顯示和隱藏模態的，流星的首選方法是添加和基於像一個會話密鑰的反應源DOM中徹底刪除。我會看看流星的reactivity summary有關如何做到這一點的其他指導。

來源

2014-05-25 05:31:49

如何在提交後清除模態值

回答

相關問題