Javascript 如何在meteor中获取表单值？

我收到一个错误

uncaughttypeerror:无法读取未定义的属性“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>

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

---

我觉得这与

click事件

button类有关，它不返回任何值。我尝试使用<代码>提交事件< /代码>，但我不知道如何检索值。

我会考虑直接从元素中获取值。因此，在click handler函数中，您将有：

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

---

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

我非常喜欢您的建议@Shi ii，使用JQuery。但每次我使用JQuery时，有时我的代码会停止运行，并说JQuery未定义。我怎样才能修好它

这是解决我问题的有效方法。我将

name

替换为

id

，以便JQuery可以访问这些值

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>

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

---

首先，添加结束

“

在按钮类型属性之后，其次，由于这是一个表单，因此类型应该是

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>

虽然我没有具体测试过，但这会让你走上正轨。请注意，我已将模板参数添加到事件处理程序中，因为这是第二个参数。这使您可以访问正在使用的模板，这比您现在使用事件目标的方式稍微好一点。看一看文档，其中将讨论返回模板实例的第二个参数，该模板实例具有许多有用的方法，如find、findAll等、checkout

---

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

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

如果您将

寄存器

替换为

，您将获得所需的行为（其中值将传递给事件处理程序）；您的处理程序将看起来像

Template.register.events({
“提交”：函数（e）{…

，在其他方面保持不变。

试试这种方法这是个好方法 将此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>

登记

---

再见，享受编码！！！！

这将比访问目标值或已经可用的模板实例慢得多，因为您正在跳入DOM中获取每个值。如果这是一个快速的小原型，这不是一个问题，但仍然是一个糟糕的实践。我会记住这一点，是的，我正在原型化这只是在玩Meteor.js framework.似乎是一个不错的框架，我也很喜欢。只需添加一点。复选框在Chrome中有缺陷，即使没有，也会返回“on”。您必须将其包装在jQuery中进行检查：让checkboxValue=$（event.target.checkboxName）。是否（“：checked”）；

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