Autoform 手动提交

Posted 2023-03-08

【中文标题】Autoform 手动提交

【英文标题】：Autoform manual submit

【发布时间】：2015-12-01 00:55:41

【问题描述】：

我正在为我的流星应用程序使用 Autoform，我想使用 javascript 手动提交表单。我试过了：

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

和

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

它们都不起作用。没有提交表单，也没有调用任何回调函数（例如 onSuccess）。我想这样做是因为我想在我的 android webview 中注入 javascript，我用它来在我的 android 应用程序中显示我的网站。

编辑：我认为表单正在提交，但没有调用任何 Autoform 函数，即。没有任何东西被插入到集合中，回调不起作用。现在，它只是重定向到与 url 中的输入内容相同的网页（因为我没有为我的表单指定一个操作，因为如果我使用自动表单和流星，我不需要一个操作）。

【参考方案1】：

这可能不是最好的方法，但这是我手动提交表单的方法。 Inspired by this 接近。

我有这样定义的自动表单

#autoForm schema=postFormSchema id="formId"

然后我用return false 定义了一个onSubmit 挂钩，以便我可以从我的客户手动调用我的meteor method。

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;

注意： 如果您有 type=method 并且使用流星方法提交 AutoForm，则不会调用 onSubmit。 mentioned here

这样做的好处是 AutoForm 处理验证，并尝试提交，我可以在 onSubmit 方法中执行一些自定义。 （确保在服务器方法上调用check 以及使用您的AutoFormSchema）。

【参考方案2】：

在处理 meteor-autoform 时，最好在开发时始终启用调试模式：

if (Meteor.isClient)
    AutoForm.debug()

在您应用中某处的某个 development.js 文件中。

现在，当您的 autoform 不触发附加的方法时，可能会出现以下情况：

您的表单的 id 在您的页面上不是唯一的，并且

autoform

已连接到另一个 id 并且不会检测到您的表单提交。我有一种强烈的感觉，这里可能就是这种情况。 只要未填充所有必填字段，您的架构中有一些非可选内容会阻止提交表单。 你的 events.js 中有一个 click yourformbutton 事件被调用，防止实际的 autoform 事件监听器在提交时触发（但这不应该是这种情况，因为通过 .submit() 提交确实如此也不行。

了解正在发生的事情的另一个好方法是使用 autoform 钩子，例如：onSubmit: function(insertDoc, updateDoc, currentDoc)、onSuccess: function(result)、onError: function(error)。在提交时检查您的数据流特别有趣。

更多关于这些钩子的细节在这里：https://github.com/aldeed/meteor-autoform#callbackshooks