How can I open bootstrap modal on select box option change?
Question
I have a form which is submitted on option change. It is connected to the database. So everytime I submit the form, the page reloads and the value is selected (the value is now saved as "car" in the database).
<form class="cars" id="carSelect" name="car" action="index.php" method="get">
<select onchange='this.form.submit()'>
<option <?php if ($row['car'] == Volvo ) echo 'selected'; ?> value="volvo">Volvo</option>
<option <?php if ($row['car'] == Saab ) echo 'selected'; ?> value="saab">Saab</option>
<option <?php if ($row['car'] == Opel ) echo 'selected'; ?> value="opel">Opel</option>
<option <?php if ($row['car'] == Audi ) echo 'selected'; ?> value="audi">Audi</option>
</select>
</form>
when the form is submitted and the selected option is Volvo , a modal (I am using the bootstrap modal) should appear. This is the bootstrap modal code, which opens the modal when I click on the "openBtn" Button.
<a href="#" class="btn btn-default" id="openBtn">Volvo</a>
<div id="modal-content" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Volvo</h3>
</div>
<div class="modal-body">
<p>
<input type="text" id="txtname" />
</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">cancel</a>
<a href="#" class="btn btn-primary">save</a>
</div>
</div>
</div>
</div>
The bootstrap modal script for opening the modal with a button:
$('#openBtn').click(function () {
$('#modal-content').modal({
show: true
});
});
So here is my approach :
$(window).load(function(){
if($(.cars option:Volvo).is(':selected')){
$('#modal-content').modal({
show: true
});
}
});
But my code is not working. The other problem is, the modal should only appear if I selected "Volvo". Not everytime the page is loaded. But I do not know how I can detect that the form was submitted before the page is loaded.
5 answers
solution1
3 2015-09-24 07:51:03
When you want the selected option you have to take it from the select DOM element. So you would start with giving it an ID.
<select onchange='this.form.submit()' id="carSelect">
Then you can get the currently selected value and use it as condition.
$(window).load(function(){
var value = $( "#carSelect option:selected").val();
if(value == 'volvo'){
$('#modal-content').modal({
show: true
});
}
});
solution2
1 ACCPTED 2016-05-03 07:48:28
I have the correct solution that you have been waiting for. Please look at this code :
function myFunction() { var option_value = document.getElementById("numbers").value; if (option_value == "3") { alert("Hai !"); } }
<!DOCTYPE html> <html> <head> <script> // Add the above javascript code here ! </script> </head> <body> <select id = "numbers" onchange = "myFunction()"> <option value = "1">1</option> <option value = "2">2</option> <option value = "3">Click me !</option> </select> </body> </html>
solution3
0 2015-09-24 07:59:57
Try this:
<select onchange='funMyModel(this.value)'>
function funMyModel(val)
{
if(val=="Volvo"){
$('#modal-content').modal({
show: true
});
}
}
solution4
0 2015-09-24 10:16:46
First, you can check the selected value in select option. Select adds the :selected property to the selected option which is a child of the dropdown.
$(document).ready(function(){
$("#select").on('change', function(){
if($(this).find(":selected").val()=='xyz'){
//alert($(this).find(":selected").val());
$('#modal-content').modal({
show: true
});
}
});
});
solution5
0 2020-07-16 13:12:00
I know this question is very old, but for those who may find it like I did, I wanted to share a small adaptation I did, so if I have one modal per select option, I don't need to check every and each of the possibilities:
$(document).ready(function(){
$("#myModalSelector").on('change', function(){
var selected = $(this).find(":selected").val();
$('#' + selected ).modal({
show: true
});
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.