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 {
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;
// 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
}
}