Custom Name User

The coding is simple.

But you do not say what you query that holds the two names will be ? So I have assumed


The simplest way is to use classes for the elements.
Also put the element sets in a group and give the groups a class name and some Additional HTML Attributes.

The code will then look for the group class qrbox and iterate each one it finds.
It will look for the Additional HTML Attributes of each and use these to know which URLSearchParams to use for each.

	var theElements = document.querySelectorAll('.qrbox')
	 var paramsString =
	 let searchParams = new URLSearchParams(paramsString);

function qrFunction(item, index) {
  	var guestNameParam = 
	var qrBoxID = item.dataset.qr
	var colorDark = item.dataset.colordark
	var colorLight = item.dataset.colorlight

 var theTo_ = searchParams.get(guestNameParam ) 
 thisGuestEl = item.querySelector('.theto')
 var qrel =  item.querySelector('.qrcode')
	thisGuestEl.innerHTML = theTo_
//-- generate new qr code using madaffandi url + querystring
	var qrcode = new QRCode(qrel, {
		text: theTo_,
 		width: hypeDocument.getElementProperty(qrel, 'width'),
		height: hypeDocument.getElementProperty(qrel, 'height'),
		colorDark : colorDark,
		colorLight : colorLight,
		correctLevel : QRCode.CorrectLevel.H
} (33.5 KB)


No I mean:

Same name and same qr code:

Screen Shot 2021-06-14 at 7.57.45 AM

The left image is for opening popup, and the right image is inside of invitation.

What I posted will actually do that. You just need to change both the data-name attributes to use the same to param

Also to save people guessing please post your example you are editing. and maybe explain more....

what I mean is like yours, but just used one param not two.
It like this: https://YOURURL?to=John+Travolta
Not like this: https://YOURURL/?to1=John+Travolta&to2=Jason+Statham

And the result like this:
Screen Shot 2021-06-14 at 1.00.03 PM
Same name, and same QR Code.

This is my file: (35.5 KB)

Not at my comp. now but see my last post. It tells you how to do this use your normal param and change the data-name to reflect it.


Thank you I will try it again.

It's Done.
Thank for your patience to teach me. You are really helpfull Mark. :pray: