Send data via modal and keep modal open with a result

Asked

Viewed 186 times

0

I created a modal with a simple form this form will send information to a bd, so clicking send the modal should not close should show a result to the user.

It turns out that what I did keeps displaying the form and the result together, with dumb it?

<!DOCTYPE html>
<html class="no-js" lang="pt-br">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!--<link rel="stylesheet" href="estilo.css"  >-->
    <script src="modernizr-2.5.3-respond-1.1.0.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.js"></script>
</head>
<body>

    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Consultar</button>

    <!-- Modal -->
    <div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Investimento</h4>
          </div>
          <div class="modal-body">
            <form id="formExemplo" data-toggle="validator" role="form">
              <div class="form-group">
                <label for="textNome" class="control-label">Nome</label>
                <input id="textNome" class="form-control" placeholder="Digite seu Nome..." type="text" required>
              </div>

              <div class="form-group">
                <input id="nomecurso" class="form-control" name="curso" type="hidden">
              </div>

              <div class="form-group">
                <label for="inputEmail" class="control-label">Email</label>
                <input id="inputEmail" class="form-control" placeholder="Digite seu E-mail" type="email" 
                  data-error="Por favor, informe um e-mail correto." required>
                <div class="help-block with-errors"></div>
              </div>

               <div class="form-group">
                <button type="submit" class="btn btn-3">Enviar</button>
              </div>
            </form>

                <div class="container-fluid text-center" data-toggle="modal" data-target="#myModal">
                    <div class="row display">
                        <div class="col-sm-12">

                           <h5 style="font-weight:bold; margin-bottom: 2em;">Valores dos Cursos de Pós-Graduação Lato Sensu EAD 2018/1</h5>

                           <table class="table" style="font-size:0.85em; margin-bottom: 1em;">
                               <tr>
                                   <td>Opção</td>
                                   <td>Parcelas Mensais e Consecutivas</td>
                                   <td>Valor Final</td>
                                   <td>Parcela a ser paga</td>
                               </tr>

                               <tr>
                                   <td>A</td>
                                   <td>À vista</td>
                                   <td>R$ 18.416,40</td>
                                   <td>R$ 18.416,40</td>
                               </tr>

                               <tr>
                                   <td>B*</td>
                                   <td>18</td>
                                   <td>R$ 21.666,24</td>
                                   <td>R$ 1.203,68</td>
                               </tr>
                               <tr>
                                   <td>C**</td>
                                   <td>24</td>
                                   <td>R$ 22.349,76</td>
                                   <td>R$ 931,24</td>
                               </tr>
                               <tr>
                                   <td>D**</td>
                                   <td>30</td>
                                   <td>R$ 22.515,90</td>
                                   <td>R$ 750,53</td>
                               </tr>
                               <tr>
                                   <td>E**</td>
                                   <td>36</td>
                                   <td>R$ 22.682,89</td>
                                   <td>R$ 630,08</td>
                               </tr>

                           </table>

                           <p><em style="font-size:0.75em;">* 50% de desconto no valor da 1ª mensalidade (condição especial por tempo limitado).</em></p>
                           <p><em style="font-size:0.75em;">** Opções C, D e E com juros mensais de 0,25% ao mês.</em></p>
                        </div>
                    </div>
                </div>-->
          </div>
        </div>

      </div>
    </div>
</body>
</html>
  • Then btn Send has to send the form and at the same time show the table, only you can’t close the modal when you click it? That’s it?

  • That’s right @hugocsl

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.