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

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 event 按钮类有关，它不返回任何值。我尝试使用submit event，但我不知道如何检索值。

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。

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

Answer 2

我会考虑直接从元素中获取值。所以在点击处理函数中你会有：

var name = document.getElementById('idOfUsernameInputField').value;

并将此复制到您的所有字段。

Answer 3

我很喜欢你的建议@Shi-ii，使用 JQuery。但是每次我使用 JQuery 时，有时我的代码会停止运行并说 JQuery 未定义。我该如何解决？

这是我的问题的有效解决方案。我将name 替换为id，这样JQuery 就可以访问这些值了。

HTML

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

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

JavaScript

Template.register.events({
    'click .register': function(e) {
        e.preventDefault();
        var getUser = $("#username").val();
        var getEmail = $("#email").val();
        var getPassword = $("#password").val();
    }
});

Answer 4

试试这个方法很好 把这个js写成全局

$.fn.searlizeObject = function() {
  var array = this.serializeArray() || [];
  var formData = {};
  array.forEach(function(formElem) {
     formData[formElem.name] = formElem.value;
  });
  return formData;
}

现在叫这个

Template.register.events({
  'click .register': function(e) {
   var data = $("#userForm").searlizeObject();
   console.log('my form data is ',data);
});

在此您必须在表单中写入 id，以便我们可以从表单中获取所有数据 在你的代码中这样写

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

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

再见，享受编码！！！！

Answer 5

您没有将其他内容绑定到您的活动。因为该按钮不是提交输入，所以它不会使用它汇总所有其他输入（如 Meteor 文档中所示）。

如果您将<button type="button" class="register">Register</button> 替换为<input type="submit" class="button register" value="Register">，您将获得所需的行为（将值传递给事件处理程序）；你的处理程序看起来像 Template.register.events({ 'submit': function(e){...，否则保持不变。