Actualizar contenido de un modal

[etoukd]

Hola amigos.

Tengo un formulario, que dependiendo el resultado de la suma de los campos, mostrará un div u otro. Este div está en un modal en Bootstrap, y lo que quiero es que cuando se haga clic en el botón cree un contenido, y si hay un contenido creado, lo sustituya... no sé si me explico bien. El código es el siguiente:

Código:

<script>
        function motiva(valor1,valor2,valor3,valor4) {
            var total;
            total = parseInt(valor1.value)+parseInt(valor2.value)+parseInt(valor3.value)+parseInt(valor4.value);
            
            if (total < 5) {
                var div1 = document.createElement("div");
                div1.setAttribute("id","baja");
                div1.innerHTML = "<div>Contenido de resultado 1 en modal</div>";
                document.body.appendChild(div1);
            }
            
            else if (total < 7) {
                var div1 = document.createElement("div");
                div1.setAttribute("id","media");
				div1.innerHTML = "<div>Contenido de resultado 2 en modal</div>";
                document.body.appendChild(div1);
            }
            
            else if (total >6){
                var div1 = document.createElement("div");
                div1.setAttribute("id","media");
				div1.innerHTML = "<div>Contenido de resultado 3 en modal</div>";
                document.body.appendChild(div1);
            }
            
        }
</script>

Y el botón es este:

Código:

<input type="button" name="Ver total" value="Resultado" onclick="motiva(valor1,valor2,valor3,valor4)" data-toggle="modal" data-target="#modalFormulario">

El problema es que si carga un resultado, aunque modifique el formulario para que de otro, al volverle a dar siempre muestra el primero que ha creado...

Gracias!

[ZedGe1505]

No tengo el tiempo de recrear el código pero puede ser por que usas

Código:

appendChild()

Con eso agregas al final del modal tu resultado... y si el tamaño es menor a tu contenido (y el css conspira) siempre te mostrará el priemer resultado


EDITO:


= lo recree xD

Cuando usas

Código Javascript:

var div1 = document.createElement("div");
                div1.setAttribute("id","media");
        div1.innerHTML = "<div>Contenido de resultado 2 en modal</div>";
                document.body.appendChild(div1);
 

Creas un DIV #media y le insertas un div nuevo con el texto.... el append te irá creando DIV hacia abajo. Si modificas el append tienes el problema que = tienes 3 div con distinto ID, es decir, siempre te mostraría (en el peor de los casos) los div baja media y alta...

Prueba esto para ver si es lo que buscas

Código HTML:

<input type="button" name="Ver total" value="Resultado" onclick="motiva('1','1','1','1')" data-toggle="modal" data-target="#modalFormulario">
 

Código Javascript:

function motiva(valor1,valor2,valor3,valor4) {
            var total;
            total = parseInt(parseInt(valor1)+parseInt(valor2)+parseInt(valor3)+parseInt(valor4));
            total+=Math.random()*2;
            var div1 = document.createElement("div");
            div1.setAttribute("id","contenido");
            document.body.appendChild(div1);
            
            if (total < 5) {
               $("#contenido").html("<div>Contenido de resultado 1 en modal</div>")
            }
 
            else if (total < 7) {
               $("#contenido").html("<div>Contenido de resultado 2 en modal</div>")
            }
            
            else if (total >6){
               $("#contenido").html("<div>Contenido de resultado 3 en modal</div>")
            }
            
        }
 

[etoukd]

ok, pero en el botón quiero meter el atributo onclick="motiva(valor1,valor2,valor3,valor3)" y al picar no lanza el modal. Sí lo hace cuando introduces valores numéricos. ¿por qué puede ser?

[ZedGe1505]

Por que con

Código Javascript:

total = parseInt(parseInt(valor1)+parseInt(valor2)+parseInt(valor3)+parseInt(valor4));
 

necesitas que sean números, usa el inspeccionador de elementos para ver que elementos estás pasandole o pone el código que te genera esos valores "valor"

[etoukd]

Claro, es un valor de un formulario <input type="radio" name="valor1" value="1"> que luego suma el script en la var "total"

[ZedGe1505]

Si es de campos radio, en vez de pasarlo como parámetros hace que la función motiva obtenga el valor directamente dentro de ella de todo los campos

Código Javascript:

function motiva(){
 
valor = document.getElementById('id_del_input').value;  
//Or
valor2 = document.getElementById('id_del_input').checked 
 
total = valor+..... 
}