[SOLUCIONADO] Meter en un input un resultado javascript

karenlorenadg · #1 (**permalink**) 27/10/2016, 19:33

Hola, tengo un sistema de notas hecho en javaScript que me toma los valores de varias cajas de textos y me arroja el promedio. EL problema aqui es que ese promedio me lo muestra en un DIV y como yo quiero tambien guardar en mi base de datos ese promedio quisiera pero no he podido de ninguna manera sacar ese resultado del divy meterlo enun input type=text para luego guardarlos en mi BD

No se como hacerlo

Asi tengo mi Script en JavaScript

Código HTML:

<script>

function p(){
var num1 = parseFloat(document.getElementById('n1').value);
var num2 =parseFloat(document.getElementById('n2').value);
var num3 = parseFloat(document.getElementById('n3').value);
var num4 = parseFloat(document.getElementById('n4').value);
var num5 = parseFloat(document.getElementById('n5').value);
var num6 = parseFloat(document.getElementById('n6').value);
var num7 = parseFloat(document.getElementById('n7').value);
var num8 = parseFloat(document.getElementById('n8').value);
var num9 = parseFloat(document.getElementById('n9').value);
var num10 = parseFloat(document.getElementById('n10').value);

var pro =(num1+num2+num3+num4+num5+num6+num7+num8+num9+num10)/10;
if(!isNaN(pro))
document.getElementById('promedio').innerHTML = pro.toFixed(2);
}


</script>

Asi tengo mi DIV

Código HTML:

 <div id="promedio">
        <label for=""><font face="verdana" size="3" color="#8D1805">Promedio General</font></label>
        <input type="text" id="promedio" name="promedio"/>
    </div>

Agradezco me colaboren por favor que ya no doy mas con esto.

#2 (**permalink**) 27/10/2016, 20:05

No es necesario ingresarlo en un input. Puedes tomar los datos y mediante php sacar el promedio.

De todas formas:

document.getElementById(id).value=promedio;

baldaweb · #3 (**permalink**) 28/10/2016, 00:55

Código Javascript:

Ver original$('#promedio').val(pro.toFixed(2));

karenlorenadg · #4 (**permalink**) 28/10/2016, 05:05

Cita:

Iniciado por alvaro_trewhela

No es necesario ingresarlo en un input. Puedes tomar los datos y mediante php sacar el promedio.

De todas formas:

document.getElementById(id).value=promedio;

Lo intenté asi y no me da.
Como hago entonces para guardar ese promedio en mi campo promedio de mi base de datos?

karenlorenadg · #5 (**permalink**) 28/10/2016, 05:06

Cita:

Iniciado por baldaweb

Código Javascript:

Ver original$('#promedio').val(pro.toFixed(2));

También lo intenté así y no me da.
Como hago entonces para guardar ese promedio en mi campo promedio de mi base de datos?

AngelKrak · #6 (**permalink**) 28/10/2016, 12:04

Código Javascript:

Ver originaldocument.getElementById('promedio').value = pro.toFixed(2);

asi tampoco te funciona?

karenlorenadg · #7 (**permalink**) 28/10/2016, 20:43

Cita:

Iniciado por AngelKrak

Código Javascript:

Ver originaldocument.getElementById('promedio').value = pro.toFixed(2);

asi tampoco te funciona?

Tampoco me funcionó.

No se si me estan dando la respuesta correcta pero la idea es que el Promedio si me esta dando, esa parte funciona correctamente. Lo que yo quiero es que ese resultado me salga en un input tipe=text

AngelKrak · #8 (**permalink**) 28/10/2016, 23:08

sube el código de tu pagina en Codepen para poder verla mejor y poder ayudarte

karenlorenadg · #9 (**permalink**) 29/10/2016, 12:00

Cita:

Iniciado por AngelKrak

sube el código de tu pagina en Codepen para poder verla mejor y poder ayudarte

http://codepen.io/jaicosta/pen/XjLKzm

AngelKrak · #10 (**permalink**) 29/10/2016, 14:45

no se ve tu pagina ya que tiene codigo php, mejor sube la pagina completa junto con la Base de Datos y pasame el link para bajarla ;)

#11 (**permalink**) 29/10/2016, 19:20

Es que para sacar un promedio con php puedes hacer lo siguiente:

Código PHP:

Ver original$nota1 = floatval($_POST["nota1"]);
$nota2 = floatval($_POST["nota2"]);
...
$notaN = floatval($_POST["notaN"]); 
 
$promedio = ($nota1+$nota2+...+$notaN)/n;

Es un ejemplo bastante rústico pero la idea es que se entienda...

karenlorenadg · #12 (**permalink**) 29/10/2016, 22:28

Cita:

Iniciado por alvaro_trewhela

Es que para sacar un promedio con php puedes hacer lo siguiente:

Código PHP:

Ver original$nota1 = floatval($_POST["nota1"]);
$nota2 = floatval($_POST["nota2"]);
...
$notaN = floatval($_POST["notaN"]); 
 
$promedio = ($nota1+$nota2+...+$notaN)/n;

Es un ejemplo bastante rústico pero la idea es que se entienda...

No han entendido mi pregunta. Y el promedio ya lo tengo lo que yo quiero es que ese promedio arrojado se meta en una caja de texto input type="text" para poder guardarlo en un campo de mi base de datos

AngelKrak · #13 (**permalink**) 29/10/2016, 23:29

como en tu codigo que tienes

Código Javascript:

Ver originaldocument.getElementById('promedio').innerHTML = pro.toFixed(2);

tienes que hacer otro igual pero agregando el value el input

Código Javascript:

Ver originaldocument.getElementById('input').value = pro.toFixed(2);

Dalam · #14 (**permalink**) 29/10/2016, 23:46

es tan facil como que llames a la funcion que creaste

Cita:

p();

si no llamas a tu funcion no ejecutara el codigo que introdujiste en ella, con lo que la variable pro no existe, es mas cuando la llames solo existira dentro de la funcion

#15 (**permalink**) 30/10/2016, 15:20

Estimado estás usando el mismo id 2 veces, js se queda con el primero, así que cambiale a ese input la id, por ejemplo "promedio_input" y dale con lo que TODOS te han dicho

Código Javascript:

Ver originaldocument.getElementById("promedio_input").value=prom;

karenlorenadg · #16 (**permalink**) 01/11/2016, 14:34

Cita:

Iniciado por alvaro_trewhela

Estimado estás usando el mismo id 2 veces, js se queda con el primero, así que cambiale a ese input la id, por ejemplo "promedio_input" y dale con lo que TODOS te han dicho

Código Javascript:

Ver originaldocument.getElementById("promedio_input").value=prom;

Nada mi amigo sigue sin funcionar, me sigue mostrando el promedio fuera del input, apenas registro una nota el input desaparece y en su lugar queda el promedio. Quiero meter ese promedio dentro del input que se fue

Triby · #17 (**permalink**) 01/11/2016, 15:37

Coloca nuevamente tu html, en el primero tienes un div y un input con la misma id y eso puede ser la causa del problema.

Por otra parte, con javascript resuelves un poco lo estético y funcional, sin embargo también tendrás que hacer el cálculo en PHP; recuerda que todo lo que hay en el navegador se puede manipular fácilmente.

karenlorenadg · #18 (**permalink**) 01/11/2016, 21:51

Cita:

Iniciado por Triby

Coloca nuevamente tu html, en el primero tienes un div y un input con la misma id y eso puede ser la causa del problema.

Por otra parte, con javascript resuelves un poco lo estético y funcional, sin embargo también tendrás que hacer el cálculo en PHP; recuerda que todo lo que hay en el navegador se puede manipular fácilmente.

Este es todo mi html

Código HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sisgus - Resultados de su busqueda</title>
<link rel="stylesheet" type="text/css" href="../estilo/css/bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../estilo/css/bootstrap-responsive.css">
<style type="text/css">
    /*Escritorio*/
@media  (min-width: 1200px) {
}

    /*Escritorio peqeño o tablet*/
@media  (min-width: 768px) and (max-width: 979px) {

}

    /*Tablet o Smartphone*/
@media  (max-width: 767px) {

}

    /*Smartphone*/
@media  (max-width: 480px) {

}
</style>


<script>

function p(){
var num1 = parseFloat(document.getElementById('n1').value);
var num2 =parseFloat(document.getElementById('n2').value);
var num3 = parseFloat(document.getElementById('n3').value);
var num4 = parseFloat(document.getElementById('n4').value);
var num5 = parseFloat(document.getElementById('n5').value);
var num6 = parseFloat(document.getElementById('n6').value);
var num7 = parseFloat(document.getElementById('n7').value);
var num8 = parseFloat(document.getElementById('n8').value);
var num9 = parseFloat(document.getElementById('n9').value);
var num10 = parseFloat(document.getElementById('n10').value);

var pro =(num1+num2+num3+num4+num5+num6+num7+num8+num9+num10)/10;
if(!isNaN(pro))
document.getElementById('promedio').innerHTML = pro.toFixed(2);
//document.getElementById("promedio_input").value=prom;

}


</script>




</head>

<body>

<DIV class="container">
    <div class="row-fluid">
        

   <div>
    
        <div class="row-fluid">
            <div class="page-header alert alert-success" align="right">
                
            </div>

        
            <div class="navbar">

                <div class="navbar-inner">
                    <a href="ver.php" class="brand">Listado</a>
                        <ul class="nav pull-right">
                        <li class="divider-vertical"></li>
                        <li><a href="contactar2.php">Soporte</a></li>
                        </ul>      
                    <form name="buscador" method="get" action="notas_6.php" class="navbar-search pull-right">
                        <input type="text" class="search-query" placeholder="Buscar Estudiante" name="search">
                        <a href="javascript:void(0)" title="Buscar" onClick="document.buscador.submit();">
                        <img src="http://www.forosdelweb.com/f18/images/lupa.png" width="24" height="24" border="0">
                        </a>
                    </form>

                </div>
            </div>
    </div>

  

<form action="edit_calif_6.php" method="post" name="form">



<div align="center">
    <h3 class="page-header alert alert-info">Calificar Estudiante <font face="verdana" color="green"><?php echo $reg["estudiante"];?></font> Grado <font face="verdana" color="green"><?php echo $reg["grado"];?></font></h3>
</div>


        <div align="center">
            <font face="verdana" size="4" color="#A04000">Ingrese aquí la calificacion que le corresponde en su area</font>
        </div>



    <div  class="input-prepend">
        <label for=""><font face="verdana" size="3" color="#8D1805">Matematicas</font></label>
        <span class="add-on"><i class="icon-th-list"></i></span>
        <input type="text" name="matematicas" value="<?php echo $reg["matematicas"];?>" id="n1" onkeyup="p();" />
    </div>
    <br>
    <div  class="input-prepend">
        <label for=""><font face="verdana" size="3" color="#8D1805">Ciencias Sociales</font></label>
        <span class="add-on"><i class="icon-th-list"></i></span>
        <input type="text" name="ciencias_sociales" value="<?php echo $reg["ciencias_sociales"];?>" id="n2" onkeyup="p();" />
    </div>

    <br>
    <div  class="input-prepend">
        <label for=""><font face="verdana" size="3" color="#8D1805">&Eacute;tica y Valores Humanos</font></label>
        <span class="add-on"><i class="icon-th-list"></i></span>
        <input type="text" name="etica" value="<?php echo $reg["etica"];?>" id="n3" onkeyup="p();" />
    </div>

    <br>
    <div  class="input-prepend">
        <label for=""><font face="verdana" size="3" color="#8D1805">Tecnolog&iacute;a e Inform&aacute;tica</font></label>
        <span class="add-on"><i class="icon-th-list"></i></span>
        <input type="text" name="informatica" value="<?php echo $reg["informatica"];?>" id="n4" onkeyup="p();" />
    </div>

    <br>
    <div  class="input-prepend">
        <label for=""><font face="verdana" size="3" color="#8D1805">Cienc. Naturales y Educ. Ambiental</font></label>
        <span class="add-on"><i class="icon-th-list"></i></span>
        <input type="text" name="ciencias_naturales" value="<?php echo $reg["ciencias_naturales"];?>" id="n5" onkeyup="p();" />
    </div>

    <br>
    <div  class="input-prepend">
        <label for=""><font face="verdana" size="3" color="#8D1805">Humanidades (Ingl&eacute;s)</font></label>
        <span class="add-on"><i class="icon-th-list"></i></span>
        <input type="text" name="humanidades_ingles" value="<?php echo $reg["humanidades_ingles"];?>" id="n6" onkeyup="p();" />
    </div>

    <br>
    <div  class="input-prepend">
        <label for=""><font face="verdana" size="3" color="#8D1805">Humanidades (Espa&ntilde;ol)</font></label>
        <span class="add-on"><i class="icon-th-list"></i></span>
        <input type="text" name="humanidades_spanish" value="<?php echo $reg["humanidades_spanish"];?>" id="n7" onkeyup="p();" />
    </div>

    <br>
    <div  class="input-prepend">
        <label for=""><font face="verdana" size="3" color="#8D1805">Religi&oacute;n</font></label>
        <span class="add-on"><i class="icon-th-list"></i></span>
        <input type="text" name="religion" value="<?php echo $reg["religion"];?>" id="n8" onkeyup="p();" />
    </div>

    <br>
    <div  class="input-prepend">
        <label for=""><font face="verdana" size="3" color="#8D1805">Artistica</font></label>
        <span class="add-on"><i class="icon-th-list"></i></span>
        <input type="text" name="artistica" value="<?php echo $reg["artistica"];?>" id="n9" onkeyup="p();" />
    </div>

    <br>
    <div  class="input-prepend">
        <label for=""><font face="verdana" size="3" color="#8D1805">Educ. Fisica Rec. Deporte</font></label>
        <span class="add-on"><i class="icon-th-list"></i></span>
        <input type="text" name="educ_fisica" value="<?php echo $reg["educ_fisica"];?>" id="n10" onkeyup="p();" />
    </div>

    <br>
    <div  class="input-prepend">
        <label for=""><font face="verdana" size="3" color="#8D1805">Conducta</font></label>
        <span class="add-on"><i class="icon-th-list"></i></span>
        <input type="text" name="conducta" value="<?php echo $reg["conducta"];?>" />
    </div>

    <br>
    <div id="promedio">
        <label for=""><font face="verdana" size="3" color="#8D1805">Promedio General</font></label>
        <input type="text" id="promedio" name="promedio"/>
    </div>



<br>

<div>
    <input type="hidden" name="idnota" value="<?php echo $_GET["idnota"];?>">
<input type="button" value="Volver" title="Volver" onClick="history.back();" class="btn btn-success"/>
&nbsp;&nbsp;||&nbsp;&nbsp;
<input type="submit" value="Calificar" title="Calificar" onClick="validar()" class="btn btn-success" />

</div>


</form>
<?php
}
?>

</DIV>

</body>
</html>

xerifandtomas · #19 (**permalink**) 02/11/2016, 04:38

Esto seguramente estaría resuelto si hubieses posteado en el sitio adecuado, foro javascript.
Tal como lo veo:
Esto:

Código Javascript:

Ver originalvar pro =(num1+num2+num3+num4+num5+num6+num7+num8+num9+num10)/10;
if(!isNaN(pro))
document.getElementById('promedio').innerHTML = pro.toFixed(2);
//document.getElementById("promedio_input").value=prom;

Debería quedar asi:

Código Javascript:

Ver originalvar pro =(num1+num2+num3+num4+num5+num6+num7+num8+num9+num10)/10;
if(!isNaN(pro)){
//document.getElementById('promedio').innerHTML = pro.toFixed(2);
document.getElementById("promedioInput").value=pro;
}

Y en esta parte tienes dos etiquetas con el id promedio, como ya te dijeron esto no es correcto:

Código HTML:

Ver original<div id="promedio">
        <label for=""><font face="verdana" size="3" color="#8D1805">Promedio General</font></label>
        <input type="text" id="promedio" name="promedio"/>
    </div>

Quedar así

Código HTML:

Ver original<div id="promedio">
        <label for=""><font face="verdana" size="3" color="#8D1805">Promedio General</font></label>
        <input type="text" id="promedioInput" name="promedio"/>
    </div>

Triby · #20 (**permalink**) 04/11/2016, 19:29

Parece que tu interés es solo lo que pasa en el cliente, muevo tu tema a Javascript, porque nada tiene que ver con PHP.

mpozo · #21 (**permalink**) 07/11/2016, 07:58

Es mas sencillo. A groso modo

Código Javascript:

Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
        
        </style>
        <script>
        function calcular(cual) {
            var promedio = 0;
            for (var i = 0; i < document.frm[cual].length; i++) {
                promedio += (document.frm[cual][i].value/3);
            }
            document.frm['prom_'+cual].value = (promedio).toFixed(2);
        }
 
        </script>
    </head>
    <body>
        <form name="frm">
            <b>Notas 1</b><br />
            Lenguaje: <input type="text" value="" name="nota_1" onkeyup="calcular(this.name)"><br>
            Inglés: <input type="text" value="" name="nota_1" onkeyup="calcular(this.name)"><br>
            Matemáticas: <input type="text" value="" name="nota_1" onkeyup="calcular(this.name)"><br>
            Promedio: <input type="text" value="" name="prom_nota_1">
 
            <br /><br />
            <b>Notas 2</b><br />
            Lenguaje: <input type="text" value="" name="nota_2" onkeyup="calcular(this.name)"><br>
            Inglés: <input type="text" value="" name="nota_2" onkeyup="calcular(this.name)"><br>
            Matemáticas: <input type="text" value="" name="nota_2" onkeyup="calcular(this.name)"><br>
            Promedio: <input type="text" value="" name="prom_nota_2">
        </form>
 
    </body>
</html>