如果我没有在“原点”或“目的地”输入中填写该行，然后单击“预定”按钮，该模式将不会显示，它将显示需要我填写的其他模式它。 在我这里，当我没有在输入中填写内容时，仍然表明我可以预订。而且不要告诉我填补它。所以我该怎么做。 谢谢。 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>
答案 0 :(得分：0)
这是我们对您的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">×</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>