Autoform manual submit

Question

I'm using Autoform for my meteor app and I want to submit the form manually using javascript. I've tried:

$('form#myFormId').submit();

and

document.forms['myFormId'].submit();

and neither of them work. The form is not being submitted and none of the call back functions (eg. onSuccess) are being called. I want to do this because I want to inject javascript in my android webview, which I'm using to display my website in my android app.

EDIT: I think the form is being submitted, but none of the Autoform functions are being called, ie. nothing is being inserted into the collection the callbacks aren't working. Right now, it just redirects to the same webpage with the input content in the url (since I didn't specify an action for my form, since I don't need one if I'm using autoform and meteor).

Answer 1

When dealing with meteor-autoform, a good thing to do is to always enable the debug mode while in development:

if (Meteor.isClient)
    AutoForm.debug()

in some development.js file somewhere in your app.

Now, having your autoform not triggering the methods attached can occur when:

• the id of your form is not unique on your page and autoform is hooked to this other id and doesn't detect your form submission. I have a strong feeling this could be the case here.
• you have some non-optional things in your schema preventing the form to be submitted as long as all the mandatory fields are not populated.
• you have somewhere in your events.js a click yourformbutton event being called, preventing the actual autoform event listener to fire when submit (but this should not be the case since submitting through .submit() does not work either.

Another good way to understand what's going on is to use autoform hooks like: onSubmit: function(insertDoc, updateDoc, currentDoc), onSuccess: function(result), onError: function(error). On submit is particularly interesting to examine your data flow.

More details about those hooks here : https://github.com/aldeed/meteor-autoform#callbackshooks

Answer 2

This may not be the best approach, but here is how I was able to manually submit my form. Inspired by this approach.

I have the auto form defined like so

{{#autoForm schema=postFormSchema id="formId"}}

Then I defined an onSubmit hook to with return false so that I can manually call my meteor method from my client.

onSubmit: function(insertDoc, updateDoc, currentDoc) {
  //Do some custom async js here as required,
  //Then I call my meteor method directly from obSubmit hook
  Meteor.call("addPost", insertDoc, function (error, post) {});
  //reset the form.
  AutoForm.resetForm('formId');
  return false;
}

Note: onSubmit is not called if you have type=method and are using a meteor method for your AutoForm submission. mentioned here

The advantage of doing it like this is the AutoForm handles validation, and attempts submission and I can perform some customizations in the onSubmit method. (Ensure to call check on the server methods as well using your AutoFormSchema).