Pass a dynamic URL field into a link using javascript - javascript

I am trying to parse the email ("test#test.com") from the url and insert it together with an identifier to the popupwidget url.
The end result should be "showPopupWidget('https://website.com?utm_campaign=test#test.com')".
Unfortunately, I cannot seem to get it to work. Any help would be greatly appreciated.
Thanks!
//<![CDATA[
window.onload=function(){
url = "https://url.com/abc?email=test#test.com";
var paramId = new URL(url).searchParams.get("email");
var frameElement = document.getElementById("calendlyid");
frameElement.src = "https://webite.com" + "?utm_campaign=" +paramId;
}//]]>
<h2 class="subtitle">
<a id="calendlyid" href="" onclick="iAmAttilasEvent(); Calendly.showPopupWidget('https://website.com');return false;" class="link">Book NOW</a> </h2>

Try this:
frameElement.href= "https://webite.com" + "?utm_campaign=" +paramId;

Found the answer...
//<![CDATA[
window.onload=function(){
url = document.location.href;
var paramId = new URL(url).searchParams.get("email");
var url = "iAmAttilasEvent(); Calendly.showPopupWidget('https://website.com" + "?utm_campaign=" +paramId + "');return false;";
document.getElementById("ID").setAttribute("onclick",url);
}//]]>
<a id="ID" href="" class="link">Book Now</a>

Related

how to pass dynamic url in ajax request via model reveal?

i am using foundation reveal model but i am not able to pass dynamic url to data-ajax-url.
i want to pass dynamic project_site.id in url but not i am able to append dynamic url .
currently i test on local url: "http://0.0.0.0:3000/project_sites/21/attendances/" here 21 is hard coded url i want to pass dynamic url.
reference i used:- https://codepen.io/sujayjaju/pen/akAYzP?editors=1010
here is my code-
<div class="full reveal" id="exampleModal1" data-reveal data-ajax-url="http://0.0.0.0:3000/project_sites/21/attendances/">
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<p><button class="button small warning button-margin-top fi-eye" data-open="exampleModal1"> View</button></p>
application.js
$(document).on('open.zf.reveal', "#exampleModal1", function (e) {
var $modal = $(this);
var ajax_url = $modal.data("ajax-url");
if (ajax_url) {
$modal.html("Now Loading: "+ajax_url);
$.ajax(ajax_url).done(function (response) {
$modal.html(response);
});
}
});
If you want to pass a dynamic URL, why don't you just pass it in jquery instead of relying on data-attributes?
var ajax_url = "http://0.0.0.0:3000/project_sites/" + project_site.id + "/attendances/";
If you must work with data-attributes what about doing something like this:
$(document).foundation();
$(document).on('open.zf.reveal', "#login", function (e) {
var $modal = $(this);
var project_site_id = 21
var ajax_url = $modal.data("ajax-url");
var lastpos = ajax_url.lastIndexOf("/");
var newUrl = ajax_url.substring(0, lastpos);
var lastWord = ajax_url.substring(lastpos);
newUrl += '/' + project_site_id + lastWord;
$modal.attr("data-ajax-url", newUrl);
console.log(newUrl);
if (ajax_url) {
$modal.html("Now Loading: "+ajax_url);
$.ajax(ajax_url).done(function (response) {
$modal.html(response);
});
}
});
<link href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/what-input/1.1.4/what-input.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
<html>
<body>
<div id="login" class="reveal text-center" data-reveal
data-ajax-url="https://codepen.io/sujayjaju/pen/VKkxKY.html">
</div>
<a href="#login" data-open="login" class="button">
Open Modal Form
</a>
</body>
</html>
Obviously, you would need to replace my project_site_id variable with your project_site.id variable.

How do i make my page blank with a query?

If I set the URL to exmaple.com?blank=true a blank page should be presented.
Using JavaScript or jQuery i want a short snippet that looks for ?blank=true in the url and if it finds it than the page to turn white or blank.
Try like this
var url_string = "https://example.com?blank=true "; //window.location.href
var url = new URL(url_string);
var blank = url.searchParams.get("blank");
if(blank){
document.getElementsByTagName("body")[0].style.display = "none";
}
<body>
<p>this will be hidden</p>
</body>
wrap your html content in a element like this
<html>
<body>
<div id="wrapper">
<!-- ********your content here******** -->
</div>
</body>
</html>
use jquery code as
$(document).ready(function() {
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('=');
if(sURLVariables[0]=="blank" && sURLVariables[1]=="true")
{$('#wrapper').css('display','none');}
else{
$('#wrapper').css('display','block');
}
});
With jQuery
var blank = /(?<=blank=)[^&?]+/g.exec('https://example.com?blank=true')[0];
if(blank === 'true'){
$('body').hide();
}else{
$('body').show();
}

Changing text by calling javascript

im trying to change a line of text if a link is clicked, however it doesnt seem to be calling my script to change it.
<script >
var paragraphToChange = document.getElementById("q1");
paragraphToChange.innerHTML ="Quotation is by:" + Antole France
</script>
<div id="body">
<p>javascript.html - JavaScript page</p>
<a href id="q1">Quotaion is by:</a>
</div>
What you're trying to accomplish is probably something like this:
HTML
<div id="q1">
<a onClick="javascript:clickFunction()">Quotation is by</a>
</div>
JavaScript
clickFunction = function() {
document.getElementById("q1").innerHTML = "<a href='http://www.quotationspage.com/quote/1463.html'>Antole France</a>";
}
JSFiddle
Sir you have to set the value of "newValue" to the quotation.
var newValue = '"Quotation is by:" + Antole France'
paragraphToChange.innerHTML = newValue;
You are missing the click event on the Html tag. Hence, this paragraphToChange.innerHTML ="Quotation is by:" + Antole France"
never gets call.
Why don't you start with this example first:
<p id="display"></p>
<button onclick="displayBob">Bob</button>
<button onclick="displayTom">Tom</button>
<script>
displayBob = function ()
{
document.getElementById("display").innerHTML = "Hello Bob";
}
displayTom = function ()
{
document.getElementById("display").innerHTML = "Hello Tom";
}
</script>

Pass URL Parameters from one page to another

Trying to do the following:
Store params from url, i.g. mydomain.com/page.html?cid=123456
If a user clicks on a button (they have a class of .btn-cta) it will take the params ?cid=123456 and add them to the new page those buttons link to /tour.html
I'm currently doing 1/2 of that with passing the params to an iframe on the page, now I need to get the above part working:
var loc = window.location.toString(),
params = loc.split('?')[1],
iframe = document.getElementById("signupIndex"),
btn = $('.btn-cta');
iframe.src = iframe.src + '?' + params;
Here's how I'd do it using jquery:
$('.btn-cta').each(function(i, el){
let $this = $(this); // only need to create the object once
$this.attr({
href: $this.attr("href") + window.location.search
});
});
And in Vanilla ES2015
document.querySelectorAll('.btn-cta')
.forEach(el => el.attributes.href.value += window.location.search);
This takes all the elements that have class .btn-cta and appends the page query string to each of their href attributes.
So if the page url is `http://domain/page.html?cid=1234
Tour
becomes
Tour
<html>
<head>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
var loc = window.location.href;
var params = loc.split('?')[1];
$(".btn-cta").click(function(){
window.open("tour.html?"+params,'_self',false);
});
});
</script>
</head>
<body>
<button type="submit" class="btn-cta">Click Me</button>
</body>
</html>

How Replace some url by ID with Javascript

<a href='http://www.domain.com' id='replace' style='text-decoration:none;color:black;font-size:10px;'>This is text link</a>
<script language="javascript">
var newURL = "mydomain.com/?refid=4877";
onload=function() {
var dt = document.getElementById("replace");
document.body.innerHTML = dt.getAttributeNode("href").value.replace(/domain.com/g,newURL);
}
Just assign to the href attribute:
dt.href = dt.href.replace(/domain.com\/?/, newURL);
The optional trailing slash caters for browsers that automatically add a slash to hrefs.
You should probably use JQuery:
$(document).ready(function(){
$("#replace").attr("href","http://www.mydomain.com/?refid=4877");
});

Categories

Resources