Problema con función jquery

[pesk1]

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:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
 
<script type="text/javascript">
alert("entra en el script");
 
$(function() 
{
alert("entra en la funcion jquery");
    
    $(".submit").click(function() 
    {
    alert("entra en la funcion del clic del submit");
    
        var nombre = $("#nombre").val();
        var fecha = $("#fecha").val();
        var dataString = 'nombre='+ nombre + '&fecha=' + fecha;
        alert("variables guardadas");
 
        if(nombre=='' || fecha=='')
        {
        alert("entra en el if");
    
            $('.success').fadeOut(200).hide();
            $('.error').fadeOut(200).show();
        }
        else
        {
        alert("entra en el else");
    
            $.ajax({
                type: "POST",
                url: "join.php",
                data: dataString,
                success: function()
                {
                alert("entra en el success");
                    
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                    refresca();
                }
                });
        }
        return false;
    });
});
 

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> 

[jobu]

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

Código HTML:

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

[rottenp4nx]

Unos tips, los formularios tienen el evento submit

Código Javascript:

$("#miformulario").submit(function(e){
      e.preventDefault(); //Evita el action del form
      var data = $(this).serialize(); //Toma los datos del form y los transforma en una cadena
});