Setting Field Value on Form with JS

[kenmckown]

I am trying to pre-populate a field on an embedded form. I read through this article and it seemed straightforward.

https://nation.marketo.com/t5/knowledgebase/setting-or-getting-a-form-field-value-via-javascript-on-...

The issues I ran into was the page did not show the ID, just the name:

This is the code I am using:

<script language="Javascript" src="/js/public/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    // use no conflict mode for jQuery
  var $jQ = jQuery.noConflict();

 

    // when the page is ready, change sFDCCampaignID and newValue
  $jQ(document).ready(function() {
    $jQ('#sFDCCampaignID').attr('value','701VU00000AElPWYA1');
  });
</script>

[SanfordWhiteman]

You certainly should not be doing it like that — at all.

The Forms JS API contains a simple method to modify fields:

MktoForms2.whenReady(function(readyForm){
  readyForm.setValues({
    FieldName: "field value"
  });
});

And you’re already using that method elsewhere!

[kenmckown]

OK, so I can just add that function into my existing script and just change the form field name i.e.:

<script src="//go.autoshopsolutions.com/js/forms2/js/forms2.min.js "></script>
<form id="mktoForm_3948"></form>
<script>
MktoForms2.loadForm("//go.autoshopsolutions.com", "180-DGD-014", 3948, function(form){
  form.addHiddenFields({ lastFormURL : document.location.href })    
});
</script>
<script>
{
  const ctaText = "Download Now";
  /* -- NO NEED TO TOUCH BELOW HERE -- */
  MktoForms2.whenReady(function(readyForm){
    const formEl = readyForm.getFormElem()[0],
          buttonEl = formEl.querySelector(".mktoButton[type='submit']");
    buttonEl.textContent = ctaText;
    readyForm.onSuccess(function(values, followUpUrl){
      location.href = "https://shopboss.net/wp-content/uploads/SB-A-Shop-Owners-Guide-to-the-Millionaire-Making-KPI-1.pdf";
      return false;
    });
  });
  
  MktoForms2.whenReady(function(readyForm){
  readyForm.setValues({
    sFDCCampaignID: "701VU00000AElPWYA1"
  });
});

}
</script>

[SanfordWhiteman · Accepted solution]

Yes, although it’s far cleaner to incorporate it into an existing listener.

Take out the listener from the loadForm call:

<script>
MktoForms2.loadForm("//go.autoshopsolutions.com", "180-DGD-014", 3948);
</script>

Set your hidden and visible fields in one listener:

MktoForms2.whenReady(function(readyForm){
  readyForm.addHiddenFields({ 
    lastFormURL : document.location.href 
  });

  readyForm.setValues({
    sFDCCampaignID: "701VU00000AElPWYA1"
  });
});