JQuery - Mostrar mensaje al rellenar campos de formulario

Mostrar mensaje al rellenar campos de formulario

Publicado por Sam (46 intervenciones) el 24/06/2014 10:43:40

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:

<script>

            function rellenado() {

                if ( $('#nombre' || '#apellidos').length ) {

                    document.getElementById("mensaje").style.display="block";

                    } else {

                    document.getElementById("mensaje").style.display="none";

</script>

        <style>

            #mensaje {

                display:none;

                background-color:#999999;

                width:200px;

                height:50px;

                font-size:18px;

        </style>

        <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>

en este enlace lo he subido para que vean lo que pasa:

http://www.desarrollosformativos.com/mostrar_mensaje/mostrar_div_rellenando_campo.html

gracias de antemano como siempre.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Mostrar mensaje al rellenar campos de formulario

Publicado por sam (46 intervenciones) el 25/06/2014 12:43:04

Despues de estrujarme mucho el melon creo que he dado con la solucion.

La pongo aqui como aporte por si alguien le puede servir.

Solo una duda, antes de poner el codigo.

A ver si alguien me puede decir como solucionar un pequeño detalle del codigo:

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?

gracias de antemano y aqui el aporte :

<script>

	$(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();

})

})

</script>

	<style>

		#mensaje {

		display:none;

	</style>

<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>

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 1

Val: 302

Mostrar mensaje al rellenar campos de formulario

Publicado por xve (673 intervenciones) el 25/06/2014 19:37:09

Hola Sam, segun entiendo, solo tienes que quitar los hide(), no?

algo así:

<script>

	$(document).ready(function() {

		$('#nombre,#apellidos').on('keyup',function(){

			$(this).val()!=''

				$("#mensaje").show();

});

});

	$(document).ready(function() {

		$('#combo_eventos').change(function(){

			if($(this).val()!='Elija evento')

				$("#mensaje").show():

});

});

	$(document).ready(function() {

		$('#combo_menu').change(function(){

			if($(this).val()!='Elija menu')

				$("#mensaje").show();

});

});

</script>

Coméntanos, ok?

Valora esta respuesta

Comentar

Mostrar mensaje al rellenar campos de formulario

Publicado por sam (46 intervenciones) el 25/06/2014 19:45:41

Hola xve.

No, no hay que quitar los hide.

Lo explico con otras palabras.

el formulario lleva varios input y varios select.

en el momento que escribo en un input o selecciono algo de un select, ya debe salir el mensaje.

rellene mas campos o menos, solo con que un input este rellenado o un select seleccionada una option seria suficiente

para que salga ya el mensaje.

Ahora bien.

si un campo despues de ser rellenado o seleccionado es posteriormente borrado o deseleccionado, no debe hacer que el mensaje desaparezca a menos que esten absolutamente todos los inputs y todos los select deseleccionados y vacios.

Espero que este mas claro ahora. en realidad es mas el discurso que he soltado que la solucion al problema (aunque no de con la tecla).

:-)

Valora esta respuesta

Comentar

Pos: 1

Val: 302

Mostrar mensaje al rellenar campos de formulario

Publicado por xve (673 intervenciones) el 25/06/2014 22:28:13

Hola Sam, ahora te he entendido bien...

Haber que te parece así:

<script>

	$(document).ready(function() {

		$('#nombre,#apellidos').on('keyup',function(){

			mostrarMensaje();

});

		$('#combo_eventos,#combo_menu').change(function(){

			mostrarMensaje();

});

		function mostrarMensaje()

			var combo1=$("#combo_eventos").val();

			var combo2=$("#combo_menu").val();

			var nombre=$("#nombre").val();

			var apellidos=$("#apellidos").val();

			if(combo1=="Elija evento" && combo2=="Elija menu" && nombre=="" && apellidos=="")

				console.log("K");

				$("#mensaje").show();

			}else{

				$("#mensaje").hide();

});

</script>

Valora esta respuesta

Comentar

Mostrar mensaje al rellenar campos de formulario

Publicado por sam (46 intervenciones) el 25/06/2014 23:16:25

Perfecto ahora si funciona a las mil maravillas.

Solo comentarte que en el código que me has pasado como solución al final seria al revés.

y asi funciona perfecto es decir:

console.log("K");
$("#mensaje").hide();
}else{
$("#mensaje").show();

Por cierto apunte importante por lo menos para mi:

En los inputs en la etiqueta placeholder la cual puede contener una palabra/s . Pues bien esta palabra/s NO hay que ponerlas en las comillas en el if en : nombre=="" ni en el apellidos==""

Cosa que yo creia que si fijate.

xve, una pregunta si no es mucho abusar:

¿Podrias recomendarme el titulo de algun libro de javascript / jquery bueno para principiantes?

:-)

Valora esta respuesta

Comentar

Pos: 1

Val: 302

Mostrar mensaje al rellenar campos de formulario

Publicado por xve (673 intervenciones) el 26/06/2014 08:52:05

Sam, perdona, quita la linea console.log("K"); que lo puse para ver si entraba en el condicional... te dará error en algunos navegador si no la quitas.

La verdad es que no te puedo recomendar ninguno, ya que no he leído ninguno...

En esta misma web, hay varios cursos, pero no se cual recomendarte.

Valora esta respuesta

Comentar

Mostrar mensaje al rellenar campos de formulario

Publicado por sam (46 intervenciones) el 26/06/2014 09:03:18

Vale quitare la linea que me dices.

Soy novato con jquery y javascript, pero aunque no cuestione esta linea de codigo que me dices de quitar, lo cierto es que entendia todo menos esta linea.

No te preocupes si no me puedes recomendar ninguno.

Con sinceridad he aprendido y aprendo infinitamente mas con vosotros que con muchos profesores que he tenido.

Es triste pero es asi.

el entrar en el foro de la web del programador y el "ensayo y error" hacen que vaya lento en el aprendizaje pero lo que aprendo no se va ya ni con lejia.

:-)

Valora esta respuesta

Comentar

Template

No se carga un select con jquery