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

How to use inputs from a HTML form to call track()

I am trying to use user inputs from a form on a HTML website as the inputs for the properties of an analytic.track() call in javascript.

HTML form code:

  <form>
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name"><br>
    <label for="email">Email:</label><br>
    <input type="text" id="email" name="email"><br>
    <label for="plan">Plan:</label><br>
    <input type="text" id="plan" name="plan"><br>
    <button onclick="submitTrack()">Submit</button>
  </form>

Javascript Code:

function submitTrack() {
  var object {
      "nameVal" : document.getElementById('name').value,
      "emailVal" : document.getElementById('email').value,
      "planVal" : document.getElementById('plan').value;
  };
  analytics.track("Signed Up", {
    userId: "1234567890",
    name: object[nameVal],
    email: object[emailVal],
    plan: object[planVal];
  });

I’m sure it’s wrong but can anyone let me know how it’s done. Much appreciated

Tags:

2

Answers


  1. 0

    For also having a dynamic approach:
    You can call the function on submit

    <form onsubmit="submitTrack(event)">
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label><br>
  <input type="text" id="email" name="email"><br>
  <label for="plan">Plan:</label><br>
  <input type="text" id="plan" name="plan"><br>
  <button type="submit">Submit</button>
</form>

    And then get an object structured with input name as key and input value as value:

    function submitTrack(event) {
  let myObj = [];
  for(element of event.target.elements){
    myObj[element.name] = element.value;
  }
  console.log(myObj);
}

    You can then call the function with the object:

    myObj['userId'] = "1234567890";
analytics.track("Signed Up", myObj);
    Login or Signup to reply.
  2. 0

    The problem is that you are trying to access the values of the form inputs using the object[nameVal] syntax. This syntax is not valid because the object variable is not an object. It is a JavaScript function.

    To fix this, you need to create an object and then add the values of the form inputs to the object. You can do this using the following code:

     var object = {}; object["name"] = document.getElementById('name').value;
 object["email"] = document.getElementById('email').value;
 object["plan"] = document.getElementById('plan').value;​

    Once you have created the object, you can use it to pass the values of the form inputs to the analytics.track() function. You can do this using the following code:

      ​analytics.track("Signed Up", {
  userId: "1234567890",
  name: object["name"],
  email: object["email"],
  plan: object["plan"];
});

    ​

    This code will track the event "Signed Up" with the values of the form inputs.

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

Back To Top
Search