javascript – 如何在流星中获取表单值？

2023年3月12日 127次阅读

我收到错误Uncaught TypeError：无法读取undefined的属性’value’但是它与我调用事件的方式有关.

这是我的代码的骨架：

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事件按钮类有关,它没有返回任何值.我尝试使用提交事件,但我不知道如何检索值.

最佳答案 首先,在按钮类型属性之后添加结束,其次,因为这是一个表单,类型应该提交,然后在您的事件处理程序中,您应该听取表单提交.目前这些值不存在于您的目标,因为它只是一个按钮,当你需要在窗体上收听.

<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.

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

点赞