Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Dynamic input fields and display info

Hello there, i wonder if someone have any ideia if in treehouse library there is any topic that talks about what im looking to achieve. I have a project where i need based in inserted values in input fields that shows automatclly display in the page there result of the combine input fieds for example. Can someone help me on this?

6 Answers

Kevin Korte
Kevin Korte
28,148 Points

I'm not sure I understood this exactly right, but take a look at this?


Roberto Alicata
Roberto Alicata
Courses Plus Student 39,959 Points

You can use the onchange event on the input fileds like this:

<input type="text" onchange="myFunction()">

and in the myFunction you can change a label or another tag's value based on any calculations you need.

I see Roberto, could you take a look in my script and help me at this. I dont have much knoledge in jquery maybe you could help me, here it is:


Basically the problem is i have to make the value show automaticlly in the page, the price appears if you fill the input field of price, but than i need to make some changes that are where it says "You receive from each sale" it should appear the value of the price of the product - 1,00€ - 1% of the full price of product. Than i need in the part that says after "and for each affiliate" appears the result of the before value minus the valule of the comission that is inserted in the input field of the comission. Could you help me at this?

Yes, its ecaxactlly this, thanks a lot Kevin :)

Kevin Korte
Kevin Korte
28,148 Points

No problem, quick note I forgot to round the commission cost to only two decimals. Easy fix, here is the updated link http://jsfiddle.net/5LrQk/5/

thanks ;)

Hello Kevin, i need some help in this script you helped me, i notice for example when you insert a comission affiliate your subtracting whit the product full cost and not whit the result value that receive of each sale, what i have to change?

For example if i put 100 full price, the result of 100 -10%- 1€ is 89, than if i put 50% of affiliate i want to subtract whit 89 and not the 100.

Take a look: http://jsfiddle.net/5LrQk/5/

Kevin Korte
Kevin Korte
28,148 Points

Hopefully, I was able to do the math right to get the results you wanted, still not 100% sure.

Basically, using your numbers and example above, I changed this line

$('#recieve').html((value - (value * 0.10) -1).toFixed(2));

The first thing we do is take the value and multiply it by 0.10, which basically gives us the value of 10% of the price, than it evaluates to the full price value, minus our new 10% value, minus 1. And finally we fix it to two decimals since we re dealing with money, that makes sense.

For the next step I changed

    affil = affil / 100;
    $('#affiliate').html(((value - (value * 0.10) -1) * affil).toFixed(2));

You mentioned 50% in your post, so the first thing we need to do is take a number like, 50, and make it 50%, or 0.50. So we take the input of the affiliate price and divide it by 100, which gives us a percentage value, and than save it back into the same variable as itself. Since our original math was in another function, we have to do the math again for the variable. If this was a bigger codebase we'd want to do something different to solve this and better follow D-R-Y principals, but for how small this is, it isn't hard to maintain.

So after we follow the same logic to get our value - 10% -1 value, we than multiple that number by our affiliate number, which is now in decimal form and basically returns a percentage value. We set the decimal to 2 again.

Hope that helps.