javascript - 如何在 meteor 中获取表单值？

Question

我收到一个错误 Uncaught TypeError: Cannot read property 'value' of undefined 但它与我调用事件的方式有关。

这是我的代码的框架:

HTML

<template name="register">
    <form>
        <input type="text" name="username">
        <input type="email" name="email">
        <input type="password" name="password">

        <button type="button" class="register">Register</button>
    </form>
</template>

JavaScript

Template.register.events({
    'click .register': function(e) {
        e.preventDefault();
        var getUser = e.target.username.value;
        var getEmail = e.target.email.value;
        var getPassword = e.target.password.value;

        console.log("user: " + getUser);
    }
)};

我觉得 click 事件 按钮类没有返回任何值。我尝试使用 submit 事件，但我不知道如何检索值。

Answer 1

首先，在按钮类型属性之后添加关闭 "，其次，因为这是一个表单，类型应该是 submit，然后在您的事件处理程序中应该监听表单提交。目前这些值在您的目标上不存在，因为当您需要监听表单时它只是一个按钮。

<template name="register">
    <form class="form-register">
        <input type="text" name="username">
        <input type="email" name="email">
        <input type="password" name="password">

        <button type="submit" class="register">Register</button>
    </form>
</template>

现在，我们向表单添加了一个类，更新了按钮类型。我们现在将收听表单提交:

Template.register.events({
    'submit .form-register': function(event, template) {
        event.preventDefault();
        var getUser = event.target.username.value;
        var getEmail = event.target.email.value;
        var getPassword = event.target.password.value;

        console.log("user: " + getUser);
    }
)};

虽然我没有对此进行具体测试，但这会让您走上正轨。请注意，我已将模板参数添加到事件处理程序，因为这是第二个参数。这使您也可以访问正在使用的模板，这比您现在使用事件目标的方式要好一些。查看 event maps 的文档这将讨论第二个参数返回一个模板实例，该实例具有许多有用的方法，例如 find、findAll 等，checkout template instances here .

最终，我现在首选的在提交事件中检索表单值的方法是将表单绑定(bind)到 reactive dictionary。并在那里访问它们，但它是一个更复杂的模式，需要一些脚手架。