如何在提交后清除模态值

How to clear modal values after submitting

本文关键字：清除 模态 提交      更新时间：2023-09-26

我是流星和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>

Modal JS Helper

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');
    }
})

@Jeremy-s

我无法让你的建议工作，虽然会话密钥的建议给了我一个解决方案，做的工作与Bootstrap 2，但不与Bootstrap 3。我最终使用Bootstrap 3完成了一些工作，尽管我怀疑它是否是最优雅的解决方案。我为元素添加了id，并将每个元素的值设置为null，如下所示:

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

现在我只需要弄清楚为什么我不能让它工作与会话密钥和引导3

一种可能的方法是使用Meteor的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');
  }
})

还请注意，Meteor的首选方法不是使用jquery来显示和隐藏模态，而是基于响应源(如Session key)将其完全从DOM中添加和删除。关于如何做到这一点，我想看看Meteor的响应性摘要，以获得额外的指导。

相关文章：