Your Guide For Marketing Technology and Automation

How To Use JavaScript to update a Hidden Form Field in Eloqua

Javacript In Eloqua

While using Eloqua you may have a need to update a hidden form field with data that is in the the URL parameter so here is a guide on how to do that.

First off, lets explain the URL parameter.

Your user clicks on a link to your form at www.martechhero.com?LeadSource=Email

Notice after the .com there is ?LeadSource=Email – this is what is called a query string parameter. It won’t affect the page at www.martechhero.com but you can use this parameter once the visitor arrives.¬†

The part after the “?” and before the “=” sign is the key (in this case LeadSource) and the value after the “=” is the value (in this case it is Email). If you have more than one key then each subsequent key is preceded by a ‘&”. For example www.martechhero.com?LeadSource=Email&Region=US

Note that whether you go to www.martechhero.com or www.martechhero.com?LeadSource=Email you will arrive at the same page. The part after the ‘?” is ignored but we can use it upon a page visit if we so choose.

How to Use This

In your HTML within the Head tags we are going to add a reference to JQuery which is a simple Javascript library. We will use the Google hosted version since that will always be accessible and it saves us from hosting a file and keeping it up to date. So in this case the JQuery code will look like this:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head> 

Now we will add a GetParameters function to retrieve the value variable from our URL.

JQuery call + Get URL function:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>

<script>
   $.urlParam = function(name){
   var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
   if (results==null) {
   return null;
    }
    return decodeURI(results[1]) || 0;
}
    </script>
</head> 

Now on our Eloqua form, we have a hidden form field with an ID of LeadSourceFormField – like this:

<input name=leadSource id="LeadSourceFormField"> 

This field will capture the value we supply & we can use this id to target the field with JQuery.

Lastly we’re going to add a short script just before the closing tag to run once the page loads, It will look into the URL for our query string parameter & grab the value to put it in the form field:

Call to get Parameter & posting it into the form field

<script>
  $( document ).ready(function() {
  $('#LeadSource').val($.urlParam('LeadSource'));
   ;
});
    </script>
</body> 

This above code will run on the page load and it will scan through the URL for the parameter with the id=LeadSource and get the associated value and input it into the form field with the ID LeadSourceFormField.

When the user submits the form, the hidden value will be submitted for you to track on your Eloqua form.

Please let me know if you have any comments or questions.

NEWS    ———————————
Video on How to Use Postman with Eloqua
MarTech

Video on How to Use Postman with Eloqua

Video On How To Use Postman with Eloqua We recently posted an article about how to use Postman with Eloqua

Set Up An Eloqua Sandbox For Testing
Eloqua

Set Up An Eloqua Sandbox For Testing

Set Up and Refresh an Eloqua Sandbox Using a Sandbox environment with Eloqua can be very helpful when you need

POPULAR PRODUCTS¬† ——————

Leave a Reply

About MarTech Hero

MarTechHero.com is your source to find out info on Marketing Technology with an emphasis on using Eloqua for your marketing automation.

Scroll to top