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是未定义的。我该如何解决？

这是我的问题的有效解决方案。我将$_FILES["files"]["tmp_name"]替换为name，因此JQuery可以访问这些值。

<强> HTML

id

<强>的JavaScript

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

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>

Bye Enjoy Coding !!!!

Answer 5

您没有获得与您的活动绑定的其他内容。因为按钮不是提交输入，所以它不会随之汇总所有其他输入（如Meteor文档中所示）。

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

如何在流星中获得表格值？

5 个答案: