Ir al contenido


Foto

SUmar dos valor de inputs y mostrarlos en otro del mismo form JQUERY


  • Por favor identifícate para responder
2 respuestas en este tema

#1 kosios

kosios

    Member

  • Miembros
  • PipPip
  • 39 mensajes

Escrito 13 septiembre 2011 - 05:03

hola a todos como hago para sumas el valor de dos inputs, para mostrarlo en otro del mismo formulario, usando jquery live, ya q el formulario no existe como tal en la pagina donde se visualiza.


tengo u home donde muestro los resultados q traiga asincronicamente, en este caso un formulario donde tengo 3 inputs dos de ellos se deben sumar y mostrar su valor en el 3 input, antes de enviarlo por ajax nuevamente.

no he podido lograrlo ya q supongo q debo utilizar live de query pero no se como capturar esos valores apenas los digiten y q luego se muestres casi magicamente en el 3 input. porfavor hecharme una mano.
  • 0

#2 squall2501

squall2501

    Advanced Member

  • Miembros
  • PipPipPip
  • 82 mensajes
  • Locationen oa

Escrito 13 septiembre 2011 - 07:00

Estimado

¿Porque no lo haces con ajax ,ya que lo estas usando?

Podrías hacer lo siguiente cuando cambie el ultimo input podrías enviar las variables a una pagina php que las calcule y que te devuelva la respuesta en un input y si deseas colocarlo al final de ese mismo formulario usa append que te añade la respuesta  al final de cualquier información o prepend si l quieres al principio

Ahora si quieres también podrías tener el segundo campo disabled para que obligues a la persona a llenar el primero antes de que pueda ingresar el segundo campo...lo podrías hacer añadiendo una función con  removeAttr('disabled') cuando cambie el primer input

[java]

<html>
    <head>
        <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
   
   
        <script type="text/javascript">
       
   
        $(document).ready(function(){



$('#val2').change(function(){
                 
                  //envia las variables val1 y val2 via post con el value de los campos
                  //val 1 y val 2 cuando cambie el input val 2
                  $.post('ajax.php',{val1:$('#val1').val(),val2:$('#val2').val()},function(data){
                   
                  //eliminamos el primer input por si la persona vuelve a enviar
                  //una peticion
                    $('#respuesta').remove();
                    //se cargara al final del form resultado
                      $('#resultado').append(data);
                       
               
        })


})
   
    }) 
   
        </script>
   
    </head>
   
    <body>
       
       
    <form id="resultado">
        <input type="text" size="8" name="val1" id="val1"/>
        <br/>
        <input type="text" size="8" name="val2" id="val2"/>
       
        </form>
 
       
    </body>
   
</html>





[/java]


Y la pagina ajax.php

[java]



<?php

$valor1=$_POST['val1'];
$valor2=$_POST['val2'];
//sumamos las dos variables que viene por post
$resultado=$val1 $val2;

?>

<input id="respuesta" name="respuesta" type="text" size="8" value="<?php echo $resultado?>" readonly/>


[/java]
  • 0

#3 kosios

kosios

    Member

  • Miembros
  • PipPip
  • 39 mensajes

Escrito 14 septiembre 2011 - 09:12

hola la respuesta es suprepamente Exitosa, Pero tengoun problema, Si utilizo mas $(documente).ready  se ejecutaran al mismo tiempo todos los metodos que tengo dentro de js, aqui te pongo el ejemplo q no se como hacer para llamar q no se me ejecuten todos al mismo tiempo.



javascript
  1. $(document).ready(function(){
  2.  
  3.     $('#form_registro').submit(function(){
  4.     $("#status").ajaxStart(function(){
  5.     $("#status").html("<img src='../img/cargar.gif'/>");
  6.     });
  7.     $.ajax({
  8.                         type:'POST',
  9.                         url:'../php/sw_operador.php',
  10.                         data:$('#form_registro').serialize(),
  11.                
  12.         success: function(data){
  13.             $("#status").text(data);
  14.         $("#form_registro")[0].reset();
  15.        
  16.           }
  17.        
  18.         });
  19.     return false;
  20.     });
  21.    
  22.   });
  23.  
  24.   $(document).ready(function(){
  25.  
  26.     $('#form-co-ve').submit(function(){
  27.     $("#status-co").ajaxStart(function(){
  28.     $("#status-co").html("<img src='../img/cargar.gif'/>");
  29.     });
  30.     $.ajax({
  31.                         type:'POST',
  32.                         url:'../php/sw_operador.php',
  33.                         data:$('#form-co-ve').serialize(),
  34.                
  35.         success: function(data){
  36.         $('#registro-co-ve').find('dl').slideUp('normal', function(){
  37.             $('#registro-co-ve').html(data);
  38.             });       
  39.           }
  40.        
  41.         });
  42.     return false;
  43.     });
  44.    
  45.   });



Y asi tengo 5 mas y me toca deshabilitar todos y dejar uno para q funcione bien... como hago para tenerlos todos juncionando independientemente.???? esto es un MIsmo archivo funciones.js
  • 0




IP.Board spam blocked by CleanTalk.