0

Tengo un modal con un form que toma algunos datos del usuario para recibir la demo de un servicio.

Ahora necesito que, cuando el usuario complete los campos y envíe los datos mediante submit, el modal no se cierre automáticamente. La idea es que en el mismo modal, una vez accionado submit, arroje el mensaje tipo "Te hemos enviado un mail a tu casilla ..."

Les dejo el ejemplo.

var modalslide1demo1 = document.getElementById('ModalSlide1Demo1');
var btnslide1demo1 = document.getElementById("BtnSlide1Demo1");
var spanslide1demo1 = document.getElementsByClassName("close")[0];
btnslide1demo1.onclick = function() {
  modalslide1demo1.style.display = "block";
}
spanslide1demo1.onclick = function() {
  modalslide1demo1.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modalslide1demo1.style.display = "none";
  }
}
/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  /* Could be more or less, depending on screen size */
}


/* The Close Button */

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
<a class="btn btn-lg btn-primary-2 calltoaction" role="button" id="BtnSlide1Demo1">PROBAR DEMO</a>

<div id="ModalSlide1Demo1" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <?php
              if ($response != null && $response->success) {
                echo "Hi " . $_POST["nombre"] . " (" . $_POST["email"] . "), thanks for submitting the form!";
              } else {
            ?>
      <form class="form" action="" method="post">
        <div class="form-group">
          <label class="sr-only" fo ">Nombre</label>
                    <input type="text " class="form-control " name="nombre " placeholder="Nombre (obligatorio) " required>
                  </div>
                  <div class="form-group ">
                    <label class="sr-only " for=" ">Apellido</label>
                    <input type="text " class="form-control " name="apellido " placeholder="Apellido (obligatorio) " required>
                  </div>
                  <div class="form-group ">
                    <label class="sr-only " fo">Email</label>
          <input type="email" class="form-control" name="email" placeholder="Email (obligatorio)" required>
        </div>
        <div class="form-group">
          <label class="sr-only" for="">Celular</label>
          <input type="tel" class="form-control" name="celular" placeholder="Celular">
        </div>
        <div class="form-group">
          <label class="sr-only" for="">Teléfono Fijo</label>
          <input type="tel" class="form-control" name="telefono" placeholder="Teléfono Fijo">
        </div>
        <div class="g-recaptcha" data-sitekey=""></div>
        <button type="submit" value="submit" class="btn btn-default" id="">Probar</button>
      </form>
      <?php } ?>

  </div>
</div>
1
  • Enves de hacer un submit, usa un ajax para enviar los datos, luego utiliza solo javascript para cambiar el HTML del dialog. Aqui un link de como usar Ajax con JQuery y PHP. Ejemplo JQuery y PHP Commented el 17 feb. 2017 a las 19:00

3 respuestas 3

0

Debes usar Ajax:

$(".form").on("submit", function() {
    data = $(this).serializeArray();
    $response = $("#response");
    $.ajax({
        type: "POST",
        data: (data),
        dataType: 'json',
        url: URL + '/get_formulario',
        beforeSend: function() {
            // haz un loading
        },
        success: function(data) {
            $response.html(data);
        }
    });
});

Crea un get_formulario.php o que éste sea una función de un controlador, depende de cómo esté organizado el proyecto.

Dentro de la modal donde tienes puesto:

<?php
          if ($response != null && $response->success) {
            echo "Hi " . $_POST["nombre"] . " (" . $_POST["email"] . "), thanks for submitting the form!";
          } else {
        ?>

simplemente crea un div donde irá la respuesta que envíes desde el get_formulario y recibas en el ajax como data:

<div id="response"></div>

El get_formulario debería quedarte:

$data = $_POST[];
// haces toda la validación y creas tu respuesta en html
echo json_encode($response, JSON_NUMERIC_CHECK);
0

Lamento decirte que no hay una forma de hacer lo que quieres sin usar AJAX.

Esa es la manera en la que funcionan normalmente, haces una petición GET (posiblemente mediante un link llegas a esa pagina) y después haces un POST al presionar el submit.

Si quieres que el modal no se cierre, tendrás que hacer una petición asíncrona con AJAX usando Javascript.

Googleando de forma rapida me arroja un ejemplo con PHP (que parece es el lenguaje que estas usando) y con jQuery, una libreria de Javascript.

Cambien te recomiendo esta excelente respuesta de como usar AJAX.

0

Cuando envíes el formulario puedes agregar una variable de session para indicarle a la vista que se envió correctamente, luego en el modal para que esté abierto puedes hacer algo así:

<div id="ModalSlide1Demo1" class="modal" <?= isset($variabledesession) ? 'style="display:block;"' : '' ?>>

Esto para que lo muestre. También puedes variar con la class que le asignas de esta misma forma para que se muestre abierto o cerrado al entrar en dicha página. Una vez mostrado deberás borrar esa variable para que no lo muestre más.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.