passing javascript variable into embedded survey form

Question

I've looked around a lot but can't seem to find the best way to go about this. How can I input the variable values (p1, p2, p3) into the URL at the bottom of this code?

I'm taking variables that are formatted with "+"'s as spaces, formatting them to have "%20" as spaces; then, passing them into the link at the bottom of this code used for this embedded typeform.

<script type="text/javascript">// <![CDATA[
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 null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var p1 = getParameterByName('p1')
var p2 = getParameterByName('p2')
var p3 = getParameterByName('p3')

p1 = p1.replace(/\+/g, "%20");
p2 = p2.replace(/\+/g, "%20");
p3 = p3.replace(/\+/g, "%20");
// ]]></script><script type="text/javascript">// <![CDATA[

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 null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var p1 = getParameterByName('p1')
var p2 = getParameterByName('p2')
var p3 = getParameterByName('p3')

p1 = p1.replace(/\+/g, "%20");
p2 = p2.replace(/\+/g, "%20");
p3 = p3.replace(/\+/g, "%20");
// ]]></script>

<!-- Change the width and height values to suit you best -->
<div class="typeform-widget" 
     data-url="https://eatforklore.typeform.com/to/XPDPsx?p1=xxxxx&amp;p2=xxxxx&amp;p3=xxxxx&amp;p4=xxxxx" 
     data-text="Mo. 1 Product Reviews" 
     style="width:100%;height:500px;">
</div>
<script>
(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id='typef_orm',b='https://s3-eu-west-1.amazonaws.com/share.typeform.com/';if(!gi.call(d,id)){js=ce.call(d,'script');js.id=id;js.src=b+'widget.js';q=gt.call(d,'script')[0];q.parentNode.insertBefore(js,q)}})()
</script>

is your p1, p2, and p3 returning unexpected values or do you just need to know how to update the url property of a tag? — Luke Kot-Zaniewski, Oct 16 '16 at 14:49
I think I'm just trying to update the url property of the tag. I guess I do not understand how to take a variable from javascript and then use it in the html. Is there anything I need to do to call it? And then, yes, placing it in the url property — Zach Mandell, Oct 16 '16 at 16:05
document.querySelector(".typeform-widget").dataset.url = urlVariable; — Luke Kot-Zaniewski, Oct 16 '16 at 16:33

score 0 · Answer 1 · answered Oct 16 '16 at 14:51

Your getParameterByName function requires two arguments but is only given one. You should pass in the data-url property of the div by using .dataset.url.

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 null;
   if (!results[2]) return '';
   console.log('The value of ' + name + ' is: ' + results[2].replace(/\+/g, " "));
   return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var p1 = getParameterByName('p1', document.getElementsByClassName('typeform-widget')[0].dataset.url)
var p2 = getParameterByName('p2',document.getElementsByClassName('typeform-widget')[0].dataset.url)
var p3 = getParameterByName('p3', document.getElementsByClassName('typeform-widget')[0].dataset.url)

p1 = p1.replace(/\+/g, "%20");
p2 = p2.replace(/\+/g, "%20");
p3 = p3.replace(/\+/g, "%20");

<!-- Change the width and height values to suit you best -->
<div class="typeform-widget" data-url="https://eatforklore.typeform.com/to/XPDPsx?p1=p1valuehere&amp;p2=p2valuehere&amp;p3=p3valuehere&amp;p4=xxxxx" data-text="Mo. 1 Product Reviews" style="width:100%;height:500px;"></div>

passing javascript variable into embedded survey form

1 Answers1