Modal Boostrap is not displayed

Asked

Viewed 45 times

0

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

if anyone can help me I really appreciate

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

Since I thank for the help of anyone thanks

php javascript html

  • Since you don’t submit the form, why not change the Submit button to the normal button? Then you won’t need preventDefault

  • Anderson I want to make the form disappear

  • So the same button that submits the form should open the modal? That is, if you are submitting the form, it is expected to go to the action. If you want to open the modal before that, you need to separate things.

  • I don’t understand how to separate, but thanks for trying to help hug

  • Start by making the button only open the modal, without submitting the form.

  • Sure you could show me, you know I’m not a programming genius and I’m starting if you can tell me where I delete and where I move where part of the code I appreciate the help

  • A button of type "Submit" does the commit, but of type "button" does not.

  • Anderson worked out the modal is appearing without problems, the only problem now is that if I click the modal button it will not go to the action

  • The modal is inside the form you want to send?

  • No... sorry guys I’m a novice programmer have patience

  • I can see by the code you posted that the modal is inside some form. What form is this? There are 2 Forms on the page?

  • Your modal has a form that seems to be of no use. Remove it and leave your modal inside your original form, so a Ubmit button inside the modal will submit to the desired action.

  • You should mark the answers that solved your problem as accepted, I’ve been looking at other questions of yours and none of them were marked as accepted. See how to mark a response as accepted in https://i.stack.Imgur.com/jx7Ts.png and why in https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079

Show 8 more comments

1 answer

0

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

On your form, change this line (responsible for opening up 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 made were:

  • removed at the end of the line </span></button> that was repeated
  • withdrawn 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 to the modal:

  • removed the form

  • was placed a id="btnSubmit" on the 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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="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>

Browser other questions tagged php javascript html

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