Setting or getting a form field value via JavaScript on a landing page

Version 2

    If you want to set or get a form field value in Javascript, you'll first need to find it's ID in the form.  Then it's a simple matter of using jQuery to retrieve the value from the form.

    Get the field's ID

    First, get the HTML ID for the form field you want to edit.  In the Design Studio, select a landing page that contains the form and preview the page.

    View the source of that page and find the field you want.  The fastest way is to search for the label that you used when you created the form like "Email" or "First Name".

     

    Please ensure that you have access to an experienced JavaScript developer.

     

     

    Marketo Technical Support is not set up to assist with troubleshooting JavaScript.

    Search for the "id" attribute in the "input" tag for that field.  Below, the id is "FirstName".

    <label>First Name:</label><span class='mktInput'><input class='mktFormText mktFormString mktFReq' name="FirstName" id="FirstName" type='text' value="" maxlength='255' tabIndex='1' /><span class='mktFormMsg'></span>

    Setting a field value

    Write Javascript to change the value of that field.  This example uses the jQuery "attr" function to set a new value, though any javascript solution will work.

    Change the highlighted yellow bits below with the name of the field and the new value for that field.  Instead of "newValue", you can use any text string, Javascript variable, or Javascriptfunction that returns a string.

    <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 FirstName and newValue
      $jQ(document).ready(function() {
        $jQ('#FirstName').attr('value','newValue');
      });
    </script>

    When you're done, add the javascript to your landing page by dragging in a Custom HTML element on the page, then paste in this code.

    Getting a field value

    Write Javascript to get the value of that field.  This example uses the jQuery "attr" function to accomplish that, though any javascript solution will work.  Change the yellow value to the ID of the field you want to read.

    <!-- jquery for changing the field values -->
    <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();

     

      $jQ(document).ready(function() {
        var firstName = $jQ('#FirstName').attr('value');
      });
    </script>

    When you're done, add the javascript to your landing page by dragging in a Custom HTML element on the page, then paste in this code.