Formulario en ventana modal de bootstrap

K

kike2lucas #1 Abr '15

Buenas a todos. Tengo un problema con un formulario en una ventana modal de bootstrap. El tema es que se recarga la página de fondo y la ventana queda clavada sin enviar el formulario.
Es un formulario de registro de usuarios (registro.php) y estoy intentando que la respuesta al mismo (los errores de validación o la confirmación de que todo está OK) se vea en la misma ventana modal, pero no lo consigo.
Mis conocimientos de Javascript son bastante limitados, el código lo tomé de una web. Agradecería si me pueden dar una mano.

            <form action="register.php" method="POST" name="adsearch" id="register"> 
            <div class="alert-box success form-feedback">Data OK</div>
				 <div class="register-top-grid">
					<label for="name">Nombre*</label>
					<input name="name" id="name" type="text" class="" value="" />
    				<label for="surname">Apellido*</label>
					<input name="surname" id="surname" type="text" class="" value="" />
<input type="submit" name="submit_reg" value="Registrarse" class="register" /> 
</form>

Y el script Javascript es el siguiente

<script language="javascript">
$(function() {
  $("#register").submit(function(e) {
    e.preventDefault();
 
$form = $(this);
$.post(document.location.href, $form.serialize(), function(response) {
  $feedback = $("<div>").html(response).find(".form-feedback").hide();

  $feedback.fadeIn();
});
  });
})  

</script>

A ver si alguien puede ver el error o sugerirme un código más sencillo. Lo que necesito es que el formulario se procese en la misma ventana modal. El action del formulario es el mismo archivo (registro.php).
Gracias de antemano

KoRMuZ #2 Abr '15

Estás mirando qué te devuelve en la consola? Normalmente, cuando tienes puesto un preventDefault y aún así te recarga la página, es porque hay un error de JS en algún sitio.

Yo no llamaría con dólares a las variables de javascript, la pondría tal que así:

var feedback = ......

También, estás metiendo en una variable, la acción de ocultar el div. Yo lo pondría tal que así.

var feedback = $("<div>").find(".form-feedback");
feedback.html(response);
feedback.hide();
feedback.fadeIn();

Prueba y me cuentas

K

kike2lucas #3 Abr '15

Mil gracias por la rápida respuesta. He probado los cambios y la página de fondo del modal no se recarga, pero el formulario sigue sin enviarse :wtf:

K

kike2lucas #4 Abr '15

Creo que he confundido un poco con el tema del feedback, ya que la respuesta la da la propia página php. Indagando he encontrado ésto

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

donde:
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"
Creo que el error podría estar en la línea

data: $(this).serialize(),

Es posible?

JuAn4k4 #5 Abr '15

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

Debería ser

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

El serialize está bien, mira en la consola de chrome -> Network y verás que hace una petición a "undefined" seguramente.

Algo así:

var $register = $("#register");

$register.on("submit" , function(e) {
         e.preventDefault();
        $.ajax({
            type: $register.attr("type"),
            url: $register.attr('action'),
            data: $register.serialize(),
            success: function(data) {
                $('#result2').html(data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                if (window.console) { console.error("Error submitting register form: " + textStatus); console.error(errorThrown); }
            }
        })
        

    return false;
});

K

kike2lucas #6 Abr '15

Al cambiar

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

por

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

El formulario se envía pero no se procesa en la ventana modal.
Si cambio el script por el que enviaste el formulario no se envía. La consola de chrome no me muestra errores (aclaro que no controlo mucho Javascript), o tal vez no sepa usarla :S

Adjunto lo que creo es lo más relevante del código
index.php

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

K

kike2lucas #7 Abr '15

Y el formulario:
register.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>

Formulario en ventana modal de bootstrap

Usuarios habituales

Tags