Your one-stop web everything MJPage Design

MJPage Design

One of the many questions we receive on the Edge Animate forum is: "How do I create an input field in Edge Aimate?" and it is often followed by: "How do I check the value of that field?"

If this is your question, this is the perfect place to find the answer.


As usual, I will place my code in stage/compositionReady. To open the code window for the Stage, click on the {} backets to access it.

stage code window

Insert your text fields on the Stage where you want them. The formatting will be done in code but you can already give them the dimension you need.

In stage/compositionReady add the following code


You can copy/paste the same code for each field. You will then need to change the name and id of each file from input1 to input2 or input3.

Next we will make transparent buttons over the each 'Check' words .

Do do this, create a rectangle , select the color and make it transparent, and select the pointer.

In the elements panel, select the three buttons. Right-click to activate the context menu and choose Group Elements in DIV. Name the group 'buttons'.

We will use jquery $(each) to code them. Each child of the group is in order elements 0, 1, 2... You do not really need to name them unless it helps you to remember what is what, which I recommend in a complicated composition where you may have several groups. javaScript will go through the layers in order, the bottom one being element 0.

The complete code in compositionReady is:




var buttons = sym.$("buttons").children();     
	// click event
    $(this).on("click", function(){ 
	// conditional - check what value is entered and if it is correct show the checkmark and feedback.
    if(i==0 && input1.value==1160 || i==1 && input2.value==50 || i==2 && input3.value==100){
		sym.$('checkmark'+ (i+1)).animate({'opacity':1.00},1000);
		sym.$('feedback').html('Good job!');
	}else{ // if the value is incorrect do not show the checkmark and show feedback.
	sym.$('feedback').html('Opps, try again!');

Download the sample: Download