How To: Using JavaScript / JQuery to update a Hidden Formfield.

Andy BaII-Oracle · May 3, 2019 9:39AM

The thought of JavaScript & coding in HTML on Lading pages & web pages can often be daunting. But it needn't be,

Here is a short guide on how to use JQuery (a simple JavaScript library) to grab a value from your URL & drop that into a hidden form field ready for form submission.

Example: - your user clicks through to your form at http://www.google.com?LeadSource=DOIEmail

Note the bit after the .com ?LeadSource=DOIEmail - this is what we call a query string parameter. - it's extra text that wont affect the visit to http://www.google.com, but you can use in some way once the visitor arrives.

It is what's called a key value pair. - the key(before the equals sign) is linked to the value ( after the equals sign).

We can string many together with the '&' character.

the '?' character just tells the browser to stop rendering the URL at that point.

What I mean by that is that

http://www.google.com Is exactly the same as http://www.google.com?this=that&another=one&yetAnother=one&more=data&so=on (...go on, try it!)

All of the text this=that&another=one&yetAnother=one&more=data&so=on that occurs after the ? in the URL is ignored. but we can use it upon page visit if we so choose.

So here we go.

In your HTML, within the Head tags (the bits that go <head > .... </head>) you're going to add a reference to JQuery.

We're going to use a Google hosted version as that will always be accessible & it saves us hosting a file & keeping it up to date.

Google libraries can be found here: https://developers.google.com/speed/libraries/

The JQuery link looks like this: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

So we add that between the Head Tags:

JQuery call

<head>

</head>

Now we add a GetParameters function to do the work for us.

JQuery call + Get URL function.

<head>

$.urlParam = function(name){

var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);

if (results==null) {

return null;

}

return decodeURI(results[1]) || 0;

}

</script>

</head>

That is going to do the heavy lifting when we ask it to.

Now on our 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 </body> 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

$( document ).ready(function() {

$('#LeadSource').val($.urlParam('LeadSource'));

;

});

</script>

</body>

And that's it!

So that code will run on page load, - scan through the URL for the parameter with id=LeadSource. get the associated value, then put 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 & to then post to the Lead Source fields as you see fit.

So now, - going back to our earlier example: - your user clicks through to your form at http://www.google.com?LeadSource=DOIEmail

If a user clicks through to our form, illustrated above as Google, our new code will capture the value 'DOIEmail' that is associated with the Key LeadSource in our Query String.

We capture that value to post it to Eloqua.

If someone else visits the same page with a different Query string value, like at http://www.google.com?LeadSource=WebinarInvite

The same code will captrue WebinarInvite and that will get posted instead.

I hope that all makes sense, please use the comments if there are follow up questions.

Here is a complete stripped back example of the Entire HTML page for you to examine: (the form is of course simplified for this example)

Example of HTML

<!DOCTYPE html>

<html>

<head>

$.urlParam = function(name){

var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);

if (results==null) {

return null;

}

return decodeURI(results[1]) || 0;

}

</script>

</head>

<body>

<form>

<button type="submit">Submit</button>

</form>

$( document ).ready(function() {

$('#LeadSourceFormField').val($.urlParam('LeadSource'));

;

});

</script>

</body>

</html>

I hope that helps.

Andy Ball

Eloqua Principal Technical Account Manager,

Oracle Cloud Priority Support.

JakeDworkis · Sep 15, 2020 10:55PM

Hi Andy, can you use this approach with the new responsive design Landing Page editor? If so, can you clarify where these pieces of code should go? We want to capture the source of form submits using query strings, and the sample javascript available in the knowledge base (https://support.oracle.com/epmos/faces/SearchDocDisplay?_adf.ctrl-state=11sg0e9k43_4&_afrLoop=2064310207934068#aref_sect… ) does not seem to work.

markhalliday · Feb 8, 2021 12:03AM

In the editor, you can put some custom code below the form and add your JavaScript there. So it would look something like this:

No need for jQuery, you can just use plain old JavaScript. Here's an example if you have a URL of https://yourwebsite.com/vanityurl&utm_source=yoursource

and a hidden field named utm_source

/* waits until the content is loaded before running script */

document.addEventListener("DOMContentLoaded", function(event) {

/* get the parameter named utm_source */

var param = getParameterByName('utm_source');

/* get the input with the name utm_source */

var element = document.querySelector("input[name='utm_source']");

/* assign utm_parameter value to the utm_source field */

element.value = param;

function getParameterByName(name, url = window.location.href) {

name = name.replace(/[\[\]]/g, '\\$&');

var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),

results = regex.exec(url);

if (!results) return null;

if (!results[2]) return '';

return decodeURIComponent(results[2].replace(/\+/g, ' '));

}

});

</script>

Categories

How To: Using JavaScript / JQuery to update a Hidden Formfield.

Comments