Develop Reference

Passing URL parameter in iframe issue

ser goes to http://yoursite.com/your-typeform-page?code=1 using a browser, that page needs to add a IFRAME with url as data-url=https://yoursite.typeform.com/to/U5aOQR?code=1
I want to pass url parameter as input to iFrame.
<script>
queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
var code = urlParams.get('code')
</script>
<div class="typeform-widget" data-url="https://yoursite.typeform.com/to/U5aOQR?code"+ code
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://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>
</div>
Basically I want to pass value of code from line 4 to input as string in line 9.
Thank you for your time and consideration.

I think your question is a duplicate of this question.
You can see a working example I made on Glitch
You can edit here.
Steps to reproduce:
Include Typeform Embed SDK in your HTML
Extract parameters from URL
let params = new URLSearchParams(location.search);
Reconstruct your form URL
url += "?utm_source=" + params.get('utm_source');
Display form in a target div
window.typeformEmbed.makeWidget(
embedElement,
url,
{
hideHeaders: true,
hideFooter: true,
}
);```
Hope it helps :)

How to get the wildcard in the URL and apply argument to a link

Hello I am super new to building websites. Please excuse my lacking terminology!!
I have a website that has Wildcard sub-domains. It is using this script to pull the wildcard sub-domains usernames.
<p id="dist-info"></p>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
return;
var get_data_url = 'https://backoffice.WEBSITE.com/api/v2/public/users/{username}';
$.getJSON(get_data_url, function( data ) {
var dist_info = "<p>"+data.response['first-name']+"</p>" +
"<p>"+data.response['last-name']+"</p>" +
"<p>"+data.response['distributor-id']+" "+data.response.email+"</p>" +
"<p>"+data.response['image-url']+"</p>" +
"<p>Phone: "+data.response.phone+"</p>";
$('#dist-info').html(dist_info);
});
});
</script>
Now I need to make a URL that will parse the username/user id out of the Wildcard Subdomain page. What code do I need to use?
For example
The URL is
USERNAME.WEBSITE.com/page/subpage/
I need to make this URL
backoffice.WEBSITE.com/page?sponsor-id=USERNAME
What do I need to do so that the username from the first page is parsed out and applied to the link of the second URL

You want to modify this JavaScript so it uses the subdomain instead of {username}?
$(document).ready(function() {
var get_data_url = 'https://backoffice.WEBSITE.com/api/v2/public/users/';
var hostname_parts = location.hostname.split('.');
var username = hostname_parts.shift();
// add username to the data URL
get_data_url += username;
// add username to some link on the website
var $aTag = $('#id-of-the-link');
var link_url = $aTag.attr('href');
link_url += username;
// set the new href attribute
$aTag.attr('href', link_url);
location.hostname gives you USERNAME.WEBSITE.com, split() splits it into parts separated by a dot. shift() takes the 1st element of this array (you could also use hostname_parts[0]) and with += you concatenate it to the URL.
The second example shows how to add the username at the end of a link like
click
Edit: added example for changing a href attribute

adding piece of HTML code using JS based on URL accessed

What I am trying to achieve is if a particular page is loaded in the browser for e.g www.domain.com/page then the following piece of code should be added in the page dynamically using JS (similar to how we load the Google Analytics code)
<div id="something">
<img src="http://domain.com/images/someImage.jpg">
</div>
I am trying to figure the script which will load the above mentioned HTML code (anywhere of the page - www.domain.com/page)
Edit 1:
what I am trying to achieve is when the user goes to www.domain.com/page.html I am calling another page lets say page1.html which should contain the script which insert the HTML code I posted above. So I simply want to insert the function which should be enclosed in the tag inside page1.html. Unfortunately I can not edit www.domain.com/page.html

If you want to PLACE that code anywhere in your page using javascript, you first need to identify that PLACE in DOM Using an "id" attribute. Here's an example:
HTML:
<html>
<body>
<div id="target1"></div>
<div id="target2"></div>
</body>
</html>
JS:
var html = '<div id="something"><img src="http://domain.com/images/someImage.jpg"></div>';
document.getElementById('target1').innerHTML = html;
document.getElementById('target2').innerHTML = html;

You can try something like this :
$(document).ready(function () {
var url = window.location.href;
$("#something").append("<img src='"+ url +"' />");
});

$(".documentholder").load("code.html");
If you a specific id of something
$(".documentholder").load("code.html #someid");
If you a specific tag and id of something
$(".documentholder").load("code.html #someid");

Here you are,
just change this part if (getFileName() == "js") with if (getFileName() == "page")
I added js because that is what is returning in the code snippet :)
function getFileName() {
var url = document.location.href;
url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));
url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));
url = url.substring(url.lastIndexOf("/") + 1, url.length);
return url;
}
var div = '<div id="something"><img src="http://domain.com/images/someImage.jpg"></div>';
if (getFileName() == "js") {
$('body').append(div);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

let's say you save this code in a html-file named something.html
$(".documentholder").load("something.html");
in this case the class "documentholder" is the container you put the code in

How can I append "?new_page=2" to a URL within javascript? It seems the question mark isn't allowing me to parse

My original code which works is this:
function changeURL() {
var theURL = location.pathname;
var newURL = theURL.replace("/page1/", "/page2/");
return newURL;
}
$('.currentpagediv').load(changeURL() + ' .secondpagedivclass');
Basically, per How can I dynamically add a URL into javascript, to get a second page's div to display on the first page?, I am trying to add new content from second page into the first page.
However, Now I am trying to also add the SECOND PAGE of the second page into the first page, because the way it is set up, it shows page 1, 2, 3, 4, 5 etc pagination at the bottom. I am trying to also show the other pages in the same page.
For example,
<html>
<body>
<div class="currentpagediv">
</div>
<div class="secondpagedivclass">
[CONTENT HERE]
Page 2, Page 3, Page 4, etc.
</div>
</body>
</html>
But I want:
<html>
<body>
<div class="currentpagediv">
</div>
<div class="secondpagedivclass">
[CONTENT HERE]
[Page 2 Pagination Link CONTENT HERE]
[Page 3 Pagination Link CONTENT HERE]
[Page 4 Pagination Link CONTENT HERE]
[etc.]
</div>
</body>
</html>
Original URL that I am inserting, looks like this:
http://theurl.com/page2/somethingsomewhere.html
The pagination pages look like this:
http://theurl.com/page2/somethingsomewhere.html?new_page=2
http://theurl.com/page2/somethingsomewhere.html?new_page=3
etc.
Here is the code I tried first that does not work:
$('.currentpagediv').load(changeURL() + ' .secondpagedivclass' + '?new_page=2');
But I learned it does not work because you can't parse the question mark. I read that instead I should use .search to parse the new page. So I tried this:
function changeURL() {
var theURL = location.pathname;
var newURL = theURL.replace("/page1/", "/page2/");
return newURL;
}
function secondPage() {
var secondURL = changeURL()
var secondnewURL = secondURL.search('new_page', 2);
return secondnewURL;
}
$('.currentpagediv').load(secondPage() + ' .secondpagedivclass');
In the above code, the only difference from the original working code is the addition of the secondPage() function, and adding that function after .load(.
In the code above, I tried to:
fetch the url of current page
modify the url, and then
append ?new_page=2 to the end of the new url, and
add the function secondPage() to create the URL

Implement opt-in Facebook like button

I've implemented a facebook like button into my (html) website. Now german data protection laws want webpages to be opt-in. Other websites do this by not immediately showing the facebook like but instead showing a button saying "activate facebook button" and when this button is clicked they replace it with the real facebook button.
So it requires two clicks, but this is ok for me. An example is this webpage.
I know html and php but got no clues about javascript (yet). I'd like to know how to implement this: how can I replace the fake button with the facebook one upon clicking?

Looking in their source, they site is using a function they called button2iframe - here it is:
function button2iframe(id,link){
//alert(id);
var substr = link.split("?");
var url = substr[0];
substr.reverse();
substr.pop();
substr.reverse();
var params = substr.join("?");
params = params.split("&");
var k;
var param = "";
var paramname = "";
for( var k=0; k<params.length; k++ ) {
param = params[k].split("=");
if(param.length>1){
if(param.length>2){
paramname = param[0];
param.reverse();
param.pop();
param.reverse();
param[1] = param.join("=");
param[0] = paramname;
}
param[1] = encodeURIComponent(param[1]);
}
params[k] = param.join("=");
}
params = params.join("&");
link = url+"?"+params;
jQuery(function ($) {
$("#"+id).html($('<iframe allowtransparency="true" frameborder="0" scrolling="no" src="'+link+'" id="iframe_'+id+'"/>'));
});
}
And this is what the associated markup for the facebook button looks like:
<li class="wpsoptin_facebook" id="wpsoptin_facebook_39429">
<div class="wpsoptin_medium">
<a class="wpsoptin_sharerlink" href="javascript:button2iframe('wpsoptin_facebook_39429','FACEBOOK LIKE BUTTON IFRAM URL GOES HERE')">Facebook aktivieren</a>
<div class="wpsoptin_sharerend"></div>
</div>
</li>
This code requires you include jQuery in your site as well.

try this if you dont want to use jquery, just remove the couple of line provided Nathan Anderson good answer
//jQuery(function ($) {
// $("#"+id).html($());
document.getElementById(id).innerHTML = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="'+link+'" id="iframe_'+id+'"/>'
///});