Javascript en elementos html con Studio Creator

Es común utilizar Javascript para muchas operaciones en el cliente.

Por ejemplo, queremos que nos calcule una multiplicación entre precio unitario (p.u.) y cantidad (cant) y que ponga el resultado en total durante el proceso de captura.



Para poder hacerlo, tengo que saber los nombres con los que Studio Creator creará los componentes html de la forma. Puedo ver el "preview" con el botón de arriba en el editor.


Luego pido ver la fuente, localizo mis componentes y apunto los nombres.


El resultado cambia cuando cualquiera de los operandos se modifica, entonces escuchamos los dos inputs involucrados. Precio unitario y cantidad.

Según el preview, el input de precio unitario lo llamará form1:tabSet1:tab5:tf_pu, cantidad form1:tabSet1:tab5:tf_cantidad y total form1:tabSet1:tab5:tf_total el Javascript es muy sencillo:

document.getElementById('form1:tabSet1:tab5:tf_total').value =
 document.getElementById('form1:tabSet1:tab5:tf_pu').value *
 document.getElementById('form1:tabSet1:tab5:tf_cantidad').value;

Hay que insertarlo en los dos inputs bajo el evento onChange. Volvemos a ver el preview para confirmar los cambios en los dos inputs.

<td><input class="TxtFld" id="form1:tabSet1:tab5:tf_pu" name="form1:tabSet1:tab5:tf_pu" onchange=" document.getElementById('form1:tabSet1:tab5:tf_total').value = 
         document.getElementById('form1:tabSet1:tab5:tf_pu').value *
         document.getElementById('form1:tabSet1:tab5:tf_cantidad').value;" size="15" type="text" value="0.0" /></td>
<td><input class="TxtFld" id="form1:tabSet1:tab5:tf_cantidad" name="form1:tabSet1:tab5:tf_cantidad" onchange=" document.getElementById('form1:tabSet1:tab5:tf_total').value = 
         document.getElementById('form1:tabSet1:tab5:tf_pu').value *
         document.getElementById('form1:tabSet1:tab5:tf_cantidad').value;" size="15" type="text" value="0.0" /></td>
<td><input class="TxtFld" id="form1:tabSet1:tab5:tf_total" name="form1:tabSet1:tab5:tf_total" size="15" type="text" value="0.0" /></td>

Listo, quedó agregado el código Javascript y todo lo hicimos dentro del IDE.

Una solución más elegante sería crear una funcion que haga la operación y sólo llamar a la funcion cuando se active el evento.