UI Page dynamically calculated fields

yundlu316 · ‎09-29-2016

I've created a form using a UI Page and would like some of the fields to dynamically change depending on what is entered in other fields. For example if a user fills out field A with $100,000 and field B with $25,000, is it possible for field C to dynamically change to $125,000 (A+B) without submitting or reloading the page? Would that be a client or processing script?

Thanks!

Abhinay Erra · ‎10-03-2016

You do not need onChange client script declaration. Remove everything from the client script section and just copy this

function sum(){

$('H').value=parseFloat($('D').value)+parseFloat($('G').value);

}

View solution in original post

yundlu316 · ‎10-03-2016

Hi abhi_r & shawnwu,

Here's what my client script looks like now:

function onChange(control, oldValue, newValue, isLoading) {

if (isLoading || newValue == '') {

return;}

function sum(){

document.getElementById('H').value = parseInt(document.getElementById('A').value) + parseInt(document.getElementById('B').value) + parseInt(document.getElementById('C').value) + parseInt(document.getElementById('D').value) + parseInt(document.getElementById('E').value) + parseInt(document.getElementById('F').value) + parseInt(document.getElementById('G').value);

}

On my HTML I have a submitRequest function:

function submitRequest()

{

var gr = new GlideRecord('u_form');

gr.initialize();

gr.u_personal_allowance_a = document.getElementById('A').value;

gr.u_personal_allowance_b = document.getElementById('B').value;

gr.u_personal_allowance_c = document.getElementById('C').value;

gr.u_personal_allowance_d = document.getElementById('D').value;

gr.u_personal_allowance_e = document.getElementById('E').value;

gr.u_personal_allowance_f = document.getElementById('F').value;

gr.u_personal_allowance_g = document.getElementById('G').value;

gr.u_personal_allowance_h = document.getElementById('H').value;

gr.insert();

}

</script>

And my inputs, per Kai-Hsuan's advice:

Abhinay Erra · ‎10-03-2016

Can you just post the HTML section of your UI page

yundlu316 · ‎10-03-2016

The full HTML is quite long, but here is a snippet of it:

<table>

<td class = "question">Enter "1" for yourself if no one else can claim you as a dependent</td>

</select>

</td>

</tr>

<td class = "question">Enter "1" if:

<ul>

<li> You are single and have only one job; or </li>

<li> You are married, have only one job, and your spouse does not work; or </li>

<li> Your wages from a second job or your spouse's wages (or the total of both) are $1,500 or less.</li>

</ul>

</td>

</select>

</td>

</tr>

<td class = "question">Enter "1" for your$[SP]<b>spouse</b>. But, you may choose to enter "-0-" if you are married and have either a working spouse or more than one job. (Entering "-0-" may help you avoid having too little tax withheld.)

</td>

</select>

</td>

</tr>

<td class = "question">Enter number of$[SP]<b>dependents</b>$[SP](other than your spouse or yourself) you will claim on your tax return

</td>

</td>

</tr>

<td class = "question">Enter "1" if you will file as$[SP]<b>head of household</b>$[SP]on your tax return (see conditions under$[SP]<b>Head of household</b>$[SP]above)

</td>

</select>

</td>

</tr>

<td class = "question">Enter "1" if you have at least $2,000 of$[SP]<b>child or dependent care expenses</b>$[SP]for which you plan to claim a credit<p>(<b>Note:</b>$[SP]Do$[SP]<b>not</b>$[SP]include child support payments. See Pub. 503, Child and Dependent Care Expenses, for details.) </p>

</td>

</select>

</td>

</tr>

<td class = "question"><b>Child Tax Credit</b>$[SP](including additional child tax credit). See Pub. 972, Child Tax Credit, for more information.

<ul>

<li>If your total income will be$[SP]<b>less</b>$[SP]than $70,000 ($100,000 if married), enter "2" for each eligible child; then less "1" if you have two to four eligible children or$[SP]<b>less</b>$[SP]"2" if you have five or more eligible children.</li>

<li>If your total income will be between $70,000 and $84,000 ($100,000 and $119,000 if married), enter "1" for each eligible child</li>

</ul>

</td>

</td>

</tr>

<td class = "question">Add lines A through G and enter total here. (<b>Note:</b>$[SP]This may be different from the number of exemptions you claim on your tax return.)

</td>

</td>

</tr>

</table>

If you want to see the whole thing: Edit fiddle - JSFiddle

Abhinay Erra · ‎10-03-2016

Here is the code that will add elements with id D and G and put it into H. Changes made are highlighted.

HTML:

<table>

<td class = "question">Enter "1" for yourself if no one else can claim you as a dependent</td>

</select>

</td>

</tr>

<td class = "question">Enter "1" if:

<ul>

<li> You are single and have only one job; or </li>

<li> You are married, have only one job, and your spouse does not work; or </li>

<li> Your wages from a second job or your spouse's wages (or the total of both) are $1,500 or less.</li>

</ul>

</td>

</select>

</td>

</tr>

<td class = "question">Enter "1" for your$[SP]<b>spouse</b>. But, you may choose to enter "-0-" if you are married and have either a working spouse or more than one job. (Entering "-0-" may help you avoid having too little tax withheld.)

</td>

</select>

</td>

</tr>

<td class = "question">Enter number of$[SP]<b>dependents</b>$[SP](other than your spouse or yourself) you will claim on your tax return

</td>

</td>

</tr>

<td class = "question">Enter "1" if you will file as$[SP]<b>head of household</b>$[SP]on your tax return (see conditions under$[SP]<b>Head of household</b>$[SP]above)

</td>

</select>

</td>

</tr>

<td class = "question">Enter "1" if you have at least $2,000 of$[SP]<b>child or dependent care expenses</b>$[SP]for which you plan to claim a credit<p>(<b>Note:</b>$[SP]Do$[SP]<b>not</b>$[SP]include child support payments. See Pub. 503, Child and Dependent Care Expenses, for details.) </p>

</td>

</select>

</td>

</tr>

<td class = "question"><b>Child Tax Credit</b>$[SP](including additional child tax credit). See Pub. 972, Child Tax Credit, for more information.

<ul>

<li>If your total income will be$[SP]<b>less</b>$[SP]than $70,000 ($100,000 if married), enter "2" for each eligible child; then less "1" if you have two to four eligible children or$[SP]<b>less</b>$[SP]"2" if you have five or more eligible children.</li>

<li>If your total income will be between $70,000 and $84,000 ($100,000 and $119,000 if married), enter "1" for each eligible child</li>

</ul>

</td>

</td>

</tr>

<td class = "question">Add lines A through G and enter total here. (<b>Note:</b>$[SP]This may be different from the number of exemptions you claim on your tax return.)

</td>

</td>

</tr>

</table>

Client script:

function sum(){

$('H').value=parseFloat($('D').value)+parseFloat($('G').value);

}

yundlu316 · ‎10-03-2016

Thanks for your help Abhinay, but it still doesn't work for some reason.