Condition to display the modal bootstrap - html

Question

How can I, if I not fill the line in "origin" or "destination" input, and after I click the "Book" button, the modal won't display and it's will show other modal that require me to fill it.
At me, when I not fill the contain in the input, it's still show that I can book. And not tell me to fill it. So How can I to do it.
Thanks.
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">×</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">×</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

Here is the code we made some changes to your html code and add some jquery code
remember if you have bootstrap and jquery already included then remove these links
After origin and destination form submitted you have to show the result in distance and kilometer section and you can show the book form by this jquery function
$("#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">×</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">×</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>