Modal Boostrap is not displayed

Question

Modal Boostrap is not displayed

Navigation

#1 by (0 votes)

0

I have a form that I am trying to implement a modal that confirms the submit of this form, however it only appears when I do not type the required fields, if I type the required fields it goes straight to the action

If anyone can help me, I appreciate it.

html code

     <form id="myForm" data-parsley-validate class="form-horizontal form-label-left" data-toggle="modal" method="POST" action="../Controllers/fecharLocacao.php">

              <div class="form-group">
                      <label class="control-label col-md-1 col-sm-3 col-xs-12" for="last-name">Chegada<span class="required">*</span>
                      </label>
                      <div class="col-md-3 col-sm-6 col-xs-12">
                          <input type="datetime-local" id="last-name" name="chegada" required="required"  class="form-control col-md-7 col-xs-12">
                    </div>

                    <label class="control-label col-md-1 col-sm-3 col-xs-12" for="last-name">Comb. Chegada<span class="required">*</span>
                      </label>
                      <div class="col-md-2 col-sm-6 col-xs-12">
                          <select class="form-control" name="combchegada">
                                  <option value="1/10">1/10</option>
                                  <option value="2/10">2/10</option>
                                  <option value="3/10">3/10</option>
                                  <option value="4/10">4/10</option>
                                  <option value="5/10">5/10</option>
                                  <option value="6/10">6/10</option>
                                  <option value="7/10">7/10</option>
                                  <option value="8/10">8/10</option>
                                  <option value="9/10">9/10</option>
                                  <option value="10/10">10/10</option>
                          </select>
                    </div>

                  <label class="control-label col-md-1 col-sm-3 col-xs-12" for="last-name">Lavagem<span class="required">*</span>
                  </label>
                  <div class="col-md-2 col-sm-6 col-xs-12">
                    <input type="number" step="any" id="last-name" name="lavagem"  class="form-control col-md-3 col-xs-12">
                  </div>

              </div>


              <div class="form-group">


                  <label class="control-label col-md-1 col-sm-3 col-xs-12" for="last-name"> Taxa Seguro<span class="required">*</span>
                  </label>
                  <div class="col-md-2 col-sm-6 col-xs-12">
                    <input type="number" step="any" id="last-name" name="txseguro"  class="form-control col-md-3 col-xs-12">
                  </div>

                <label class="control-label col-md-1 col-sm-3 col-xs-12" for="last-name">Taxa Aeroporto<span class="required">*</span>
                  </label>
                  <div class="col-md-2 col-sm-6 col-xs-12">
                    <input type="number" step="any" id="last-name" name="txaeroport"   class="form-control col-md-3 col-xs-12">
                  </div>

                <label class="control-label col-md-1 col-sm-3 col-xs-12" for="last-name">Lucro cessante<span class="required">*</span>
                  </label>
                  <div class="col-md-2 col-sm-6 col-xs-12">
                    <input type="number" step="any" id="last-name" name="lucrocess"   class="form-control col-md-3 col-xs-12">
                  </div>

                <label class="control-label col-md-1 col-sm-3 col-xs-12" for="last-name">Reembolso Despachante<span class="required">*</span>
                  </label>
                  <div class="col-md-2 col-sm-6 col-xs-12">
                    <input type="number" step="any" id="last-name" name="redesp"  class="form-control col-md-3 col-xs-12">
                  </div>

              </div>

              <div class="form-group">

                <label class="control-label col-md-1 col-sm-3 col-xs-12" for="last-name">Observações
                </label>
                  <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="text" id="last-name" name="obs" class="form-control col-md-3 col-xs-12">
                  </div>


                <label class="control-label col-md-1 col-sm-3 col-xs-12" for="last-name">Km Chegada<span class="required">*</span>
                  </label>
                  <div class="col-md-2 col-sm-6 col-xs-12">
                    <input type="number" id="last-name" name="kmchegada" required="required"  class="form-control col-md-3 col-xs-12">
                  </div>

                  <input type="hidden" name="id" value="<?php echo $resultado->id; ?>">

              </div>

                <div class="ln_solid"></div>
                <div class="form-group">
                  <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                  <a href="locacoes.php"><button class="btn btn-round btn-danger" type="button">Cancelar <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button></a>
              <button class="btn btn-round btn-warning" type="reset">Resetar <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></button>
              <button type="submit" class="btn btn-round btn-success" data-toggle="modal" data-target="#myModal">Fechar Contrato <span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button></span></button>
                  </div>
                </div>

              </form>

Modal

                  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                      <form id="submitMyModal">



                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      <button for="submitMyModal" type="submit" class="btn btn-primary">Save changes</button>
                  </form>
                    </div>
                  </div>
                </div>
              </div>

Javascript:

$( "#submitMyModal" ).submit(function( event ) {
event.preventDefault();
  });

From now thank you for the help of anyone thanks

php javascript html

asked by anonymous 06.11.2018 / 20:48

1 answer

How do I check the initial request path with RewriteCond? Function reset in JS does not work

score 0 · Answer 1

It is possible to make a modal button submit the form, but it is necessary to validate the fields with the required property otherwise the modal button will submit the form, neglecting the required properties of the fields. I made use of the jquery.validate

On your form, change this line (responsible for opening the modal)

 <button type="submit" class="btn btn-round btn-success" data-toggle="modal" data-target="#myModal">Fechar Contrato <span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button></span></button>

by this line

<button type="submit" class="btn btn-round btn-success" data-toggle="modal">Fechar Contrato <span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>

The changes you made were:

removed at end of line </span></button> that was repeated
removed data-target="#myModal"

The modal

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="btnSubmit" for="submitMyModal" type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

changes made in the modal:

removed form

id="btnSubmit" was placed on button Save changes

<button id="btnSubmit" for="submitMyModal" type="button" class="btn btn-primary">Save changes</button>

Put this script in the head of your document

$(document).ready(function(){
    $("#myForm").validate({
        rules: {
            chegada: "required",
            combchegada: "required",
            lavagem: "required",
            txseguro: "required",
            txaeroport: "required",
            redesp: "required",
            kmchegada: "required",
        },
            messages: {
            chegada: "requerido",
            combchegada: "requerido",
            lavagem: "requerido",
            txseguro: "requerido",
            txaeroport: "requerido",
            redesp: "requerido",
            kmchegada: "requerido",
        },

        submitHandler: function (form) {
            $("#myModal").modal('show');
            $('#btnSubmit').click(function () {
                form.submit();
           });
        }
    });
});

Required Libraries

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="http://musicasitalianas.com/js/jquery-1.11.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>