Custom Name User

[MarkHunte]

The coding is simple.

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

https://YOURURL?to1=John+Travolta&to2=Jason+Statham

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.

//https://YOURURL?to1=John+Travolta&to2=Jason+Statham
	
	
	var theElements = document.querySelectorAll('.qrbox')
	 
	 var paramsString =    window.location.search
	  
	 let searchParams = new URLSearchParams(paramsString);
	 	  
	theElements.forEach(qrFunction);

function qrFunction(item, index) {
  	var guestNameParam = item.dataset.name 
	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')
  
 console.log(colorDark) 
 	 
	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
	});
}

userQR3.hype.zip (33.5 KB)

---

[VickyMadhas]

No I mean:
https://YOURURL?to1=John+Travolta

Same name and same qr code:

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

[MarkHunte]

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....

[VickyMadhas]

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:

Same name, and same QR Code.

This is my file:
userQrDuplicate.hype.zip (35.5 KB)

[MarkHunte]

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.

[VickyMadhas]

Thank you I will try it again.

[VickyMadhas]

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