javascript - 从 html 表单中提取具有值和 id 的 UI 元素并忽略 null 元素和 FALSE 复选框

Question

我已经使用 METAWIDGET 生成了几个表单，我在其中传递了一个轻量级的 JSON，现在我想提取 ui 元素的值及其 id，然后将其绑定到字符串以将其作为 URL 参数传递。

现在我可以编写 Javascript 来从表单中提取 UI 元素和值，但是如果您有一个包含 40 多个选项的表单并且其他表单存在相同的元素数量，那么很难从 ui 元素中单独提取值. 如果有人在 Javascript 中使用这样的 API 来自动提取 UI 元素值和 ID，那就太好了，如果您可以共享它们，那就太好了。

谢谢！

Answer 1

Metawidget 已经提供了这样的能力。您可以使用：

var processor = mw.metawidget( "getWidgetProcessor", function( widgetProcessor ) {
    return widgetProcessor instanceof metawidget.widgetprocessor.SimpleBindingProcessor;
} );
processor.save( mw.data( 'metawidget' ) );

检索 SimpleBindingProcessor（默认配置）并调用其保存方法。这会将所有 UI 元素的内容保存回mw.toInspect. 这里有一个例子。请注意，某些 Metawidget 风格（例如 Angular Metawidget）会自动执行此操作。

如果您特别关心捕获元素的 ID，则可以扩展SimpleBindingProcessor和覆盖其saveFromWidget方法：

var bindingProcessor = new metawidget.widgetprocessor.SimpleBindingProcessor();
var superSaveFromWidget = bindingProcessor.saveFromWidget;
bindingProcessor.saveFromWidget = function( binding ) {

    // access binding.widget.getAttribute( 'id' ) and save it somewhere
    ...
    return superSaveFromWidget.call( this, binding );
}

processor.save当您像以前一样调用时，这将被触发。