显示模态引导程序的条件

Question

如果我没有在“起点”或“终点”输入中填写该行，并且单击“预订”按钮后，该模式将不会显示，它将显示需要我填写的其他模式它。 对我来说，当我没有在输入中填写包含时，它仍然表明我可以预订。而不是告诉我填写它。那么我该怎么做呢。 谢谢。 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 代码的代码 记住如果你已经包含了 bootstrap 和 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>