Foros del Web » Programando para Internet » Jquery »

Problema con función jquery

Estas en el tema de Problema con función jquery en el foro de Jquery en Foros del Web. Hola a todos, no consigo que esta función se ejecute correctamente. Al hacer clic en el submit del form se activa esta función, pero sólo ...
  #1 (permalink)  
Antiguo 14/02/2014, 10:32
 
Fecha de Ingreso: febrero-2014
Mensajes: 1
Antigüedad: 10 años, 10 meses
Puntos: 0
Problema con función jquery

Hola a todos, no consigo que esta función se ejecute correctamente. Al hacer clic en el submit del form se activa esta función, pero sólo me muestra los 2 primeros alert y después se recarga sola la página. Cuando vuelvo a hacer clic en el submit del form con la página ya recargada, se muestran los demás alert (empezando por el tercero) y ya se termina de ejecutar la función correctamente. ¿Alguna idea?

Es la primera vez que me pasa que una función se me queda a medio ejecutar y se recarga la página, y luego vuelvo a hacer clic para ejecutarla y sigue por donde se había quedado.

En conclusión: tengo que hacer 2 clics en lugar de 1 para que la función se ejecute.
¿Alguna idea? Gracias.


Código Javascript:
Ver original
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
  2.  
  3. <script type="text/javascript">
  4. alert("entra en el script");
  5.  
  6. $(function()
  7. {
  8. alert("entra en la funcion jquery");
  9.    
  10.     $(".submit").click(function()
  11.     {
  12.     alert("entra en la funcion del clic del submit");
  13.    
  14.         var nombre = $("#nombre").val();
  15.         var fecha = $("#fecha").val();
  16.         var dataString = 'nombre='+ nombre + '&fecha=' + fecha;
  17.         alert("variables guardadas");
  18.  
  19.         if(nombre=='' || fecha=='')
  20.         {
  21.         alert("entra en el if");
  22.    
  23.             $('.success').fadeOut(200).hide();
  24.             $('.error').fadeOut(200).show();
  25.         }
  26.         else
  27.         {
  28.         alert("entra en el else");
  29.    
  30.             $.ajax({
  31.                 type: "POST",
  32.                 url: "join.php",
  33.                 data: dataString,
  34.                 success: function()
  35.                 {
  36.                 alert("entra en el success");
  37.                    
  38.                     $('.success').fadeIn(200).show();
  39.                     $('.error').fadeOut(200).hide();
  40.                     refresca();
  41.                 }
  42.                 });
  43.         }
  44.         return false;
  45.     });
  46. });


Código HTML:
<form method="post" name="form">
	
	<ul>
		<li>
		Nombre <input id="nombre" name="nombre" type="text" />
		</li>

		<li>
		Fecha <input id="fecha" name="fecha" type="date" />
		</li>
	</ul>

	<div >
		<input type="submit" value="Submit" class="submit"/>
		<span class="error" style="display:none"> Please Enter Valid Data</span>
		<span class="success" style="display:none"> Registration Successfully</span>
	</div>

</form> 
  #2 (permalink)  
Antiguo 15/02/2014, 12:42
 
Fecha de Ingreso: enero-2010
Mensajes: 63
Antigüedad: 14 años, 11 meses
Puntos: 5
Respuesta: Problema con función jquery

Hola, lo que se me ocurre es cambiar el tipo de botón por "button'', así:

Código HTML:
Ver original
  1. <input type="button" value="Submit" class="submit"/>

Esto porque el tipo de botón "submit" envía automáticamente los datos del formulario, mientras que que al tipo "button" se le puede asociar un evento jQuery como el que tienes.

Saludo !

Última edición por jobu; 15/02/2014 a las 12:43 Razón: codigo HTML
  #3 (permalink)  
Antiguo 15/02/2014, 13:33
Avatar de rottenp4nx  
Fecha de Ingreso: octubre-2012
Ubicación: Santiago
Mensajes: 417
Antigüedad: 12 años, 2 meses
Puntos: 36
Respuesta: Problema con función jquery

Unos tips, los formularios tienen el evento submit

Código Javascript:
Ver original
  1. $("#miformulario").submit(function(e){
  2.       e.preventDefault(); //Evita el action del form
  3.       var data = $(this).serialize(); //Toma los datos del form y los transforma en una cadena
  4. });

Etiquetas: Ninguno
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 12:42.