Forms 在Meteor中提交表单而不使用额外功能

我想在我的Meteor html模板中有一个表单，并在提交时将该数据插入我的MongoDB列表。我的问题是：

• 在不使用额外软件包的情况下，这是可能的吗？我可以添加一个HTML表单作为模板吗
• 提交活动是否适用于最新的Meteor
• 我已经读到我们可以使用提交按钮的点击事件：您能告诉我如何在DOM中查找输入元素的值吗？（不使用jQuery？）

---

JQuery包含在meteor中&非常简单，为什么要避免它？使用js手动遍历dom相当长

您可以使用javascript以ajax风格提交表单：

因此，您可以像往常一样在模板中使用普通格式的html：

// HTML
<form id="myform">
    <input type="text" name="firstname"/>
    <input type="text" name="lastname"/>
    <input type="text" name="email"/>
    <input type="submit" id="submit"/>
</form>


// Client JS
function submitme() {
    form = {};

    $.each($('#myform').serializeArray(), function() {
        form[this.name] = this.value;
    });

    // Do validation on 
    // form = {
    //     firstname: 'first name',
    //     lastname: 'last name', 
    //     email: 'email@email.com'
    // }

    MyCollection.insert(form, function(err) {
        if(!err) {
            alert("Submitted!");
            $('#myform')[0].reset();
        } else {
            alert("Something is wrong");
            console.log(err);
        }
    });

}

如果您讨厌jQuery&根本无法使用它

// HTML
<form id="myform">
    <input id="firstname" type="text" name="firstname"/>
    <input id="lastname" type="text" name="lastname"/>
    <input id="email" type="text" name="email"/>
    <input type="submit" id="submit"/>
</form>

// Client JS
function submitme() {

    form = {
        firstname: firstname.value,
        lastname: lastname.value,
        email: email.value
    };

    // Do validation on 
    // form = {
    //     firstname: 'first name',
    //     lastname: 'last name',
    //     email: 'email@email.com'
    // }

    MyCollection.insert(form, function(err) {
        if (!err) {
            alert("Submitted!");

            // Empty field values
            email.value = "";
            firstname.value = "";
            lastname.value = "";
        } else {
            alert("Something is wrong");
            console.log(err);
        }
    });
}

//HTML
//客户端JS
函数submitme（）{
表格={
firstname:firstname.value，
lastname:lastname.value，
电子邮件：email.value
};
//验证
//表格={
//名字：“名字”，
//姓氏：“姓氏”，
//电邮:'email@email.com'
// }
MyCollection.insert（表单、函数（err）{
如果（！err）{
警报（“已提交！”）；
//空字段值
email.value=“”；
firstname.value=“”；
lastname.value=“”；
}否则{
警惕（“有什么不对劲”）；
控制台日志（err）；
}
});
}

仅供参考，在Meteor中有一种稍微干净的方式来创建表单，而不需要所有全局jQuery引用，我发现这很混乱。它通过限定事件处理程序中提供的模板的范围，使代码更不容易出错。下面是一个使用另一个答案中描述的形式的示例：

模板代码：

<template name="foo">
    <form id="myform">
        <input type="text" name="firstname"/>
        <input type="text" name="lastname"/>
        <input type="text" name="email"/>
        <input type="submit" id="submit"/>
    </form>
</template>

Template.foo.events({'submit form' : function(event, template) {
    event.preventDefault();

    firstname = template.find("input[name=firstname]");
    lastname = template.find("input[name=lastname]");   
    email = template.find("input[name=email]");

    // Do form validation

    var data = {
      firstname: firstname.value,
      lastname: lastname.value,
      email: email.value
    };

    email.value="";
    firstname.value="";
    lastname.value="";

    MyCollection.insert(data, function(err) { /* handle error */ });

}});

---

最简单最简单的解决方案

// HTML
<template name="formTemplate">
    <form>
        <input type="text" name="firstname"/>
        <input type="text" name="lastname"/>
        <input type="submit" id="submit"/>
    </form>
</template>

// JavaScript
Template.formTemplate.events({
    'submit form': function(event, template) {
        event.preventDefault(); // prevent page reload
        var firstname = event.target.firstname.value;
        var lastname = event.target.lastname.value; 
    }
});

//HTML
//JavaScript
Template.formTemplate.events({
“提交表单”：函数（事件、模板）{
event.preventDefault（）；//防止重新加载页面
var firstname=event.target.firstname.value；
var lastname=event.target.lastname.value；
}
});

这并不能完全回答您的问题。但我会这么做的

流星加阿尔德：自动成型

您已经拥有的示例架构。。。

Books=newmongo.Collection（“图书”）；
书籍。附件（新单纯形）({
标题：{
类型：字符串，
标签：“标题”，
最多：200
},
作者：{
类型：字符串，
标签：“作者”
},
副本：{
类型：数字，
标签：“份数”，
最低：0
},
上次签出：{
类型：日期，
标签：“本书最后一次借出日期”，
可选：true
},
总结：{
类型：字符串，
标签：“简要摘要”，
可选：true，
最高：1000
}
}));想要分享我的方式它非常简单：

html:

结果是整洁的
对象{name:“…”，电子邮件：“…”}

如果您使用的是
SimpleSchema
do
check（doc，Schemas.updateProfile）通过服务器进行验证。
如果我进行jQuery事件和jQuery DOM遍历，那么我应该进行jQuery，而不是meteor。。正确的？我的意思是，我想知道Meteor是否有高效的DOM遍历自己..我不会说Meteor是这样的javascript框架，它不是用来取代JQuery而是用来将所有东西放在一起的，它仍然是Meteor，通过延迟补偿将数据反应性地放入其中&JQuery遍历DOM。它可以立即插入，而jquery本身无法做到这一点。Meteor没有任何DOM遍历功能，Handlebar，模板系统，也是一个外部框架。如果模板中恰好只有一个表单，您可以使用
submit
处理程序，而不是
单击#submit
。另外，您可以执行
$（'#myform'）[0].reset（）
而不是手动重置所有表单元素。谢谢@DavidWeldon。我修改了代码以反映这一点。@GeorgeKatsanos我也修改了代码，因此也有一个纯javascript版本。根本没有jquery。当您有一个单选按钮时，如何执行选择器？是否是template.find（'input:radio[name=“myNameForRadio”]：checked（））？另外，使用Discover Meteor book，他们使用$（e.target）.find（'[name=firstname]'）.val（）；你能解释一下使用A）$（e.target）和B）模板之间的区别吗？我明白了。只是有不同的选择器，我想出来了。有不同的选择器$（e.target）.find（“…”）使用.value属性，而template使用val（）方法。你同意吗？（我是个新手，正在努力确保术语正确无误）。请注意，$（target）也不起作用。@这只是原始javascript选择器和jQuery提供的附加功能之间的区别。确保区分您使用的是哪一个。您也可以只从函数返回false，而不包括
event.preventDefault（）
。来自：“从处理程序返回false与在事件上同时调用stopImmediatePropagation和preventDefault是一样的。”我喜欢在常见情况下这样做。但我也使用
currentTarget
来确保我处理的是实际的表单提交侦听器，而不是我所理解和理解的单击元素
// HTML
<template name="formTemplate">
    <form>
        <input type="text" name="firstname"/>
        <input type="text" name="lastname"/>
        <input type="submit" id="submit"/>
    </form>
</template>

// JavaScript
Template.formTemplate.events({
    'submit form': function(event, template) {
        event.preventDefault(); // prevent page reload
        var firstname = event.target.firstname.value;
        var lastname = event.target.lastname.value; 
    }
});

<form id="update-profile">
  <div class="form-group">
    <input type="text" required class="form-control" name="name" placeholder="Full Name" value="{{profile.name}}">
  </div>
  ...

Template.profileEditModal.events({
      'submit form': function (e, t) {
        e.preventDefault();
        var doc = {};

        t.$('input').each(function () {
          if (this.value) {
            doc[this.name] = this.value;
          }
        });
});