Re: Form v2 addHiddenFields()

MT · ‎03-29-2021

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();

SanfordWhiteman · ‎03-29-2021

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.

View solution in original post

SanfordWhiteman · ‎03-29-2021

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!

MT · ‎03-29-2021

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!

SanfordWhiteman · ‎03-29-2021

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.

MT · ‎03-30-2021

Most of the forms will be Input text, Select dropdown for Countries, a Checkbox to opt-in and Textarea, but there're a handful that are pretty long with many many checkboxes and radios and dropdowns. For now, I just want to test with a simple form, being able to iterate through the elements and output them in the right formats that will be sent to Marketo with no problem. I'll play with your suggested codes and see how things go. THANK YOU!