We Keep Coding

searchParams.get returning "Null" when values are present

I'm trying to grab URL params from a page link to prepopulate a form in an iFrame, but am struggling with the params returning 'null' and need some guidance. So far, the script appears to work by populating the form with "null", however, it is unsuccessfully populating params that have valid values in my URL. The javascript below 'f.src' is scripting provided by my forms service.
(I apologize for the ugly console.logs, but am using those for troubleshooting.)
[Console Preview][1]
***UPDATE: With my updated code, per user suggestion, I updated my .get statements to specify the param with a string, but it's still returning 'null'.
try{
var endpoint = "https://forms.myformsite.com/";
console.log(endpoint);
var url_string = "https://my.site.com/landingpage?fname=Jeff&lname=Bezos&email=jeff#amazon.com&company=Amazon&title=Founder"; /*window.location.href;*/
console.log(url_string);
var url = new URL(url_string);
console.log(url_string);
var fname = url.searchParams.get('fname');
console.log(fname);
var lname = url.searchParams.get('lname');
console.log(lname);
var email = url.searchParams.get('email');
console.log(email);
var company = url.searchParams.get('company');
console.log(company);
var title = url.searchParams.get('title');
console.log(title);
var formURL = endpoint+"&fname="+fname+"&lname="+lname+"&email="+email+"&company"+company+"&title="+title;
console.log(formURL);
var f = document.createElement("iframe");
f.src = formURL;
console.log(f.src);
f.style.border = "none";
f.style.height = "878px";
f.style.width = "90%";
f.style.transition = "all 0.5s ease";
var d = document.getElementById("divFormID");
d.appendChild(f);
window.addEventListener('message', function() {
var evntData = event.data;
if (evntData && evntData.constructor == String) {
var zf_ifrm_data = evntData.split("|");
if (zf_ifrm_data.length == 2) {
var zf_perma = zf_ifrm_data[0];
var zf_ifrm_ht_nw = (parseInt(zf_ifrm_data[2], 10) + 15) + "px";
var iframe = document.getElementById("divFormID").getElementsByTagName("iframe")[0];
if ((iframe.src).indexOf('formperma') > 0 && (iframe.src).indexOf(zf_perma) > 0) {
var prevIframeHeight = iframe.style.height;
if (prevIframeHeight != zf_ifrm_ht_nw) {
iframe.style.height = zf_ifrm_ht_nw;
}
}
}
}
}, false);
} catch (e) {}
})();```
[1]: https://i.stack.imgur.com/z75q0.png
[2]: https://i.stack.imgur.com/bjqoP.png

For all .get() calls, you're passing in an (undefined) variable instead of a string:
var fname = url.searchParams.get(fname);
This should be:
var fname = url.searchParams.get('fname');

How add a filter in server script with query

i'm new in servicenow and I have to add this filter "document_id.number STARTS WITH BKNG"
as a query, how can i do in servicenow?
this is my code:
// only show 30 in header menu dropdown
var max = 30;
var t = data;
t.items = [];
t.count = 0;
var u = getMyApprovals();
// use record watchers to tell header when to update dropdown counts
t.record_watchers = [];
t.record_watchers.push({'table':'sysapproval_approver','filter':'approverIN' + u.toString() + '^state=requested'});
var z = new GlideRecord('sysapproval_approver');
z.addQuery("approver", u);
z.addQuery("state", "requested");
z.addQuery("document_id.number", "STARTSWITH", "BKNG")
z.orderByDesc('sys_updated_on');
z.setLimit(max);
z.query();
var link = {};
link.title = gs.getMessage('View all approvals');
link.type = 'link';
link.href = '?id=approvals';
link.items = [];
t.items.push(link);
while (z.next()) {
var a = {};
var rec = getRecordBeingApproved(z);
if (!rec.isValidRecord()) // nothing being approved - hmmm
continue;
a.short_description = rec.short_description + "";
if (rec.getRecordClassName() == "sc_request") {
var items = new GlideRecord("sc_req_item");
items.addQuery("request", rec.getUniqueValue());
items.query();
if (items.getRowCount() > 1)
a.short_description = items.getRowCount() + " requested items";
else if (items.getRowCount() == 1) {
items.next();
a.short_description = items.getValue("short_description");
}
}
$sp.getRecordValues(a, z, 'sys_id,sys_updated_on');
a.number = rec.getDisplayValue();
a.__table = z.getRecordClassName();
a.type = 'approval';
t.items.push(a);
t.count++;
}
function getRecordBeingApproved(gr) {
if (!gr.sysapproval.nil())
return gr.sysapproval.getRefRecord();
return gr.document_id.getRefRecord();
}
i tried doing z.addQuery ("document_id.number", "STARTSWITH", "BKNG")
but it doesn't works.
i don't know how to do.

You can't dot-walk the document_id field when using .addQuery() as it is not a reference filed. Instead, you can use the Approval for (sysapproval) reference field like so:
z.addQuery("sysapproval.number", "STARTSWITH", "BKNG");

JavaScript get value of query string parameter

I can't find any splitter solution JS to obtain one parameter in this URL
https://www.test.be/fr_BE/home/forms/test-test-salon.html?configId=f4q8s9z1&ucpBaseurl=https%253A%252F%252Ftest.client.ucp.cloud&model=F56&motorization=Diesel
The part I want to isolete is the model id, model=F56, in this case I want to isolate "F56"
I tried this script without success:
var srcID = "11111"; // Insert your src ID here
var typeID = "11111"; // Insert your type ID here
var category = "m1111"; // Insert your category value here
var axel = Math.random() + ""; var a = axel * 10000000000000;
// Grab Data Layer
var dataLayerApi = digital.tracking.getInstance(dataLayer);
var digitalData = dataLayerApi.getPageObject((window.minidtm.actPageId !== undefined) ? window.minidtm.actPageId : dataLayerApi.getCurrentPageIndex());
var path = document.location.pathname;
var pathHirarchy = path.split("&");
if(path.match("\/fr_BE\/home\/forms\/.*\/.*") != null) {
// Get Model Info
var u1 = pathHirarchy[1] //U1 - Produit
var u2 = pathHirarchy[5].split(".")[0] //U2 - Sous Produit
}
else {
var u1 = "notApplicable";
var u2 = "notApplicable";
}
var DCtag = document.createElement("iframe");
DCtag.src = "https://" + srcID + ".fls.test.net/activityi;src=" + srcID + ";type=" + typeID + ";cat=" + category +
";u1=" + u1 +";u2=" + u2 + ";dc_lat=;dc_rdid=; tag_for_child_directed_treatment=;ord=1;num=" + a;
DCtag.width = "1"; DCtag.heigth = "1"; DCtag.frameborder = "0"; DCtag.style = "display:none"; DCtag.async = true;
document.body.appendChild(DCtag);
Do you have an idea ? Expertize in ?
Big big Thanks !
Ludo

You could use URLSearchParams
const params = new URLSearchParams(window.location.search);
const model = params.get('model');
If model isn't present in the query string params.get('model') will return null.
For more information on URLSearchParams.get see the MDN documentation

You could use a regexp:
const url = 'https://www.test.be/fr_BE/home/forms/test-test-salon.html?configId=f4q8s9z1&ucpBaseurl=https%253A%252F%252Ftest.client.ucp.cloud&model=F56&motorization=Diesel';
const result = url.match(/model=(.*?)&/);
const model = result[1];
console.log(model);
EDIT:
I'm gonna leave this answer here, but bflemi3's answer is better.

Setting variable through external method in method of object

I am using the method of a javascript object to create HTML to write that object.
Within that method I have a date (in string format as a SQL Date) which I format to dd MMM YYYY in an external method. The external method works fine returning the string I need, but when I set the variable within my object's method it is returned as undefined.
Hereby the relevant code:
function CreateReview(reviewID, visitDate) {
var reviewObject = {
iD: reviewID,
visitDate: visitDate,
CreateReviewObject : function(c) {
var reviewContainer = document.createElement('div');
reviewContainer.id = 'Review_' + this.iD;
reviewContainer.className = 'Card Review';
var headerDIV = document.createElement('div');
headerDIV.className = 'Header';
var dateTagsDIV = document.createElement('div');
dateTagsDIV.className = 'DateTags';
var datesDIV = document.createElement('div');
datesDIV.className = 'Dates';
var formattedVisitDate = getFormattedDate(this.visitDate);
console.log(formattedVisitDate);
var dateDIV = document.createElement('div');
dateDIV.className = 'Date';
dateDIV.innerHTML = formattedVisitDate;
datesDIV.appendChild(dateDIV);
dateTagsDIV.appendChild(datesDIV);
headerDIV.appendChild(dateTagsDIV);
reviewContainer.appendChild(headerDIV);
return reviewContainer;
}
};
return reviewObject;
}
function getFormattedDate(input) {
input = input.replace(/-/g,'/');
var pattern = /(.*?)\/(.*?)\/(.*?)$/;
var result = input.replace(pattern,function(match,p1,p2,p3){
p2 = parseInt(p2);
p3 = parseInt(p3);
var months = ['jan','feb','maa','apr','mei','jun','jul','aug','sep','okt','nov','dec'];
var date = (p3<10?"0"+p3:p3) + " " + months[parseInt(p2-1)] + " " + p1;
console.log(date);
return date;
});
}
The output of the console in getFormattedDate is then
12 mei 2015
While in CreateReview it is
undefined
I have tried the following way as well:
function CreateReview(reviewID, restaurant, kitchenTypes, tags, pictures, ratings, thumbPicture, visitDate, introduction, description) {
var reviewObject = {
iD: reviewID,
visitDate: visitDate,
CreateReviewObject : function(c) {
var getFormattedVisitDate = function(visitDate) {
return function() { getFormattedDate(visitDate); };
};
var reviewContainer = document.createElement('div');
reviewContainer.id = 'Review_' + this.iD;
reviewContainer.className = 'Card Review';
var headerDIV = document.createElement('div');
headerDIV.className = 'Header';
var dateTagsDIV = document.createElement('div');
dateTagsDIV.className = 'DateTags';
var datesDIV = document.createElement('div');
datesDIV.className = 'Dates';
var formattedVisitDate = getFormattedVisitDate(this.visitDate);
console.log(formattedVisitDate);
var dateDIV = document.createElement('div');
dateDIV.className = 'Date';
dateDIV.innerHTML = formattedVisitDate;
datesDIV.appendChild(dateDIV);
dateTagsDIV.appendChild(datesDIV);
headerDIV.appendChild(dateTagsDIV);
reviewContainer.appendChild(headerDIV);
return reviewContainer;
}
};
return reviewObject;
}
function getFormattedDate(input) {
input = input.replace(/-/g,'/');
var pattern = /(.*?)\/(.*?)\/(.*?)$/;
var result = input.replace(pattern,function(match,p1,p2,p3){
p2 = parseInt(p2);
p3 = parseInt(p3);
var months = ['jan','feb','maa','apr','mei','jun','jul','aug','sep','okt','nov','dec'];
var date = (p3<10?"0"+p3:p3) + " " + months[parseInt(p2-1)] + " " + p1;
console.log(date);
return date;
});
}
Which gives me this output in in CreateReview:
return function() { getFormattedDate(visitDate); };
Why does the CreateReview call return undefined when the console does not?

In your function getFormattedDate(), you have
var result = input.replace(pattern, function(match,p1,p2,p3) {... return date; });
so result contains the returned value of the replace function, but getFormattedDate doesn't return anything ==> undefined when called from CreateReview.
Add return result; at the end of the function getFormattedDate.

adding to existing array on click just empties the array why?

Another angularJS question i have scope binding a click that should add one value on the first click ad another value on the second click but it just keeps returning and empty array and filling the first value again why? :
scope.dbclickalert = function (scope, $watch) {
var getCheckInDate = this.cellData.date;
var formatcheckindate = new Date(getCheckInDate);
var checkingdates = [];
var curr_datecell = formatcheckindate.getDate();
var padded_day = (curr_datecell < 10) ? '0' + curr_datecell : curr_datecell;
var curr_monthcell = formatcheckindate.getMonth() + 1;
var padded_month = (curr_monthcell < 10) ? '0' + curr_monthcell : curr_monthcell;
var curr_yearcell = formatcheckindate.getFullYear();
var date_stringcell = + padded_month + "/" + padded_day + "/" + curr_yearcell;
var checkindatestrg = "checkindate";
console.log(checkingdates.length);
if (checkingdates.length < 2) {
alert("element exists in array");
checkingdates.push('checkoutdate');
checkingdates.push(date_stringcell);
console.log(checkingdates + checkingdates.length);
} else {
checkingdates.push('checkindate');
checkingdates.push(date_stringcell);
}
var setCheckInDate = el.hasClass('checkInDate');
if (checkingdates === true) {
alert('You have allready set your check In Date');
} else {
el.addClass('checkInDate');
$('#checkoutbar').addClass('datePickerchecout');
}
$(".date-cell").each(function removeclasses() {
$(this).removeClass('true');
});
return getCheckInDate;
};
ok so when i declare this outside of the function i get undefined error:
scope.checkingdates = [];
scope.dbclickalert = function(scope, $watch){
var getCheckInDate = this.cellData.date;
var formatcheckindate = new Date(getCheckInDate);
var checkingdates = scope.checkingdates;
var curr_datecell = formatcheckindate.getDate();
var padded_day = (curr_datecell < 10) ? '0'+curr_datecell : curr_datecell;
var curr_monthcell = formatcheckindate.getMonth() + 1;
var padded_month = (curr_monthcell < 10) ? '0'+curr_monthcell : curr_monthcell;
var curr_yearcell = formatcheckindate.getFullYear();
var date_stringcell = + padded_month + "/" + padded_day + "/" + curr_yearcell;
var checkindatestrg = "checkindate";
console.log(checkingdates.length);
if (checkingdates.length < 2){
alert("element exists in array");
checkingdates.push('checkoutdate');
checkingdates.push(date_stringcell);
console.log(checkingdates+checkingdates.length);
}else{
checkingdates.push('checkindate');
checkingdates.push(date_stringcell);
}
var setCheckInDate = el.hasClass('checkInDate');
if (checkingdates === true){
alert('You have allready set your check In Date');
} else{
el.addClass('checkInDate');
$('#checkoutbar').addClass('datePickerchecout');
}
$(".date-cell").each(function removeclasses() {
$(this).removeClass('true');
});
return getCheckInDate;
};
ok in the third version of this it the same data "the date" again if the same div has been clicked but not if a second div with the same ng-click="dbclickalert()" is clicked why?
link: function(scope, el, attributes, dateSheetCtrl, $watch) {
scope.checkingdatesarry = [];
scope.dbclickalert = function(){
var getCheckInDate = this.cellData.date;
var formatcheckindate = new Date(getCheckInDate);
var checkingdates = scope.checkingdates;
var curr_datecell = formatcheckindate.getDate();
var padded_day = (curr_datecell < 10) ? '0'+curr_datecell : curr_datecell;
var curr_monthcell = formatcheckindate.getMonth() + 1;
var padded_month = (curr_monthcell < 10) ? '0'+curr_monthcell : curr_monthcell;
var curr_yearcell = formatcheckindate.getFullYear();
var date_stringcell = + padded_month + "/" + padded_day + "/" + curr_yearcell;
var checkindatestrg = "checkindate";
var checkoutdatestrg = "checkoutdate";
if( $.inArray('checkindate', scope.checkingdates) !== -1 ) {
scope.checkingdatesarry.push(checkoutdatestrg);
scope.checkingdatesarry.push(date_stringcell);
console.log(scope.checkingdatesarry + scope.checkingdatesarry.length);
}
else{
scope.checkingdatesarry.push(checkindatestrg);
scope.checkingdatesarry.push(date_stringcell);
console.log(scope.checkingdatesarry + scope.checkingdatesarry.length);
}
var setCheckInDate = el.hasClass('checkInDate');
if (scope.checkingdates === true){
alert('You have allready set your check In Date');
} else{
el.addClass('checkInDate');
$('#checkoutbar').addClass('datePickerchecout');
}
$(".date-cell").each(function removeclasses() {
$(this).removeClass('true');
});
return scope.checkingdatesarry;
};
ok for anyone that cares the answer was that because my div's where being created with a angularJS directive it was returning and array per div instead of one global array I have taken the array all the way out of the directive and moved it into a service and it works fine.

Because you redefined the array with empty list in the dbclickalert action. So every time when the action is triggered, the array will be empty.
var checkingdates = [];
You should move it outside the function and declare as
$scope.checkingdates = []; //In your code, you may use scope.checkingdates = []; if you renamed the $scope when you inject it