Question 220615 in Html Question posted in
Some basic documentation can be found here.

Html – How to get value from a forms element when a user click submit button on GTM Custom Variable

I have a form with a button and whenever the button got hit I want to put the value of the form on an event_label parameter using Google Tag Manager’s Custom Variable. For other cases, I solve the needs for other forms on the other page. But on this page, the form is built on different code which for me is hard.

the form

In the attached picture you can see that there are values on the form, but when I retrieve the innerHTML from the element there is no value for the name and the others. I do not exactly know how it can happen, but my guess is on the form display setup which is flex caused this issue.

I do not know how to solve it, maybe some of you can help me.

Thank you in advance

Below is my custom javascript which works on another case but not for this case

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="[ws-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>

I tried another way to get the value by calling a getElementById function which results in an error. I did some regex to get the value from the innerHTML but caused the value is not on the HTML so the result is null.

Tags:

2

Answers


  1. 0

    You are using

    placeholder="Enter the full name" value=""

    so those are 2 different attributes. Having visible placeholder does not mean that it has value.

    Login or Signup to reply.
  2. 0

    Use this to fetch data on clicking on submit button:

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

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search