Problema con formulario en ventana modal de bootstrap

Citar

Escrito el 08 Abr 2015 07:01 pm

Hola. Tengo un problema con un formulario que quiero que se procese en una ventana modal de Bootstrap sin recargar la página.
El formulario que tengo en la ventana tiene el id="register", y está incluído en un archivo register.php, que se autoprocesa (action="register.php")
El tema es que cuando envío el formulario el código ajax no me funciona (entinedo más bien poco de ajax) y la página se recarga. A ver si alguien puede ver algún error en el script:

Código Javascript :

$(document).ready(function() {
    $().ajaxStart(function() {
        $('#loading').show();
        $('#result2').hide();
    }).ajaxStop(function() {
        $('#loading').hide();
      $('#result2').fadeIn('slow');
    });
    $('#register').submit(function() {
        $.ajax({
            type: 'POST',
            url: $(this).attr('register.php'),
            data: $(this).serialize(),
            success: function(data) {
                $('#result2').html(data);
            
            }
        })
        
        return false;
    }); 
})

El div#loading es un gif de precarga, no tiene importancia.
El div#result2 es donde debería cargar la respuesta del servidor que da el mismo "register.php"

Estuve tocando cosas y me da la sensación que el error está en la línea:

Código Javascript :

data: $(this).serialize(),

Alguien puede verlo?

Por kike2lucas

1 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 09 Abr 2015 02:28 pm

Noup no se puede ver cuando no pones el HTML.

Favor de colocar tu ejemplo en JSFiddle o similar. Hagas lo que hagas si vas a poner el HTML aqui, que venga sin CSS. ¿okay?

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Web

FullStack Web Developer

@elporfirio

Citar

Escrito el 11 Abr 2015 06:25 am

La verdad es que no sé mucho de Javascript, por ello no uso JSFiddle. Pego el código más relevante acá abajo a ver si ahora se puede ver algo:

index.php

Código PHP :

<!DOCTYPE html>
<html>
<head>
<title></title>

<link href="css/animate.css" rel='stylesheet' type='text/css' />

</head>
<body>

    <!-- header-section-starts -->
   <div class="header">
            <div class="login-section">
               <ul>
                  <li><a href="login.html">Ingresar</a>  </li> |
                  <li><a href="#" data-toggle="modal" data-target="#basicModal">Registrarse</a></li> 
                  <div class="clearfix"></div>
               </ul>
            </div>

      </div>
<!--- Modal Register -->        
 <?php include 'register.php'; ?>
        


   <!-- header-section-ends -->


   <!-- content-section-ends -->
   <!-- footer-section-starts -->
    
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
   <!-- footer-section-ends -->
   
<script language="javascript">
$(document).ready(function() {
    $().ajaxStart(function() {
        $('#loading').show();
        $('#result2').hide();
    }).ajaxStop(function() {
        $('#loading').hide();
      $('#result2').fadeIn('slow');
    });
    $('#register').submit(function() {
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data) {
                $('#result2').html(data);
            
            }
         })
       
        return false;
      })
})  
</script>

Register.php

Código PHP :

<?php include 'conex.php'; ?>
   <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Registrarse</h4>
          </div>
          
          <div class="modal-body">
<?php if (isset ($_POST["submit_reg"])){
echo "formulario enviado";
}

?>          
         
            <form id="register" action="register.php" method="POST" name="adsearch"> 
             <div class="register-top-grid">
               <label for="name">Nombre*</label>
               <input name="name" id="name" type="text" class="<?php if (isset($errorname) && $errorname==true) {echo "error";}?>" value="<?php if (isset($name)){echo $name;} ?>" />
                <label for="surname">Apellido*</label>
               <input name="surname" id="surname" type="text" class="<?php if (isset($errorsurname) && $errorsurname==true) {echo "error";}?>" value="<?php if (isset($surname)){echo $surname;} ?>" />
                   <input type="submit" name="submit_reg" value="Registrarse" class="register" /> 
                    </form>
            </div>
            <div id="result2"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
          </div>
         </div><!-- End Modal body -->
      
      </div>
   </div>
  </div>

Con los últimos cambios

Código Javascript :

url: $(this).attr('action'),

en lugar de

Código Javascript :

url: $(this).attr('register.php'),

El formulario se procesa pero en la página register.php, no en la ventana modal

Por kike2lucas

1 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 12 Abr 2015 01:55 pm

Bueno lo unico que noto es que tienes demasiados errores en tu codigo del "modal"

Como PHP no te los muestra no los puedes ver, en fin:

El JS esta correcto como lo dejaste, solo le cambie cosas pues no debes de ir a buscar el $(this) a cada rato.

Código Javascript :

    $(document).ready(function() {

        $().ajaxStart(function() {
            $('#loading').show();
            $('#result2').hide();
        }).ajaxStop(function() {
            $('#loading').hide();
            $('#result2').fadeIn('slow');
        });


        $('#register').on("submit", function(event) {
            event.preventDefault();

            var thisForm = $(this);

            $.ajax({
                type: thisForm.attr('method'),
                url: thisForm.attr('action'),
                data: thisForm.serialize(),
                success: function(data) {
                    $('#result2').html(data);
                }
            });
        });
    })

Si te falla algo, créeme que no tiene que ver nada con el JS.

Saludos

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Web

FullStack Web Developer

@elporfirio

Citar

Escrito el 14 Abr 2015 04:30 am

Hola elporfirio. Gracias de nuevo por tu tiempo. El código php que pegué está incompleto. Era solo a efectos de que se vean los id del formulario y la clase del submit los botones por si hiciera falta para quien revise el JS, Es cierto que tiene alguna desprolijidad (como el tema de las clases de errores en los input) pero a nivel de funcionamiento es irrelevante. De hecho probando solo el php el formulario sí se envía. En fin, seguiré probando y documentándome a ver si sale alguna cosa. Se me ocurre que puede tener que ver con el Javascript que de por sí usa la ventana modal de Bootstrap para cargarse.
Si lo resuelvo lo postearé en el foro.
Si alguien puede ver una solución que se nos escapa también se agradece.

Saludazo

Por kike2lucas

1 de clabLevel

Envíale un mensaje privado

Problema con formulario en ventana modal de bootstrap

Escribe una respuesta rapida