0

Estuve probando de muchas formas y no encontnre el codigo que utilizo es el siguiente y me muestra solo en un span y necesito el resultado en un input para mediante un form insertarlo en una DB. Pero al no tener el input de resultado no puedo.

Si alguien me da una mano desde ya agradezco.

    /* 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;
    }
    <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>
    <br/ >
    <input id="spTotal" type="text">

1
  • 2
    Pues cambia el span por un input deshabilitado para que el usuario no lo modifique, no?
    – Alfabravo
    el 22 may. 2019 a las 14:51

4 respuestas 4

1

Ya lo tienes casi resuelto, sólo pasa que estás usando el mismo id para dos elementos, es decir, para tu span y tu input total, entonces, una solución sería cambiar el id del input y simplemente cargas el valor exáctamente como haces con el span, con la diferencia de que no se debe hacer con innerHTML sino con value porque ahora vas a usar un input y para los input se les modifica es el valor, es decir, quedaría de esta forma:

//Colocar el resultado de la suma en el control "span".
document.getElementById('spTotal').innerHTML = total;

//Ahora se añade esta nueva línea para cargar el valor en el input    
document.getElementById('idDelInput').value = total;
1
  • Muchas gracias ! si entendi , yo puse .value(total); y no funciono error mio. el 22 may. 2019 a las 16:58
1

Debes tener en cuenta varias cosas en tu planteamiento.

La primera es lo que dice @Alfabravo en su comentario, si colocas el resultado en un input normal, el usuario podría modificar su valor antes de enviarlo.

Por otra parte, tanto tu input como tu span comparten identificador (id=spTotal) y eso puede darte problemas pues un identificador debe ser único.

Si quieres mantener ambos (span e input) y colocar el resultado en los dos, deberás cambiar el id de uno de los dos y añadir el valor en el input en su value.

Personalmente te aconsejo desabilitar el input también (incluso eliminar el span u ocultar el input pues tener dos veces el resultado mostrado no tiene mucho sentido)

/* 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;
  document.getElementById('inputTotal').value = total;
}
<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>
<br/ >
<input id="inputTotal" type="text" disabled>

1

Creo que te refieres a eso, si no es así explica un poco mejor tu problema e intentaremos ayudarte, un saludo.

    /* 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;
        document.getElementById('valorInput').value = total;
    }
   <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>
    <br/ >
    <input id="valorInput" type="text" >

Como puedes ver aquí el elemento input tiene un atributo .value donde esta el valor que se le dará a este input. En la función de JS lo que hago es asignarle el valor total al 'input.value'. Una vez hecho esto podrías poner un botón tipo submit y enviar este valor para introducirlo en la base de datos o donde desees.

2
  • Porfavor, no pongas sólo código en las respuestas, explica cual fue la solución, sino el OP sigue sin darse cuenta que hacía mal, o como debía hacerlo el 22 may. 2019 a las 14:59
  • Muchas gracias, esto es lo que buscaba quise hacer algo similar pero claramente tengo que leer mas sobre js. Gracias! el 22 may. 2019 a las 16:56
1

Estas duplicando el id del <span></span> con el id del input, deberías agregar un id diferente para que le puedas asignar el valor a tu input y el texto a tu span, de esta manera quedaría como lo necesitas, puedes usar el atributo readonly para que no pueda modificar el input.

/* 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;
        document.getElementById('total').value = total;
    }
<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>
    <br/ >
    <input id="total" type="text" readonly>

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.