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

Question

我有一个带有按钮的表单，每当点击该按钮时，我想使用 Google 跟踪代码管理器的自定义变量将表单的值放在 event_label 参数上。对于其他情况，我在其他页面解决其他表单的需求。但在这个页面上，表单是基于不同的代码构建的，这对我来说很难。

在附图中，您可以看到表单上有值，但是当我从元素中检索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;
  }
}

<div class="DemoModal_form_div__T_N6N">
   <div class="d-flex" style="justify-content: space-between;">
      <h3 class="DemoModal_demo_heading__q7eP3 ff-pintar-regular">Request Demo</h3>
      <img src="static/images/icons/cross_demo.svg" alt="close" style="cursor: pointer;">
   </div>
   <form class="DemoModal_form__Jb631" novalidate="" data-gtm-form-interact-id="0">
      <div class="InputField_modal_div__hypNY undefined ">
         <label class="InputField_demo_label__nzqwe  undefined ff-pintar-display" for="fullName">Full Name*</label><br>
         <div style="display: flex;"><input name="fullName" class="InputField_demo_input__nar5f  undefined ff-pintar-regular undefined" type="text" id="fullName" placeholder="Enter the full name" value="" data-gtm-form-interact-field-id="0"></div>
      </div>
      <div class="InputField_modal_div__hypNY undefined ">
         <label class="InputField_demo_label__nzqwe  undefined ff-pintar-display" for="companyName">Company Name*</label><br>
         <div style="display: flex;"><input name="companyName" class="InputField_demo_input__nar5f  undefined ff-pintar-regular undefined" type="text" id="companyName" placeholder="Enter the company name" value="" data-gtm-form-interact-field-id="1"></div>
      </div>
      <div class="InputField_modal_div__hypNY undefined ">
         <label class="InputField_demo_label__nzqwe  undefined ff-pintar-display" for="email">Email*</label><br>
         <div style="display: flex;"><input name="email" class="InputField_demo_input__nar5f  undefined ff-pintar-regular undefined" type="email" id="email" placeholder="Enter the email" value="" data-gtm-form-interact-field-id="2"></div>
      </div>
      <div class="InputField_modal_div__hypNY undefined ">
         <label class="InputField_demo_label__nzqwe  undefined ff-pintar-display" for="phoneNumber">Phone Number*</label><br>
         <div style="display: flex;"><input name="phoneNumber" class="InputField_demo_input__nar5f  DemoModal_input_field__o5Fn7 ff-pintar-regular undefined" type="number" id="phoneNumber" placeholder="Enter the phone number" value="" data-gtm-form-interact-field-id="3"></div>
      </div>
      <div class="InputField_modal_div__hypNY undefined ">
         <label class="InputField_demo_label__nzqwe  undefined ff-pintar-display" for="department">Position Role*</label><br>
         <div style="display: flex;"><input name="department" class="InputField_demo_input__nar5f  undefined ff-pintar-regular undefined" type="text" id="department" placeholder="Enter the role" value="" data-gtm-form-interact-field-id="4"></div>
      </div>
      <div class="DemoModal_div__wbbHv ">
         <label class="DropDown_dropdown_label__fCbJ9 undefined" for="requestType">What is your purpose in filling out this form?*</label>
         <div style="display: flex;">
            <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary ff-pintar-regular DropDown_dropdown_style__WTqj0 undefined css-1w93csh">
               <div tabindex="0" role="button" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="mui-component-select-requestType" id="mui-component-select-requestType" class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-qiwgdb">Other</div>
               <input aria-invalid="false" name="requestType" aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput css-1k3x8v3" value="Other"><img src="/static/images/icons/down_arrow.svg" alt="down_arrow" class="MuiSelect-icon MuiSelect-iconOutlined css-bi4s6q" style="margin-right: 10px; cursor: pointer; margin-top: 5px;">
               <fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline css-igs3ac">
                  <legend class="css-ihdtdm"><span class="notranslate">​</span></legend>
               </fieldset>
            </div>
         </div>
      </div>
      <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium Button_btn__b1BQa DemoModal_form_btn__5zvVz ff-pintar-bold css-1ujsas3" tabindex="0" type="submit">SUBMIT</button>
   </form>
</div>

我尝试了另一种方法来通过调用 getElementById 函数来获取值，但这会导致错误。我做了一些正则表达式来从innerHTML获取值，但导致该值不在HTML上，所以结果为空。

Answer 1

您正在使用

placeholder="输入全名" value=""

所以这是两个不同的属性。拥有可见的占位符并不意味着它有价值。

Answer 2

使用它在单击提交按钮时获取数据：

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.
});

希望这有帮助！