Foros del Web » Programando para Internet » Jquery »

Resultado de suma con efecto Jquery

Estas en el tema de Resultado de suma con efecto Jquery en el foro de Jquery en Foros del Web. Hola a todos, espero me puedan ayudar. Tengo un problema, tengo una calculadora de suma en un formulario, todo bien hasta hay, pero busco que ...
  #1 (permalink)  
Antiguo 12/02/2014, 11:17
 
Fecha de Ingreso: octubre-2011
Mensajes: 11
Antigüedad: 12 años, 5 meses
Puntos: 0
Resultado de suma con efecto Jquery

Hola a todos, espero me puedan ayudar.

Tengo un problema, tengo una calculadora de suma en un formulario, todo bien hasta hay, pero busco que el resultado que lo muestra en un input text haga un efecto cada ves que cambie el resultado, por ejemplo fade in o fade out. No se como agregar el efecto, espero me puedan ayudar.

Les Comparto el código que tengo:

Código:
<form id="form1" name="form1" method="post" action="">
    <table width="600">
        <tr>
            <td><p>
                    <label>
                        <input type="radio" name="RadioGroup1" value="0.1"id="RadioGroup1_0" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup1" value="2"id="RadioGroup1_1" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup1" value="3"id="RadioGroup1_2" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup1" value="4"id="RadioGroup1_3" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup1" value="5"id="RadioGroup1_4" />
                        Opción</label>
                    <br />
                </p></td>
            <td><p>
                    <label>
                        <input type="radio" name="RadioGroup2" value="0.2"id="RadioGroup2_0" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup2" value="2"id="RadioGroup2_1" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup2" value="3"id="RadioGroup2_2" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup2" value="4"id="RadioGroup2_3" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup2" value="5"id="RadioGroup2_4" />
                        Opción</label>
                    <br />
                </p></td>
            <td><p>
                    <label>
                        <input type="radio" name="RadioGroup3" value="0.1" id="RadioGroup3_0" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup3" value="2" id="RadioGroup3_1" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup3" value="3" id="RadioGroup3_2" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup3" value="4" id="RadioGroup3_3" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup3" value="5" id="RadioGroup3_4" />
                        Opción</label>
                    <br />
                </p></td>
            <td>
                <select>
                    <option name="SelectGroup1" value="0">0</option>
                    <option name="SelectGroup1" value="1.1">1</option>
                    <option name="SelectGroup1" value="2">2</option>
                    <option name="SelectGroup1" value="3">3</option>
                    <option name="SelectGroup1" value="4">4</option>
                    <option name="SelectGroup1" value="5">5</option>
                    <option name="SelectGroup1" value="6">6</option>
                    <option name="SelectGroup1" value="7">7</option>
                    <option name="SelectGroup1" value="8">8</option>
                    <option name="SelectGroup1" value="9">9</option>
                    <option name="SelectGroup1" value="10">10</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2"><input type="text" name="resultado" id="resultado" disabled="disabled" value="0" /></td>
        </tr>
        
    </table>
</form>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(e) {
 
            $('#form1').change(function() {
 
               var obj = {};
               var string = '';
               var sum = 0;
 
               // Grupo 1
               if ($("input:radio[name=RadioGroup1]").is(':checked')) {
                  var n1 = $("input:radio[name=RadioGroup1]:checked").val();
                  sum += parseFloat(n1);
               }
               
                // Grupo 2
               if ($("input:radio[name=RadioGroup2]").is(':checked')) {
                  var n1 = $("input:radio[name=RadioGroup2]:checked").val();
                  sum += parseFloat(n1);
               }
               
                // Grupo 3
               if ($("input:radio[name=RadioGroup3]").is(':checked')) {
                  var n1 = $("input:radio[name=RadioGroup3]:checked").val();
                  sum += parseFloat(n1);
               }
               
               // Grupo 4
               if ($("select option[name=SelectGroup1]").is(':checked')) {
                  var n1 = $("select option[name=SelectGroup1]:checked").val();
                  sum += parseFloat(n1);
               }
               
 
               $('#resultado').val(sum);
 
            });
         });
 
</script>
  #2 (permalink)  
Antiguo 12/02/2014, 11:45
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 6 meses
Puntos: 578
Respuesta: Resultado de suma con efecto Jquery

No puedes, tendrías que crear un div aparte donde aparezcan los resultados y ahí hacer el fade.
  #3 (permalink)  
Antiguo 12/02/2014, 11:46
 
Fecha de Ingreso: octubre-2011
Mensajes: 11
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Resultado de suma con efecto Jquery

Cita:
Iniciado por PHPeros Ver Mensaje
No puedes, tendrías que crear un div aparte donde aparezcan los resultados y ahí hacer el fado.
Muchas gracias por el aporte, me podrías ayudar ya que ando un poco perdido.

Mil gracias.

Etiquetas: efectos, html, radiobutton, suma
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:05.