Question

编辑：添加了一个CodePenn以包含一个有效的示例。

我正在从HTML5表单中进行选择，并使用匹配项填充Marketo Web表单。

使用一些jQuery来获取html元素上的值，并将其与marketo form匹配。一旦我选择了表格A上的选项，它就会选择表格B上的选项

表格A =常规HTML5表格

表格B = Marketo网络表格

Marketo表单具有其他字段，除非您选择一个选项，否则这些字段不会出现在HTML中。选择一个选项后，它将在表单中注入其他字段。如果我手动选择选项值，则可以正常工作，但是当脚本将值添加到Marketo表单时，它不会以相同的方式触发/触发。

常规HTML5表单标记：

<form>
<div class="form-group">
  <p><strong>I AM INTERESTED IN:</strong></p>
  <select id="select-iminterestedin" name="contact_iminterestedin" class="form-control">
    <option value="">Select...</option>
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
  </select>
</div>
</form>

匹配第二种形式的期权价值：

  // populate the select field

  $('[name="contact_iminterestedin"]').on('change', function() {
    const selected = $(this).val();
    const matchValue = $(`#Initial_Product_Requested__c option[value="${  selected  }"]`);
    matchValue.prop('selected', true);
  });

整个内容的CodePenn演示：

https://codepen.io/bruno-gomes/pen/YbYBER?editors=0010

因此，一旦我在HTML5表单上选择了该字段，就会将所选选项添加到Marketo表单中。但是，这不会触发将以marketo形式显示的其他字段。但是，如果我手动选择marketo表单上的字段，则会显示此新字段。

我想知道/理解im使用的方法是否无法按我期望的那样工作，或者是否有其他方法可能缺少与.trigger（'change'）或.click（'change'相关的内容）。

很遗憾，我无法提供Marketo表单的HTML。它通过marketo API加载到网站中。

非常感谢任何提示或帮助！此致。

Answer 1

要触发它，您需要再添加一行：
UTC

注意：触发事件作为 jQuery .trigger('change') 在这种情况下不起作用。

根据您的代码，它将如下所示：

document.querySelector('#target').dispatchEvent(new Event('change'));

请注意，它可以通过 data 属性进行改进，因为您有重复项在#target 选择器中唯一更改的代码中。
如果在事件侦听器初始化后将 #source 元素添加到 DOM，那么使用 $('[name="contact_iminterestedin"]').on('change', function() { const selected = $(this).val(); const matchValue = $(`#Initial_Product_Requested__c option[value="${ selected }"]`); matchValue.prop('selected', true); document.querySelector('#Initial_Product_Requested__c').dispatchEvent(new Event('change')); }); 也会有所帮助。

Answer 2

    $(document).on('change', '[name="contact_iminterestedin"]').on('change', function() {
        const selected = $(this).val();
        const matchValue = $(`#Initial_Product_Requested__c option[value="${  selected  }"]`);
        matchValue.prop('selected', true);
    });

该代码应在文档上注册偶数处理程序

Answer 3

使用 constructor version #2 here 更新表单。您将需要表单的 id 来获取表单，然后您可以在更新 html 字段时使用 setValues 来设置市场表单的下拉值。这将确保一切按预期进行。

  $('[name="contact_iminterestedin"]').on('change', function() {
    const selected = $(this).val();
    const matchValue = $(`#Initial_Product_Requested__c option[value="${selected}"]`);
    matchValue.prop('selected', true);
    // get the form,
    const form = MktoForms2.getForm(3578);
    // set the form value you are interested in updating
    form.setValues({
      Initial_Product_Requested__c: selected,
    });
  });

这是给您的marketo's api。

使用jQuery和HTML5表单填充Marketo网络表单上的选择字段

3 个答案: