So many problems with form submitting

help
1

Hi!

I started using meteor some time ago in my new awesome project. I was struggling with forms and today found about this autoform plugin but it gives me exactly same errors as i had without it. I have created simple collection “posts”, posts_list that displays each post as well as modal windows with form that is used to add new posts. whenever i call method to create new post, I am getting exception while invoking method, missing key ‘title’.
my code looks somewhat like this (without pointless lines):

<template name="postsList">
{{#each posts}}{{>post}}{{/each}}
<a href="#">add post</a>
</template>
...
'click #addPost'(e) {
 e.preventDefault();
 var doc = {
  title: e.target.title.value,
  body: e.target.body.value
 }
 meteor.call('postInsert', doc, function(){router.go('postList'}
}
...
Meteor.methods({
 postInsert: function(doc) {
  check(doc, {title: String, body: String});
  var postId = Posts.insert(doc);
  return {_id: postId};
}});

When trying to submit exact same thing via autoform, it ends up with same error and data is not added. +i am 100% sure fields have same type as defined in schema

2

In your effort to remove “pointless lines” you also removed the lines which define where #addPost is defined.

Also: A click handler gets the element you clicked on as a parameter. If this is not something like <form><input type="submit" id="addPost" /></form> your e.target won’t contain anything regarding the form.

1 Like
3

nope, i found where was the problem. meteor couldn’t find values because if value is not submitted, its empty. For some reason meteor did not used e.target.fieldname hence empty value couldn’t be validated. i have changed to default js

var title = document.getElementById('title').value;

and it magically worked.
Looks like problem was just with e.target.title.value

4

Which is exactly what I told you. And, no, it’s not Meteor which is at fault here.

Again: The parameters given to an event handler always point to the object which invoked the event (and, of course, other stuff directly related to the event). If said object is not related to a <form /> why would you expect that the parameter includes the form’s values?

That’s pretty much standard in any language I’ve come across, be that Javascript, C#, Java, Ruby or whathaveyou.

There’s no magic in play here. It’s just a misunderstanding of how event handlers work - I strongly suggest you look them up a bit.

5

If you, as I assume you do, use Template.myTemplate.events(), then you should pass the template into the handler as well:

'click #addPost'(e, t) {
 e.preventDefault();
 var doc = {
 title: t.find("#title").value, ...
6

If you are using autoform there should be no reason to manually handle getting the data from the DOM. It handles this automatically.

7

tried. it did not handled it automatically

8

If you put a submit button inside the form, it will

9

I hate to be a negative Nancy here, but the only issues I see are due to lack comprehending the technology you are using. I think some proper study is in order.

1 Like
10

The way you’ve written it, your e.target points on the HTML element <a href...>. Blaze accepts a second parameter in the event handler allowing you to parse the DOM elements set up by your template. It would less error prone and more efficient than document.getElementById('title').value.