I would like to have a form in my Meteor html template and on submit insert that data to my MongoDB list. My questions are:
JQuery is included in meteor & very simplifying, why would you want to avoid it? Its quite long to traverse the dom manually with js
You could use javascript to submit your forms ajax style:
So you could just use normal form html in your template like usual:
// 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 protected]'
// }
MyCollection.insert(form, function(err) {
if(!err) {
alert("Submitted!");
$('#myform')[0].reset();
} else {
alert("Something is wrong");
console.log(err);
}
});
}
You could bind the select button to insert the data when clicked:
Event map binding:
Template.templatename.events({
'submit' : function(event) {
event.preventDefault(); //prevent page refresh
submitme();
}
});
If you HATE jQuery & cant use it at all
// 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 protected]'
// }
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);
}
});
}
submit handler rather than click #submit. Also, you can do $('#myform')[0].reset() rather than manually resetting all form elements. –
Prolocutor [0] because the selector is to an id, there can only be one result? –
Devalue [0]. This trick is a little confusing because it mixes jQuery with a native DOM manipulation function. jQuery selectors always return an array, whereas reset is a DOM function and requires an instance of a form. See this question. –
Prolocutor onclick= or else they'll be both be fired, I only used that to make it easy to understand. I've removed it above. If you don't have jquery you can add it with meteor add jquery in your terminal. –
Devalue Just for reference, there is a slightly cleaner way to do forms in Meteor without all the global jQuery references, which I find to be messy. It makes code a lot less error prone by scoping to the template, which is provided in the event handler. Here's an example using the form described in the other answer:
Template code:
<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>
Event handler:
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 */ });
}});
template.find(query) is the way to go, just noting that it is the same as $(query, event.target). –
Imf The most simple and easiest solution of all.
// 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;
}
});
event.preventDefault(). From the docs: "Returning false from a handler is the same as calling both stopImmediatePropagation and preventDefault on the event." –
Nones currentTarget to make sure I'm handling the actual form submissions listener rather than a clicked element which is as I understand it and as discussed here. –
Confidant Wanted to share my way it's real simple:
html:
<form id="update-profile">
<div class="form-group">
<input type="text" required class="form-control" name="name" placeholder="Full Name" value="{{profile.name}}">
</div>
...
JS
Template.profileEditModal.events({
'submit form': function (e, t) {
e.preventDefault();
var doc = {};
t.$('input').each(function () {
if (this.value) {
doc[this.name] = this.value;
}
});
});
Results in nice and clean Object {name: "...", email: "..."}
And if you're using SimpleSchema do check(doc, Schemas.updateProfile); over ther server for validation.
This isn't exactly answering your question. But here's how I'd do it.
meteor add aldeed:autoform
sample schema you already have...
Books = new Mongo.Collection("books");
Books.attachSchema(new SimpleSchema({
title: {
type: String,
label: "Title",
max: 200
},
author: {
type: String,
label: "Author"
},
copies: {
type: Number,
label: "Number of copies",
min: 0
},
lastCheckedOut: {
type: Date,
label: "Last date this book was checked out",
optional: true
},
summary: {
type: String,
label: "Brief summary",
optional: true,
max: 1000
}
}));3. books.tpl.jade (from mquandalle:jade)
+quickForm collection="Books" id="insertBookForm" type="method" meteormethod="insertBook"
4.
Meteor.methods({
'insertBook': function (doc) {
// server side validation, insert, error etc...
}
})This way you get client side validation for free, bootstrap styling for free, customise field visibility or styles if you need to. For 5 minutes of development, this is a pretty good return. I'd use the powerful packages that others have put time and thought into and build rapidly on top of that.
© 2022 - 2024 — McMap. All rights reserved.