I'm adding and html form to my canvas inside the create function. I want to be able to submit the form when a user presses the Enter key. For this, I've added the key listener and inside the update function I'm looking for JustDown callback of class Phaser.Input.Keyboard. But there is a problem, When I call my validateFrom method from the update() callback it fails to get the values using getChildByName function. The same is working fine when I call the validate Form function from the create() callback.

My code is given below:

export default class Identity extends Phaser.Scene {

   constructor() {
    super({ key: "ABC" });
    this.enterKeyIdentity;
    
    console.log("constructor ....")
  }

    preload() {
      this.load.html("identity_form", "/assets/forms/Unlock1/identity.html");
    }

   create() {
      this.formInput = this.add.dom(0, 0).createFromCache("identity_form");
      this.formInput.originX = 0;
      this.formInput.originY = 0;

      this.enterKeyIdentity = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.ENTER);
      
      // the input values are fetched fine when accessed from here       
      this.formInput.getChildByName("submit").onclick = () => {
        this.validateFormIdentity();
      };

   }

   update () {
    if(Phaser.Input.Keyboard.JustDown(this.enterKeyIdentity)) {
      console.log("pressed down");
      this.validateFormIdentity(); // input values are not fetched properly when called from here
    }
  }

  validateFormIdentity = () => {
    console.log("submit called")
    let city1 = this.formInput.getChildByName("city1").value;
    let city2 = this.formInput.getChildByName("city2").value;
    let city3 = this.formInput.getChildByName("city3").value;

    console.log(city1, city2, city3)
    // prints actual values when invoked from create function
    // prints empty "" spaces when invoked from update function
 
  }

}