为什么我的提交表单不被执行在我的流星应用程序

Why is my submit form not being executed in my Meteor app?

本文关键字：我的 流星 应用程序 执行 提交 表单 为什么      更新时间：2023-09-26

我在我的流星应用程序中有这个HTML:

<template name="addPerson">
   . . .
   <input id="inputbuttonPerson" name="inputbuttonPerson" type="submit" value="Save Person">
</template>

…以及submit表单的Javascript事件处理程序:

Template.addPerson.events({'submit form': function(event, template) {
    alert('reached addPerson.submit form');
    console.log('reached addPerson.submit form');
    event.preventDefault();
    var firstname = template.find('#firstName').value;
    . . .

…然而，"提交"按钮并没有触发;我没有看到警报，也没有控制台日志文本，也没有记录添加到MongoDB后，我捣坏提交按钮(inputbuttonPerson)。

为什么模板的提交按钮事件处理程序不响应提交按钮的点击?

您提供的信息不充分。我将试着从你提出的问题中勾勒出整个画面。

让我们假设你有一个模板:

<template name="addPerson">
    <form action="" class="form" method="">
        <input type="text" class="form-control" id="firstName" name="firstName">
        <input type="submit" class="btn" id="inputbuttonPerson" name="inputbuttonPerson">
    </form>
</template>

重要:

  1. 实际上有一个form元素。你可以绑定到这个元素来监听它触发的事件。
  2. 我们有firstName id的input，因此我们可以稍后参考它。
  3. 我们没有显式地将任何值绑定到它，但是可以将它绑定到一个响应性数据源。
  4. 我使用您的语法来放置提交元素，尽管我个人会使用button元素。但是没关系。

，然后定义事件侦听器:

Template.addPerson.events({
    'submit form': function (event, template) {
        console.log('reached addPerson.submit form');
        console.log(event.target.firstName.value);
        event.preventDefault();
    }
});

还有几件事需要考虑:

  1. 我们引用Template对象的addPerson属性，即精确地引用上面定义的模板。
  2. 事件是submit form，这意味着它只在用户提交表单时触发。这不是简单的点击按钮。它可以通过[type=submit]元素或按return键在任何表单字段中触发。
  3. 与事件绑定的函数有两个参数:event对象和template实例对象。实际上，没有必要使用后者。只要简单地event对象就足够99%的时间。
  4. 我们console.log event.target.firstName的值。event.target对象包含事件目标的所有子元素。因为我们正在监听表单的事件，target就是表单，所以event.target对象包含表单的子对象。可以通过name s访问表单的子窗体，因此可以访问event.target.firstName。
  5. 特定目标子元素的value属性提取DOM元素的value属性。输入字段有值。event.target.firstName.value表达式将返回在事件被触发的时刻输入到字段中的任何内容。
  6. 和event.preventDefault()不被重定向到任何URL定义为action的形式。

这个设置工作得很好。请检查一下你的代码，看看你漏掉了什么特别的地方。你可以在表单层次结构中放置错误的元素，这是我认为根据你遇到的问题很可能出现的情况。

相关文章：