Form v2 addHiddenFields()

Forum|Forum|4 years ago
March 29, 2021
1 reply
4814 views

I'm in the process of switching to Form 2.0. I was able to make it works by submitting the form in the background IF I'm using this:

form.addHiddenFields({ "Email": $('#Email').val(), "Phone": $('#Phone').val() });

However, to avoid listing all the fields manually like above, I'd want something more flexible to accommodate different and longer forms, I have something like below, which outputs a JSON-like format.

Basically I have one array to hold the Field name, another array to hold the Field value, then a combined array to output a json-like string. Then use that string for addHiddenFields(), but things didn't work - there's no js error, and my alert show the string in correct format. The form went through but values were not recorded. Thanks for your input - what's wrong in my codes or whether there's a better way to do this.

var formLabels=[];  var formVals=[];  var formString=[]; var formFieldCount;
$('.mkto input,.mkto select, .mkto textarea').each(function(){
formLabels.push($(this).attr('name'));
formVals.push($(this).val());
})
formFieldCount = $('.mkto input').length + $('.mkto select').length + $('.mkto textarea').length;
for (i=0; i<formFieldCount; i++){
formString.push('"'+formLabels[i]+'": '+'"'+formVals[i]+'"');
}
// formString = '{'+formString+'}';
// alert(formString);

form.addHiddenFields(formString);
form.submit();

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by SanfordWhiteman

Are all the form fields variations of <input type="text"> — including type="email", "date", etc. but not including type="checkbox" or type="radio" nor <select> — ?

Because it's very easy to get all the text fields in an HTML form into an object, since they all support the value property:

(function(){
  const htmlForm = document.querySelector("#htmlForm");
  
  const arrayify = getSelection.call.bind([].slice);
      
  htmlForm.addEventListener("submit",function(e){
    e.preventDefault();

    const formTextFields = htmlForm.querySelectorAll(
      "input:not([type='radio']):not([type='checkbox']),textarea"
    );
  
    const formObject = arrayify(formTextFields)
    .reduce(function(acc,nextField){
      acc[nextField.name] = nextField.value;
      return acc;
    },{});
  
    // formObject is now a JS object with all fields
  });
  
})();

Not as easy: formatting the values of checkboxes in Marketo's corresponding format, or finding the currently selected radio button, or assembling multi-valued select dropdowns.

SanfordWhiteman

New Participant

I'm in the process of switching to Form 2.0.

Switching from what to Forms 2.0? Please explain in detail the surrounding/original environment and what you're trying to accomplish.

I can say straight away that building a JSON object manually is, 100% of the time with no exceptions, something you should never do!

M

MT-2Author

New Participant

My site is built on a .net CMS, which by default encapsulates everything inside form tag. Any page, with or without a form will have this structure <body><form...>...</form></body>. What I did in the past when it comes to Marketo was just to use that CMS-based form, add the form fields, and then use js to change the action of the form to https://app-sj07.marketo.com/index.php/leadCapture/save.

Now knowing that process will no longer work. I switched to submiting the form in the backbround as suggested by you in another post. I got it to work, but want to make it more flexible by automatically iterating the form fields. Sounds like there's better way of doing it, if so, could you point me to the right direction? Thanks!

SanfordWhitemanAccepted solution

New Participant

Are all the form fields variations of <input type="text"> — including type="email", "date", etc. but not including type="checkbox" or type="radio" nor <select> — ?

Because it's very easy to get all the text fields in an HTML form into an object, since they all support the value property:

(function(){
  const htmlForm = document.querySelector("#htmlForm");
  
  const arrayify = getSelection.call.bind([].slice);
      
  htmlForm.addEventListener("submit",function(e){
    e.preventDefault();

    const formTextFields = htmlForm.querySelectorAll(
      "input:not([type='radio']):not([type='checkbox']),textarea"
    );
  
    const formObject = arrayify(formTextFields)
    .reduce(function(acc,nextField){
      acc[nextField.name] = nextField.value;
      return acc;
    },{});
  
    // formObject is now a JS object with all fields
  });
  
})();

Not as easy: formatting the values of checkboxes in Marketo's corresponding format, or finding the currently selected radio button, or assembling multi-valued select dropdowns.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded