[SOLUCIONADO] Mostrar mensaje al rellenar campos de formulario

[mensajeescrito]

Hola amigos, a ver si me pueden echar una mano en esto:

Tengo un par de campos "imputs" y me gustaria que cuando nada mas escriba en ellos algo, me aparezca un div con un mensaje diciendo: "formulario rellenandose".

Este es el codigo que he hecho pero solo funciona con el boton que le he puesto yo. por que no se como hacer que aparezca el mensaje nada mas escribir en el input.

y aparte me sale el mensaje siempre que le doy al boton, haya puesto contenido o no en los campos input.

Agradeceria mucho una ayudita, please.

Este es el codigo que tengo hecho:

Código Javascript:

function rellenado() {
            
                if ( $('#nombre' || '#apellidos').length ) { 
                
                    document.getElementById("mensaje").style.display="block";
                
                    } else {
                         
                    document.getElementById("mensaje").style.display="none";        
                        
                    }
                    
            }
 

Código CSS:

#mensaje {
                
                display:none;
                background-color:#999999;
                width:200px;
                height:50px;
                font-size:18px; 
                
            }
 

Código HTML:

<form name="miformulario" id="miformulario" method="post" action="enviar.php"> 
            
 
                <input type="text" id="nombre" name="elnombre" placeholder="Nombre Completo" value="" title=""/>    
 
                <br/>
                
                <input type="text" id="apellidos" name="apellidos" placeholder="Apellidos" value="" title=""/>    
 
                <br/>
                
                <div id="mensaje">Formulario rellenandose</div>
                
                <br/>
                
                <input type="button" onClick="rellenado()" name="Rellenado" value="Rellenado" alt="Rellenado" />
         
        </form>
 

[bathorz]

Se me ocurre esto:

Código Javascript:

$(document).ready(function() {
        $("input").on('focus', function(e) {
          if(e.target.value == ""){
            $("#mensaje").css({"display":"block"});
          }else{
            $("#mensaje").css({"display":"none"});
          }
        });
        
        $("input").on('blur', function(e) {
            $("#mensaje").css({"display":"none"});
        });
});
 

Código HTML:

<form name="miformulario" id="miformulario" method="post" action="enviar.php"> 
      <input type="text" id="nombre" name="elnombre" placeholder="Nombre Completo" value="" title=""/><br/>
      <input type="text" id="apellidos" name="apellidos" placeholder="Apellidos" value="" title=""/><br/>
      <div id="mensaje">Formulario rellenandose</div><br/>
      <input type="button" name="Rellenado" value="Rellenado" />
    </form>
 

[Ktulu]

Yo probaría con el evento keypress de los inputs:

Código:

$('#nombre,#apellidos').on('keypress',function(){
 $(this).val()!='' ? $("#mensaje").show() : $("#mensaje").hide();
})

Espero te sirva.
Saludos!

[mensajeescrito]

Ktulu mira cuando pongo el codigo siguiente me salen los campos inputs y el mensaje directamente.

No sale el mensaje escondido (que es como deberia ser), y mostrarse cuando se escribiera algo en alguno de los inputs:

Código Javascript:

$('#nombre,#apellidos').on('keypress',function(){
     $(this).val()!='' ? $("#mensaje").show() : $("#mensaje").hide();
    })
 

Código CSS:

#mensaje {
        
        display:none;   
            
        }
 

Código HTML:

<form name="miformulario" id="miformulario" method="post" action="enviar.php">
          <input type="text" id="nombre" name="elnombre" placeholder="Nombre Completo" value="" title=""/><br/>
          <input type="text" id="apellidos" name="apellidos" placeholder="Apellidos" value="" title=""/><br/>
          <div id="mensaje">Formulario rellenandose</div><br/>
          <input type="button" name="Rellenado" value="Rellenado" />
        </form>
 

Logicamente el boton que aparece es innecesario.

[mensajeescrito]

Respecto al codigo de bathorz hace cosas muy raras veras:

Nada mas hacer click en alguno de los dos campos input aparece el mensaje. al menos deberia escribir algo diferente al texto por defecto en los campos input para que apareciera el mensaje que es como deberia ser.


en el momento que escriba en alguno de los inputs ya seria bastante para que apareciera el mensaje .

y si solo escribiera en un solo input (aunque hubiera mas inputs vacios), seria suficiente para que apareciese el texto y si le borrara el contenido desapareceria el mensaje .

es solo eso.

Código Javascript:

$(document).ready(function() {
            $("input").on('focus', function(e) {
              if(e.target.value == ""){
                $("#mensaje").css({"display":"block"});
              }else{
                $("#mensaje").css({"display":"none"});
              }
            });
           
            $("input").on('blur', function(e) {
                $("#mensaje").css({"display":"none"});
            });
    });
 

Código CSS:

#mensaje {
        
        display:none;   
            
        }
 

Código HTML:

<form name="miformulario" id="miformulario" method="post" action="enviar.php">
          <input type="text" id="nombre" name="elnombre" placeholder="Nombre Completo" value="" title=""/><br/>
          <input type="text" id="apellidos" name="apellidos" placeholder="Apellidos" value="" title=""/><br/>
          <div id="mensaje">Formulario rellenandose</div><br/>
          <input type="button" name="Rellenado" value="Rellenado" />
        </form>
 

[Ktulu]

Vuelvo a colocar el codigo completo jQuery con una modificación en cuanto al evento. Esta vez en lugar de usar keypress utilicé keyup.

Código:

$(document).ready(function() {
    $('#nombre,#apellidos').on('keyup',function(){
       $(this).val()!='' ? $("#mensaje").show() : $("#mensaje").hide();
    })
})

Acá el ejemplo funcionando:
http://jsfiddle.net/4RPv3/1/

Saludos!

[mensajeescrito]

Gracias ktulu me sirvio perfectamente.

De hecho he hecho una variante para un select + options.

El codigo lo pongo a continuacion para el que le pueda servir tambien.

Solo una ultima cosa:

el codigo tal como esta si relleno los dos inputs y elijo una opcion en los dos selects,

el "mensaje" aparece y eso es fantastico pero... si una vez en este punto borro el contendo de un input al que previamente hubiera rellenado o deseleccionara un select.

automaticamente el mensaje desaparece y esto no deberia ocurrir ya que el resto de campos siguen rellenados menos uno el cual esta borrado su contendo.

¿Como puedo arreglar esto?

Código Javascript:

$(document).ready(function() {
 
        $('#nombre,#apellidos').on('keyup',function(){
           $(this).val()!='' ? $("#mensaje").show() : $("#mensaje").hide();
        })
 
    })
 
 
 
    $(document).ready(function() {
        $('#combo_eventos').change(function(){
        <!--$( "#combo_eventos option:selected" ).each(function() {-->  
           $(this).val()!='Elija evento' ? $("#mensaje").show() : $("#mensaje").hide();
        })
    })
 
 
 
    $(document).ready(function() {
        $('#combo_menu').change(function(){ 
           $(this).val()!='Elija menu' ? $("#mensaje").show() : $("#mensaje").hide();
        })
    })
 

Código CSS:

#mensaje {
        
        display:none;   
            
        }
 

Código HTML:

<form name="miformulario" id="miformulario" method="post" action="enviar.php">
 
          <input type="text" id="nombre" name="elnombre" placeholder="Nombre Completo" value="" title=""/><br/>
          
          <input type="text" id="apellidos" name="apellidos" placeholder="Apellidos" value="" title=""/><br/>
          
          
                              <select name="combo_eventos" id="combo_eventos" title="">
                              
                              <option value="Elija evento" class="elija_evento">Elija bebida</option>
 
                                      <option value="agua">agua</option>
                                      <option value="refresco" selected="selected">refresco</option>
                                      <option value="vino" selected="selected">vino</option>
 
                              </select>   
                              
                              
                              
                              <select name="combo_menu" id="combo_menu" title="">
                              
                              <option value="Elija menu" class="elija_menu">Elija un menu *</option>
 
                                      <option value="pizza">pizza</option>
                                      <option value="kebab" selected="selected">kebab</option>
                                      <option value="Hamburguesa" selected="selected">Hamburguesa</option>
                       
                            
                              </select>                                 
                              
                          
          
          <div id="mensaje">Formulario rellenandose</div><br/>
          
        </form>
 

[Ktulu]

En ese caso vas a necesitar una función que retorne si hay campos vacíos o selects sin seleccionar a modo de validación de formularios.
Por cierto, no es necesario llamar 3 veces al método .ready(), podes incluir todo dentro de 1.
En cuanto al HTML fijate que tenes mas de un selected por grupo.

Código Javascript:

function rellenandose(){
    return $('input[type="text"]').filter(function () {return !!this.value;}).length || $('select option:selected').filter(function () {return this.index>0;}).length ? true : false;
       
}
 
$(document).ready(function() {
    $('input','#miformulario').on('keyup',function(){
        rellenandose() ? $("#mensaje").show() : $("#mensaje").hide();
    })
    
    $('select','#miformulario').on('change',function(){
        rellenandose() ? $("#mensaje").show() : $("#mensaje").hide();
    })
})
 

Código HTML:

<form name="miformulario" id="miformulario" method="post" action="enviar.php">
 
          <input type="text" id="nombre" name="elnombre" placeholder="Nombre Completo" title=""/><br/>
          
          <input type="text" id="apellidos" name="apellidos" placeholder="Apellidos" title=""/><br/>
          
          
                              <select name="combo_eventos" id="combo_eventos" title="">
                              
                              <option value="Elija evento" class="elija_evento">Elija bebida</option>
 
                                      <option value="agua">agua</option>
                                      <option value="refresco">refresco</option>
                                      <option value="vino">vino</option>
 
                              </select>   
                              
                              
                              
                              <select name="combo_menu" id="combo_menu" title="">
                              
                              <option value="Elija menu" class="elija_menu">Elija un menu *</option>
 
                                      <option value="pizza">pizza</option>
                                      <option value="kebab">kebab</option>
                                      <option value="Hamburguesa">Hamburguesa</option>
                       
                            
                              </select>                                 
                              
                          
          
          <div id="mensaje">Formulario rellenandose</div><br/>
          
        </form>
 

El ejemplo funcionando:


Saludos!

[mensajeescrito]

muchas gracias fenomeno!!!