Condition to display the modal bootstrap
up vote
0
down vote
favorite
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>
html bootstrap-4 bootstrap-modal
New contributor
add a comment |
up vote
0
down vote
favorite
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>
html bootstrap-4 bootstrap-modal
New contributor
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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>
html bootstrap-4 bootstrap-modal
New contributor
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>
html bootstrap-4 bootstrap-modal
html bootstrap-4 bootstrap-modal
New contributor
New contributor
New contributor
asked Nov 5 at 2:43
beam291
74
74
New contributor
New contributor
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
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>
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
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>
add a comment |
up vote
0
down vote
accepted
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>
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
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>
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>
answered Nov 5 at 7:18
Problem Solver
2048
2048
add a comment |
add a comment |
beam291 is a new contributor. Be nice, and check out our Code of Conduct.
beam291 is a new contributor. Be nice, and check out our Code of Conduct.
beam291 is a new contributor. Be nice, and check out our Code of Conduct.
beam291 is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53147654%2fcondition-to-display-the-modal-bootstrap%23new-answer', 'question_page');
}
);
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password