We Keep Coding

How do I populate a default value for a UTM parameter when a value is undefined?

I have been collecting UTM parameters and using the values to populate form fields successfully for some time. Instead of defaulting to a blank or null value if my utm_source is blank, I would like to provide a default value for utm_source of "website"
Here's my code:
// Parse the URL
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
var results = regex.exec(location.search);
return results === null
? ""
: decodeURIComponent(results[1].replace(/\+/g, " "));
}
// Give the URL parameters variable names
var source = getParameterByName("utm_source");
var medium = getParameterByName("utm_medium");
var campaign = getParameterByName("utm_campaign");
// Put the variable names into the hidden fields in the form.
// selector should be "p.YOURFIELDNAME input"
document.querySelector("p.utm_source input").value = source;
document.querySelector("p.utm_medium input").value = medium;
document.querySelector("p.utm_campaign input").value = campaign;
No error messages and the script works as intended. I am simply looking to add a default value in the event one of the parameters is blank. How can I do that?

you should be able to do it just via conditional assuming your getParameterByName function returns undefined or a similar falsy value when there is nothing found:
var source = getParameterByName('utm_source') || 'my default value';

How can I prevent a blank UTM value from being passed in a form submission?

I am working in Pardot, if it matters, but have some javascript which will write GA utm parameters to hidden fields.
Unfortunately, if any of the values are blank, it will pass that blank value, and overwrite any existing value. It's important that I am able to overwrite existing values, but only when there is data in the query string.
Is it possible to write default values instead? So for example, a form is submitted with no utm_source, then we write Source="Organic", or something similar.
Here is my code:
<script type="text/javascript">
// Parse the URL
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
// Give the URL parameters variable names
var source = getParameterByName('utm_source');
var medium = getParameterByName('utm_medium');
var campaign = getParameterByName('utm_campaign');
var campaign = getParameterByName('utm_content');
// Put the variable names into the hidden fields in the form. selector should be "p.YOURFIELDNAME input"
document.querySelector("p.source input").value = source;
document.querySelector("p.utm_medium input").value = medium;
document.querySelector("p.utm_campaign input").value = campaign;
document.querySelector("p.utm_content input").value = content;
</script>
Thank you so much for your insight!

Since you make the value "" if empty, and since that is falsey in javascript, just put an if statement before each of the 4 value statements:
if (source) document.querySelector("p.source input").value = source;
In long form, you are saying that if the value exists, then fill in the element with the value. Otherwise, don't do anything:
if (source) {
document.querySelector("p.source input").value = source;
}

Fill div with url parameter, but only if another span is empty after using settimeout

I have two different ways that a person's name will be displayed on a page. Either in url, or if they filled out a form with their email the CMS I use will display their name. The two methods kind of conflict with eachother.
So basically I have a function that takes the person's name after "first_name" in url. That works great. But before it does that I want it to check if another div is empty but only after a delay of a couple seconds so that if the CMS is going to fill that it has time to.
so I want it to wait a few seconds, check the span to see if it's empty and then if it's empty fill the div with the name from the url.
This what I have right now
HTML
<div id="firstName"></div> <!--Fill this one if the other one is empty -->
<span merge-tag="{{lead.first_name}}"></span> <!--Check to see if this one is empty before filling div -->
Javascript
// URL Parser
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return 'blank';
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
//First Name from URL
var firstName = getParameterByName('first_name');
//Function to add first name to div if span with merge-tag="{{lead.first_name}}" is empty.
function addName() {
if ($("[merge-tag={{lead.first_name}}]").is(':empty')) {
document.getElementById("firstName").innerHTML = firstName.toString();
}
}
window.settimeout(addName, 5000);
It's not working and I'm wondering if anyone has any idea as to why.

It might be just a typo in the question, but the settimeout method should be setTimeout (capital T).
Also, try adding single quotes around {{lead.first_name}} in the handler:
if ($("[merge-tag='{{lead.first_name}}']").is(':empty')) {
document.getElementById("firstName").innerHTML = firstName.toString();
}

Grab referrer to parent in iFrame (different domain) form hidden field

I am loading a form in an iFrame using javascript and adding the referrer into URL to pass the parameter to the iFrame (step 1) for populating a hidden field on a form (step 2).
Step 1 works fine and yields something similar to this:
http://www.parentdomain.com/parentpage/?refURL=http://www.somereferringURL.com/someRefpage/
Step 2 (where I am getting stuck)
function gup( grabREF )
{
grabREF = grabREF.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+grabREF+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
var referrer = gup( 'refURL' );
function start() {
var ref = document.getElementById('my-formfield-id');{
ref.value = referrer;
}
onload = start;
}
This only (still) seems to be yielding the parent as the referrer (http://www.parentdomain.com/parentpage/), and (in fact) seems to be appending the URL string with a closing tag. The form and the parent reisde in different sub-domains. I am guessing the culprit may lye here: ref.value = referrer;
Any ideas?

I was unable to get this to work so I resorted to grabbing only the iframe parent as the referrer and changing the parent page (and embedding the same form in the iframe) to capture the different campaign referr URLs I needed. I can still grab them in one location as I am using the same form, it just would have been nice to have just one parent (landing page) and pass along referrer to the parent.
This code will do that:
<script type="text/javascript">
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var refVAL = getParameterByName('refURL');
//document.write(refVAL);
function SetValue()
{
document.getElementById('my_hidden_formfield_id').value = refVAL;
//alert(document.getElementById('my_hidden_formfield_id').value);
}
</script>
Thanks for looking.

using 'location.href' to pass variable

I've found several posts alluding to the location.href method. But I can't find anything about how to use the variable on the next page that's opened.
I have a function with a single line of code in an external js file:
function nextPage()
{location.href='page2.html?foo=' + src;}
It's activated by a button in the html file. How do I use this on the next page that's opened? I'm assuming this makes 'foo' available. ('src' is an integer stored as a global variable in the external js file. It's just a number between 1 and 5).

On the next page you can get the value using:
http://page2.html?foo=
location.search
> ?foo=
location.search.substring(1)
> foo=
In Script Tag You Put
var array=location.search;
var data = array.split("foo=");
var divid=data[1];//It has your foo value

if you are using javascript then try this code to get querystring value
function getParameterByName(name)
{
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var value = getParameterByName('foo');