Условие для отображения модальной начальной загрузки

Question

Как я могу, если я не заполняю строку в вводе «origin» или «destination», и после того, как я нажимаю кнопку «Book», модал не будет отображаться, и он покажет другой модал, который требует от меня заполнения Это. У меня, когда я не заполняю содержимое на входе, это все еще показывает, что я могу забронировать. И не говори мне, чтобы заполнить его. Так как я могу это сделать. Благодарю. https://i.imgur.com/undefined.png

<div class="containermap">
        <div class="column">
        <div class="col-md-6">
        <form id="distance_form">
        <div class="form-group"><label>Origin: </label> <input class="form-control" id="from_places" placeholder="Enter a location" /> <input id="origin" name="origin" required="" type="hidden" /></div>

        <div class="form-group"><label>Destination: </label> <input class="form-control" id="to_places" placeholder="Enter a location" /> <input id="destination" name="destination" required="" type="hidden" /></div>
        <input class="btn btn-primary" type="submit" value="Calculate" /></form>

        <div id="result">
          <ul class="list-group">
              <form id="distance_form">
                <li  class="list-group-item d-flex justify-content-between align-items-center">
                    Distance in Kilometer:
                    <span id='in_Kilometer' class="badge badge-primary badge-pill"></span>
                </li>
                <li  class="list-group-item d-flex justify-content-between align-items-center">
                    Duration(min):
                    <span id="duration_text" class="badge badge-primary badge-pill"></span>
                </li>
                <li  class="list-group-item d-flex justify-content-between align-items-center">
                    FROM:
                    <span id="from" class="badge badge-primary badge-pill"></span>
                </li>
                <li  class="list-group-item d-flex justify-content-between align-items-center">
                    TO:
                    <span id="to" class="badge badge-primary badge-pill"></span>
                </li>
                <li  class="list-group-item d-flex justify-content-between align-items-center">
                    COST(VND):
                    <span id="cost" class="badge badge-primary badge-pill"></span>
                </li>
          </ul>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalLong">
            BOOK 
          </button>
        </form>
          </div>
        </div>
        <div id="map"></div>
        </div>
        <div class="modal fade indexmap" id="ModalLong" tabindex="-1" role="dialog" aria-labelledby="ModalTitle" aria-hidden="true">
                <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="ModalTitle">Booking Information</h5>
                    <button type="button" class="Cancel" data-dismiss="modal" aria-label="Cancel">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <div class="modal-body">
                    Do you want to book now?
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalLong2" data-dismiss="modal">Continue</button>
                    </div>
                </div>
                </div>
            </div>
            <div class="modal fade indexmap" id="ModalLong2" tabindex="-1" role="dialog" aria-labelledby="ModalTitle2" aria-hidden="true">
                <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="ModalTitle2">Booking Information</h5>
                    <button type="button" class="Cancel" data-dismiss="modal" aria-label="Cancel">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <div class="modal-body">
                    <p>Booking successfully! </p>
                    <p>Your driver will come soon. Thank you for using our services. <p>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
                </div>
            </div>
        </div>

Answer 1

Вот код, мы внесли некоторые изменения в ваш HTML-код и добавили немного кода JQuery помните, если у вас уже есть начальная загрузка и jquery, удалите эти ссылки После отправки формы отправителя и пункта назначения вы должны показать результат в разрезе расстояния и километра, и вы можете показать форму книги с помощью этой функции jquery

$("#result).show();


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="containermap">
        <div class="column">
        <div class="col-md-6">
        <form id="distance_form">
            <div class="form-group"><label>Origin: </label> <input class="form-control" id="from_places" placeholder="Enter a location" /> 
                <input id="origin" name="origin" required="" type="hidden" />
            </div>

            <div class="form-group"><label>Destination: </label> <input class="form-control" id="to_places" placeholder="Enter a location" />
                 <input id="destination" name="destination" required="" type="hidden" /></div>
            <input class="btn btn-primary" type="submit" value="Calculate" />
        </form>

            <div id="result">
                  <ul class="list-group">
                      <form id="distance-result">
                        <li  class="list-group-item d-flex justify-content-between align-items-center">
                            Distance in Kilometer:
                            <span id='in_Kilometer' class="badge badge-primary badge-pill"></span>
                        </li>
                        <li  class="list-group-item d-flex justify-content-between align-items-center">
                            Duration(min):
                            <span id="duration_text" class="badge badge-primary badge-pill"></span>
                        </li>
                        <li  class="list-group-item d-flex justify-content-between align-items-center">
                            FROM:
                            <span id="from" class="badge badge-primary badge-pill"></span>
                        </li>
                        <li  class="list-group-item d-flex justify-content-between align-items-center">
                            TO:
                            <span id="to" class="badge badge-primary badge-pill"></span>
                        </li>
                        <li  class="list-group-item d-flex justify-content-between align-items-center">
                            COST(VND):
                            <span id="cost" class="badge badge-primary badge-pill"></span>
                        </li>
                      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalLong">
                        BOOK 
                      </button>
                </form>
            </ul>
        </div>
        </div>
        <div id="map"></div>
        </div>
        <div class="modal fade indexmap" id="ModalLong" tabindex="-1" role="dialog" aria-labelledby="ModalTitle" aria-hidden="true">
                <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="ModalTitle">Booking Information</h5>
                    <button type="button" class="Cancel" data-dismiss="modal" aria-label="Cancel">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <div class="modal-body">
                    Do you want to book now?
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalLong2" data-dismiss="modal">Continue</button>
                    </div>
                </div>
                </div>
            </div>
            <div class="modal fade indexmap" id="ModalLong2" tabindex="-1" role="dialog" aria-labelledby="ModalTitle2" aria-hidden="true">
                <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="ModalTitle2">Booking Information</h5>
                    <button type="button" class="Cancel" data-dismiss="modal" aria-label="Cancel">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <div class="modal-body">
                    <p>Booking successfully! </p>
                    <p>Your driver will come soon. Thank you for using our services. <p>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
                </div>
            </div>
        </div>


<script>
$(document).ready(function(){
    $("#result").hide();
});

$("#distance_form").submit(function(e){
    var origin      = $("#from_places").val();
    var destination = $("#to_places").val();
    if(origin == "" || destination == ""){
        e.preventDefault();
        alert("Origin and destination field are required"); 
    }else{
        $("#distance_form").submit();
    }

    });

</script>