javascript 当用户单击GTM自定义变量上的提交按钮时,如何从表单元素中获取值

6yoyoihd  于 2023-08-02  发布在  Java
关注(0)|答案(2)|浏览(102)

我有一个带有按钮的表单,每当按钮被点击时,我想使用Google标签管理器的自定义变量将表单的值放在event_label参数上。对于其他情况,我在其他页面上解决了对其他表单的需求。但是在这个页面上,表单是建立在不同的代码上的,这对我来说很难。
the form
在所附的图片中,您可以看到表单上有值,但是当我从元素中检索innerHTML时,名称和其他内容没有值。我不知道它是如何发生的,但我的猜测是在窗体显示设置上,这是Flex导致的这个问题。
我不知道如何解决这个问题,也许你们中的一些人可以帮助我。
先谢谢你了
下面是我的自定义JavaScript,它可以在另一个案例中工作,但不适用于这个案例

function() {
  'use strict';
  try {
    var clickEvent = {{Click Element}};
    var clickSelector = clickEvent.parentElement.parentElement;
    var prevalue = clickSelector.querySelector('form.DemoModal_form__Jb631').innerHTML;
    var values = [];
    var rgx = /\svalue=\"[\w\s\-\d\@\.]+\"/g;
    var result;
    while ((result = rgx.exec(prevalue)) !== null) {
      values.push(result)
    }
    var name = values[0].toString().replace(/\svalue\=\"/g, '').replace(/\"/g, '');
    var company = values[1].toString().replace(/\svalue\=\"/g, '').replace(/\"/g, '');
    var email = values[2].toString().replace(/\svalue\=\"/g, '').replace(/\"/g, '');
    var phone = values[3].toString().replace(/\svalue\=\"/g, '').replace(/\"/g, '');
    var role = values[4].toString().replace(/\svalue\=\"/g, '').replace(/\"/g, '');
    var purpose = values[5].toString().replace(/\svalue\=\"/g, '').replace(/\"/g, '');
    var final_result = [name, email, phone, company, role, purpose].join(',');
    return final_result;
  } catch (err) {
    return err.name + " " + err.message;
  }
}

个字符
我尝试了另一种方法,通过调用getElementById函数来获取该值,但这导致了一个错误。我做了一些正则表达式从innerHTML中获取值,但导致值不在HTML中,因此结果为null。

relj7zay

relj7zay1#

你在用
placeholder=“输入全名”value="”
所以这是两种不同的属性具有可见占位符并不意味着它具有价值。

muk1a3rh

muk1a3rh2#

点击提交按钮时,使用此选项获取数据:

document.querySelector('.DemoModal_form__Jb631').addEventListener('submit', (e) => {
  e.preventDefault();
  let formData = [...e.target.elements].reduce((data, el) => {
    if(el.name) data[el.name] = el.value;
    return data;
  }, {});
  console.log(formData);
  // here you can send formData to server using fetch api, or axios.
});

字符串
希望这对你有帮助!

相关问题