Ayuda con Javascript

Amigos, una ayuda con Yii2:

En los formularios uno podia hacer uso de javascript de forma fácil de la siguiente manera:

*Formulario:

<span>Valor #1</span>

<input type="text" id="txt_campo_1" onchange="sumar(this.value);" />

<br/ >

<span>Valor #2</span>

<input type="text" id="txt_campo_2" onchange="sumar(this.value);" />

<br/ >

<span>Valor #3</span>

<input type="text" id="txt_campo_3" onchange="sumar(this.value);" />

<br/ >

<span>El resultado es: </span> <span id="spTotal"></span>

*El codigo Javascript

/* Sumar dos números. */

function sumar (valor) {

    var total = 0;	

    valor = parseInt(valor); // Convertir el valor a un entero (número).

	

    total = document.getElementById('spTotal').innerHTML;

	

    // Aquí valido si hay un valor previo, si no hay datos, le pongo un cero "0".

    total = (total == null || total == undefined || total == "") ? 0 : total;

	

    /* Esta es la suma. */

    total = (parseInt(total) + parseInt(valor));

	

    // Colocar el resultado de la suma en el control "span".

    document.getElementById('spTotal').innerHTML = total;

}

Como ya se dieron cuenta, es php puro donde a medida que ingresas un numero en un input se va sumando entre ellos, quiero hacer lo mismo con un formulario en Yii2 pero no he podido hacerlo, uso ActiveForm, ejemplo:

<?= $form->field($model, "horas")->label(false); ?>

alguno sabe como se hace ahi? como se declará una funcion JS? tendran algun ejemplo para aprender? gracias.

Hola Bryan, pon la forma completa con el textInput y hay le pasas los atributos.

<?= $form->field($model, "horas")->textInput(['onchange' => 'hola();'])->label(false); ?>

Respecto de como poner JS, en la vista:

use yii\web\View;


$scrip1 = 'function sumar (valor){

  ... la funcion

}';


$this->registerJs($scrip1, View::POS_END, 'suma');

saludos

Gracias, Pero no logro hacerlo funcionar, veo que pusiste un "hola();" sin pasarle parametros, igual lo intente y no lo logro.

podrias enviar algun ejemplo que tengas?

gracias de antemano

1. Para pasar javascript de php a la vista (en Yii2) debes envolverlo en New JsExpression(‘su funcion’);

2. Desde hace ya bastante tiempo no se recomienda utilizar funciones javascript en los atributos de los elementos. Es mejor que le pongas una clase o una id y obtengas el objeto con document.getElementById. Algunas versiones de navegadores están empezando a ignorar estas funciones en linea, sobre todo en dispositivos móviles.

3. El método onChange sólo se dispara cuando se pierde el foco sobre el input. Te recomiendo que emplees onKeyup

perdona, puse una funcion ficticia hola, en tu caso sería:

<?= $form->field($model, "horas")->textInput(['onchange' => 'sumar(this.value);'])->label(false); 

//horas seria un atributo del modelo

?>

El codigo en Html debe mostrar el input con el formato que buscas.

Ten cuidado con las comillas en las funciones javascript encerradas entre comillas, pon:

$scrip1 = "function sumar (valor){

  ... la funcion

}";

para que no den conflictos con las comillas de tu funcion.

como ejemplo mas simple pon en la funcion solo alert(‘funciona’); y comprueba que se ejecuta el evento.

saludos