[SOLUCIONADO] Implementar Jquery en php

bsanchez0323 · #1 (**permalink**) 09/08/2013, 16:41

Hola todos tengo una duda, quisiera saber si es posible implementar jquery en un formulario que tengo en php, lo he hecho con codeigniter pero ahora quiero hacerlo sin ningun framework, es posible? ya que tengo esto:

Código PHP:

Ver originalDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title></title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<script type="text/javascript" src="js/validate.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<div id="header">
<center>
<form name="ingresar" action="conn.php" method="post" id="ingresar">
Usuario: <input type="text" name="user"><br></dt>
<br>
Contraseña: <input type="password" name="pass"><br>
<br>
<input type="submit" value="Enviar">
</form>
 
</center>
</div>
</body>
</html>

Código Javascript:

Ver original$(document).ready(function(){
    enviar_datos;
 
});
function enviar_datos(){
    $("#ingresar").validate({
        submitHandler: function( form ){
            $(form).ajaxSubmit({
                beforeSubmit: function(){               
                    alert("Enviando..");
                },
                success: function( data ){          
                    alert("enviado");
                }
            });
        }
    });
}

Al revisar los js con la consola de mozilla no marca errores y al presionar ctrl + u me los muestra sin problemas solo que cuando presiono el boton enviar no pasa nada lo hace normal no con ajax de jquery ayuda xfavor.

fhederico · #2 (**permalink**) 09/08/2013, 20:49

Hola,

Sobre tu duda, si, Jquery lo puedes ocupar en cualquier lenguaje.

Sobre tu codigo, primero debemos indicarle al "validate" que ese campo es requerido, esto lo hacemos colocandole "required"

Código:

 Usuario: <input type="text" name="user" required="required">

Con esto, el sabra que ese input es requerido y que deben al menos escribir un caracter.

Sobre tu codigo, cambie tu ajaxSubmit por un Ajax normal

Código:

<script type="text/javascript">
         $(document).ready(function()
        {
            $("#ingresar").validate({
                submitHandler: function(form)
                {
                    $.ajax(
                    {
                        type: "POST",
                        url: "hola.php",
                        data: $("#ingresar").serialize(), //Enviamos los datos del formulario
                        success: function(data, textStatus, XMLHttpRequest){
                            alert("enviado");
                        },
                        error: function(data, textStatus, XMLHttpRequest){
                            alert("mal");
                        }
                    });
                }
            });

            
        });
     </script>

Y hace lo que deseas.

Saludos

Rafael · #3 (**permalink**) 11/08/2013, 23:05

Creo que estás algo revuelto.

Tu formulario no es php. Un formulario esta hecho en html. El php va aparte y después, ya que el formulario lo enviaste.

Jquery le dá ciertas funciones extra como el validarlo y Jquery es un framework. ¿Como entonces no quieres usar ningún framework?

bsanchez0323 · #4 (**permalink**) 12/08/2013, 09:09

Cita:

Iniciado por fhederico

Hola,

Sobre tu duda, si, Jquery lo puedes ocupar en cualquier lenguaje.

Sobre tu codigo, primero debemos indicarle al "validate" que ese campo es requerido, esto lo hacemos colocandole "required"

Código:

 Usuario: <input type="text" name="user" required="required">

Con esto, el sabra que ese input es requerido y que deben al menos escribir un caracter.

Sobre tu codigo, cambie tu ajaxSubmit por un Ajax normal

Código:

<script type="text/javascript">
         $(document).ready(function()
        {
            $("#ingresar").validate({
                submitHandler: function(form)
                {
                    $.ajax(
                    {
                        type: "POST",
                        url: "hola.php",
                        data: $("#ingresar").serialize(), //Enviamos los datos del formulario
                        success: function(data, textStatus, XMLHttpRequest){
                            alert("enviado");
                        },
                        error: function(data, textStatus, XMLHttpRequest){
                            alert("mal");
                        }
                    });
                }
            });

            
        });
     </script>

Y hace lo que deseas.

Saludos

Hola fhederico muchas gracias, me ha servido de mucho para realizar el validate, sin embargo el formulario me lo sigue haciendo sin ajax, he copiado el código tal cual, cargo los js y no marca ningún error solo que cuando presiono enviar no me hace el submit x ajax ¿que puede ser?

bsanchez0323 · #5 (**permalink**) 12/08/2013, 09:12

Cita:

Iniciado por Rafael

Creo que estás algo revuelto.

Tu formulario no es php. Un formulario esta hecho en html. El php va aparte y después, ya que el formulario lo enviaste.

Jquery le dá ciertas funciones extra como el validarlo y Jquery es un framework. ¿Como entonces no quieres usar ningún framework?

Hola Rafael si conosco de php html y muy pokito de jquery me referia a no utilizar algún framework de php ya que como les mencionaba lo he hecho antes con CodeIgniter pero solo con php no. Gracias :)

bsanchez0323 · #6 (**permalink**) 12/08/2013, 09:38

Hola fhederico Ya detecté el error, lo que pasa que yo estaba colocando esto en la etiqueta form:

Código HTML:

Ver original<form name="ingresar" action="check.php" method="post" id="formulario">

y debia ser :

Código HTML:

Ver original<form name="ingresar" id="ingresar">

ya que para hacer el ajax utilizo el id del form y yo lo tenia equivocado.

Muchas gracias x tu respuesta ahora ya voy entendiendo mas como aplicarlo sin framework de php =)