Question

如果我有这样的模板

<template name="my_form">
  <form name="my_form">
    <input name=" ....
  </form>
</template>

我想听“my_form”的提交事件。

我试过了：

Template.my_form.events({
  'submit form': function( event ){   // also tried just 'submit'
    console.log( 'Submitting form!' );
    event.preventDefault();
    event.stopPropagation();
    return false; 
  }
});

但没有运气。事件处理程序似乎没有注册。有什么我想念的吗？

P.S。我知道我可以通过听取提交按钮单击事件来处理表单“提交”，但我需要在此特定方案中使用表单提交事件。

Answer 1

似乎你没有遗漏某些东西。我无法重现你的问题。当textinput具有焦点时点击返回时，控制台会打印“提交表单！”如预期的那样。

我的代码，只有两个文件：

<强> form.html：

<head>
  <title>form</title>
</head>

<body>
  {{> my_form}}
</body>

<template name="my_form">
  <form name="my_form">
    <input></input>
  </form>
</template>

<强> form.js

if (Meteor.isClient) {
    Template.my_form.events({
      'submit form': function( event ){   // also tried just 'submit', both work for me!
        console.log( 'Submitting form!' );
        event.preventDefault();
        event.stopPropagation();
        return false; 
      }
    });
}

Answer 2

您可以使用常规侦听器。

$("my_form").submit(function (e) {
      e.preventDefault();
});

Answer 3

您可以创建单个提交表单事件，并有条件地检查事件目标字段。根据您插入的集合调用适当的Meteor方法。

Template.detailsViewTemplate.events({
    'submit form': function(ev){
        ev.preventDefault();

        var detail_input_field = template.$('#detail_entry');
        var message_input_field = template.$('#message_entry');

        if(detail_input_field != undefined){
            var detailFormData = {
            detail: $(ev.target).find('[name = detail]').val(),
            parentId: $(ev.target).find('[name = parentId]').val(),
            checkboxStatus: ''
            }

            Meteor.call('addDetail', detailFormData);
            $('.form-group').children().val('');

        } else if(message_input_field != undefined){
            var newMessageData = {
                listId: this.params_id,
                message: $(ev.target).find('[name = message]').val()
            }
            Meteor.call('addMessage', newMessageData);
            $('.form-group').children().val('');
        }
    }
}

如何在meteorjs模板中收听表单的提交事件？

3 个答案: