Need to upgrade this old flash e-card engine to HTML5

[isilud_tengille]

Using Adobe Animate-

I was using a super simple e-card mailing engine in flash, need to change a few tidbits to make it work on the canvas. Originally in flash, I had input text fields. No instance names, but they did have variables: ToName FromName ToEmail etc... on the page where it actually sends, there's a dynamic text box with the variable of Status.

I noticed the canvas doesn't do input text fields, so I assume I have to float some text fields over the canvas with CSS. Not only that, I'll need to assign these input text fields the same variables. Will need some advice on how to do this...

I also noticed that even though dynamic text still exists, there's no place to assign a variable. Can I at least do this part in Adobe Animate? For now I just gave it an instance name of Status

And finally, the SEND button in the canvas will need some way of identifying these variables when it is pressed. I really hope this can be done, but just take a look at the button's old ActionScript code below. If there's another way to go about doing this, enlighten me x)  I think that's all for the moment. Thanks much.

on (release) {
	if (ToName eq "") {
		Status = "Please enter the Name of the person your sending this to";
	} else if (FromName eq "") {
		Status = "Please enter your Name";
	} else if (ToEmail eq "") {
		Status = "Please enter the Email address your sending this to";
	} else if (FromEmail eq "") {
		Status = "Please enter your email address";
	} else if (Greeting eq "") {
		Status = "Please enter a greeting message";
	} else if (IntroMessage eq "") {
		Status = "Please enter a Intro Message";
	} else {
		gotoAndStop (3);
		Status = "Sending Ecard - Please Hold";
		loadVariablesNum ("SendEcard.php", 0, "POST");
	}
}

[kglad]

assign your textfields instance names.

then use the code snippets to get a reference to each textfield.  for example, to have an object click (eg, b) retrieve the text for name_tf:

var tf;
if(!this.name_tf_change_cbk) {
function name_tf_change(evt) {
tf = evt.target;
}
$("#dom_overlay_container").on("focus", "#name_tf", name_tf_change.bind(this));
this.name_tf_change_cbk = true;
}

this.b.addEventListener('click',f.bind(this));
function f(e){
alert(tf.value);
}

[isilud_tengille]

Hi all, sorry I haven't been on to reply, just finished a major move to a new state. I just refamiliarized with my project, maybe I should ask again because now I just realized there is an input text component. I want to try to use that first before resorting to the whole "floating text fields with css etc..." if the component makes things easier..

OK with the above button code I mentioned in the original post, (I might need someone to actually help me with this, like code it correctly for me ready to use) ahem so I have before me a button that should execute that code, and then I have the various input text field components. I noticed that there is a parameters button and it shows the following:

-value

-disabled

-visible

-class

Would class be the same as variable?  In the JS file I see this:

this.ToName = new lib.an_TextInput({'id': 'ToName', 'value':'', 'disabled':false, 'visible':true, 'class':'ToName'});

Could I simply leave class blank and forcefully add  'variable':'ToName'  in there with the above code?

And lastly, there's a dynamic textbox. In AA, there's no variable field. Can I simply add:

this.Status.Variable = "Status";