OnChange Event when Edit Forms

alinapia · Post by **alinapia** » Fri Mar 28, 2014 12:08 pm

How to create onchange event when user edit on text box, ex: textbox A + textbox B = textbox C. So the value on textbox C is automatically filled when A or B changed. Thank's

mobhar · Post by **mobhar** » Fri Mar 28, 2014 12:39 pm

Simply put the following code under: "Client Scripts" -> "Table-Specific" -> "Edit Page" -> "Startup Script":

$("#x_A").on('change keyup paste mouseup', function() {
$("#x_C").val($("#x_A").val() + $("#x_B").val());
});

$("#x_B").on('change keyup paste mouseup', function() {
$("#x_C").val($("#x_A").val() + $("#x_B").val());
});

alinapia · Post by **alinapia** » Sat Mar 29, 2014 10:39 am

Thank you Mobhar, I've tried your code, but nothing happen on textbox C, sorry I'm newbie in web programming. Am i missed something? Do I have to put equal sign after val C?

mobhar · Post by **mobhar** » Sun Mar 30, 2014 7:56 pm

If the name of your fields are "A", "B", and "C" respectively, then PHPMaker will generate the ID of the textbox become: "x_A", "x_B", and "x_C".

So, make sure you have inspected the ID of textboxes, and they are the same with that above.

alinapia · Post by **alinapia** » Mon Mar 31, 2014 11:25 am

It's working now, I missed the check mark on Edit Page, previously i put it on the inline edit. Now it's working but the result is not exactly I want, I want the value on textbox C is sum of the A and B. Ex: A=2, B=3 so the value of C=5, but now the value of C is 23. Please how to fix this?

danielc · Post by **danielc** » Tue Apr 01, 2014 9:25 am

Use javascript parseInt() function to convert the string to integer before your add:
var a = $("#x_A").val();
a = parseInt(a);
var b = $("#x_B").val();
b = parseInt(b);

Then,
$("#x_C").val(a+ b);

alinapia · Post by **alinapia** » Tue Apr 01, 2014 3:12 pm

it's working as expected now, after change the code from Mobhar :

$("#x_A").on('change keyup paste mouseup', function() {
$("#x_C").val(+$("#x_A").val() + +$("#x_B").val());
});

$("#x_B").on('change keyup paste mouseup', function() {
$("#x_C").val(+$("#x_A").val() + +$("#x_B").val());
});

Thank you.

siriok · Post by **siriok** » Mon May 05, 2014 9:17 am

if field A is a float tye and field B is a integer.
can it calculate due to this code??
i' tried but it don't work

danielc · Post by **danielc** » Mon May 05, 2014 11:22 am

The code will work. Post your modified code for discussion.

siriok · Post by **siriok** » Tue May 06, 2014 11:15 am

my field "sell" is a auto fill value (float type)
and field "amount" is for user to type in (integer type)
field "sumcost" is a result: (float type)
so my code is

$("#x_amount").on('change keyup paste mouseup', function() {
$("#x_sumcost").val(+$("#x_sell").val() * +$("#x_amount").val());
});

i put in in client script -> table-specific ->add/copy paste -->startup script
so do in the edit page too.
but when i run it don't matter. what wrong with it??

mobhar · Post by **mobhar** » Tue May 06, 2014 2:04 pm

Are you sure the "sell" field has already had the correct value? If you change the multiply (*) sign with plus (+) sign, doesn't it work, too?