Error in data storage system on QR code site

Question

MAIN CODE

QR CODE SITE

CHROME EXTENSION

I have created a project to retrieve QR code information that I previously generated for this website from local storage. I integrated this project into the website using a browser extension.

However, I have overlooked a crucial detail. The code is functioning, but the website does not recognize the text written in JavaScript, and the 'Create QR Code' button does not seem to acknowledge the entered text as if it was never written.

How can I resolve this issue? Thank you.

SCREENSHOT

<label for="qrcodeVcardFirstname">Firstname</label>
<input type="text" id="qrcodeVcardFirstname" value="Ali"/>
<script>

var label = document.querySelector("label[for='qrcodeVcardFirstname']");

var input = document.getElementById("qrcodeVcardFirstname");

window.addEventListener("load", function() {

  label.click();

  var value = input.value;

  value = value + " ";

  input.value = value;
});
</script>

I tried adding a space at the end of the input texts, but it didn't work. Since I added them using JavaScript, the system didn't accept the texts that were not manually added, and the 'Create QR Code' button remained inactive.

Answer 1

They use Angular, angular needs aditional code to be able to trigger events with javascript. I tried this code on the console in their website and it worked:

document.querySelector("#qrcodeVcardFirstname").value = "First Name =D";
document.querySelector("#qrcodeVcardFirstname").dispatchEvent(
    new window.Event('input', { bubbles: true })
);

document.querySelector("#qrcodeVcardLastname").value = "Last Name :)";
document.querySelector("#qrcodeVcardLastname").dispatchEvent(
    new window.Event('input', { bubbles: true })
);

$("#button-create-qr-code").click();