I do not want my modal to be closed when sending form

Navigation
0

I have a modal with a form that takes some user data to receive the demo of a service.

Now I need that, when the user completes the fields and sends the data by submit , the modal does not close automatically. The idea is that in the same modal, once you have activated submit , throw the message type " We have sent you an email to your box ... "

I'll give you the example. 

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>
    
asked by Mauricio Tovar 17.02.2017 в 18:34
source

3 answers

0

You must use 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);
        }
    });
});

Create a get_formulario.php or let it be a function of a controller, depending on how the project is organized.

Within the modal where you are placed: 

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

simply create a div where the response you send from the get_formulario will go and you will receive in the ajax as data : 

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

The get_formulario should stay: 

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

I'm sorry to tell you that no is a way to do what you want without using AJAX .

That's the way they work normally, you make a GET request (possibly through a link you get to that page) and then do a POST by clicking the submit button .

If you want the modal not to close, you will have to make an asynchronous request with AJAX using Javascript.

Going around quickly I get an example with PHP (which seems to be the language you're using) and with jQuery, a Javascript library.

Change I recommend this excellent response from how to use AJAX .

    
answered by 17.02.2017 в 18:50
0

When you submit the form you can add a session variable to indicate to the view that it was sent correctly, then in the modal to be open you can do something like this: 

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

This to show it. You can also vary with the class you assign in the same way to be shown open or closed when entering that page. Once shown, you must delete that variable so that it does not show it anymore.

    
answered by 17.02.2017 в 19:36
ValueError: invalid literal for int () with base 10: '*' Enable Tab from another Tab in javafx