CODEWITHSUNDEEP
phpjquerytwitter-bootstrap
peace_love
peace_love

Reputation: 6471

How can I open bootstrap modal on select box option change?

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.

Upvotes: 0

Views: 17200

Answers (5)

Phpdev 2014
Phpdev 2014

Reputation: 22

Try this:

<select onchange='funMyModel(this.value)'>

function funMyModel(val)
{
    if(val=="Volvo"){
        $('#modal-content').modal({
            show: true
        });
    }
}

Upvotes: 0

Rodrigo Afonso
Rodrigo Afonso

Reputation: 1

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
        });
    });
});

Upvotes: 0

user_2580211
user_2580211

Reputation: 34

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>

Upvotes: 1

Rahul Kumar
Rahul Kumar

Reputation: 154

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
            });
        }

    });
});

Upvotes: 0

oshell
oshell

Reputation: 9113

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
        });
    }
});

Upvotes: 3

Related Questions