I have some working jQuery that grabs the value from an input from which the user enters, and then also grabs a value from a hidden field, the jQuery then performs the necessary calculations and displays the result.
The issue I am having is when I put the fields into a modal, it doesn't work, even when I try and state the modal ID before the input ID.
Can someone help me get this working as needed?
$(function() {
$(document).ready(function() {
$("#demoModal #qty").keyup(function() {
totalTP = $("#demoModal #qty").val() * $("#demoModal #price").val() / 100;
$("#demoModal #totalTP").val(totalTP);
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<label>Enter your taxable monthly profit</label>
<input name="qty" id="qty" type="text" />
<input hidden name="price" id="price" type="hidden" value="19" /><br />
<label>Deducitble Tax Available</label>
<input name="totalTP" id="totalTP" type="text" />
<br>
<br>
<form id='fm'>
<label>HR:</label>
<select class="first">
<option disabled selected value="0">Select Plan</option>
<option value="0">No Plan</option>
<option value="50">HR Plan</option>
<option value="100">HR Pro</option>
<option value="200">HR Pro+</option>
<option value="400">HR Pro Plan</option>
</select>
<label>Accounting:</label>
<select class="second">
<option disabled selected value="0">Select Plan</option>
<option value="0">No Plan</option>
<option value="50">Accounting Plan</option>
<option value="100">Accounting Pro</option>
<option value="200">Accounting Pro+</option>
<option value="400">Accounting Pro Plan</option>
</select>
<label>Graphic Design & Marketing:</label>
<select class="third">
<option disabled selected value="0">Select Plan</option>
<option value="0">No Plan</option>
<option value="50">Graphic Design Plan</option>
<option value="100">Graphic Design Pro</option>
<option value="200">Graphic Design Pro+</option>
<option value="400">Graphic Design Pro Plan</option>
</select>
<input hidden type="text" class="form-control" id="temp" name="temp">
<input hidden type="text" class="form-control" id="bc" name="bc">
<input hidden type="text" class="form-control" id="de" name="de">
</form>
<br>
<label>Plan Costs:<div id="total"></div> </label>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
View on jsFiddle
Related
I found a way how to pop up a new text box after click on "Others" from the dropdown. But the problem here is database capture "Other" instead of the new data that I key in. For example I key in "Policeman" but it captured "Other" in my database.
<head>
<script type="text/javascript">
function showfield(name){
if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text"
name="other" />';
else document.getElementById('div1').innerHTML='';
}
</script>
</head>
<form action="https://apps3.xendsys.com/emv3/index.php/lists/xl080bdvq5cc8/subscribe" method="post">
<div class="box box-primary borderless">
<div class="box-header">
<h3 class="box-title">Website Subscribers</h3>
</div>
<select name="OCCUPATION" id="OCCUPATION"
onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="Student">Student</option>
<option value="Educator">Educator</option>
<option value="Designer">Designer</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>
<div class="box-footer">
<div class="pull-right"><input type="submit" class="btn btn-primary btn-flat" name="yt0" value="Subscribe"/></div>
<div class="clearfix"> </div>
</div>
</div>
</form>
What should I change ya?
I have a screenshot as shown below:
The screenshot above belongs to the following code:
<h3 style="text-align:center;margin-top:45px;">Sitting Days</h3>
<div class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
<!-- Date START -->
<div class="select-date" style="margin-right:30px;">
<h4 style="text-align:center;">Select Date</h4>
<input type="date" id="house-sitting-date" name="house_sitting_date" value="<?php if($data->{" house_sitting_date "}<>''){echo $data->{"house_sitting_date "};}?>">
</div>
<!-- Date END -->
<!-- Yes/No Dropdown START -->
<div class="yes-no">
<h4 style="text-align:center;">Yes/No</h4>
<select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">
<option value="nada" <?php if($data->{"house_sitting_date_yes_no"}=="nada"){echo 'selected';} ?>>Please choose an option</option>
<option value="yes" <?php if($data->{"house_sitting_date_yes_no"}=="yes"){echo 'selected';} ?>>Yes</option>
<option value="no" <?php if($data->{"house_sitting_date_yes_no"}=="no"){echo 'selected';} ?>>No</option>
</select>
</div>
<!-- Yes/No Dropdown END -->
<!-- Add new row button START -->
<div class="add-new-row-button">
<input type="button" id="addRow" value="Add New Row" onclick="rowAdd()"/>
</div>
<!-- Add new row button END -->
</div>
<!-- Javascript Code START -->
<script>
function rowAdd() {
}
</script>
<!-- Javascript Code END -->
On hitting save button, the above form (as shown in the screenshot) gets saved in the following JSON file:
$output['house_sitting_date']=$_POST['house_sitting_date'];
$output['house_sitting_date_yes_no']=$_POST['house_sitting_date_yes_no'];
if(file_exists('../feeds/ptp-ess_landing_house.json')){
$data = json_decode(file_get_contents('../feeds/ptp-ess_landing_house.json'));
}
Problem Statement:
I am wondering what JavaScript code I need to add so that it add another select of rows. When I say Select of Rows, I meant to say the following. I added an onclick event on input tag.
You'll need to change some minor things, but this is the general idea:
<h3 style="text-align:center;margin-top:45px;">Sitting Days</h3>
<div class="add-new-row-button">
<input type="button" id="addRow" value="Add New Row" onclick="rowAdd()" />
</div>
<div id="rows">
<div class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
<div class="select-date" style="margin-right:30px;">
<h4 style="text-align:center;">Select Date</h4>
<input type="date" id="house-sitting-date" name="house_sitting_date" value="">
</div>
<div class="yes-no">
<h4 style="text-align:center;">Yes/No</h4>
<select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">
<option value="nada" selected>Please choose an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
</div>
<script>
function rowAdd(event) {
document.getElementById("rows")
.insertAdjacentHTML('beforeend', newRow());
}
function newRow() {
return `
<div id="default-node" class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
<div class="select-date" style="margin-right:30px;">
<input type="date" id="house-sitting-date" name="house_sitting_date" value="">
</div>
<div class="yes-no">
<select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">
<option value="nada" selected>Please choose an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
`
}
</script>
whenever i clicked a SEND BUTTON a dropdown menu will popup. How can I do it? That's my code right now. What's wrong with this snippet?
<?php if(isset($_POST["driver_number"]))?>
<form action="#" method="post">
<select name="driver_number">
<option value="Driver Number">Driver Number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="submit" input style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary"onclick="if(!confirm('+ document.getElementById('driver_number').value')){return false;}" >Send</button> </form>
UPDATE: Thank you guys! All your answer help me.
You have to do following changes:
1) You are selecting element by id so need to give id to your select box
2) Your escaping for click event in incorrect change your code as below
<form action="#" method="post">
<select name="driver_number" id="driver_number">
<option value="Driver Number">Driver Number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="submit" input style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary"onclick="if(!confirm(document.getElementById('driver_number').value)){return false;}" >Send</button> </form>
Please see my complete runable code . I hope it will help you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="container">
<?php if(isset($_POST["driver_number"]))
print_r($_POST);
?>
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary" data-toggle="modal" data-target="#myDropdown">Send dropdown value</button>
<!-- Modal -->
<div class="modal fade" id="myDropdown" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<form action="#" method="post">
<select name="driver_number">
<option value="Driver Number">Driver Number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="submit" input style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary"onclick="if(!confirm('+ document.getElementById('driver_number').value')){return false;}" >Send</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
First of all, you have to change the button type="submit" to type="button", otherwise the form is submitted without evaluating the onclick event.
Secondly, to use document.getElementById('driver_'number') you must have an id on the select element.
Thirdly (this is mainly for elegance) the {return false;} in the if condition for the confirm could be unnecessary, and you could implement the submission in a function as suggest in the code below:
<?php if(isset($_POST["driver_number"])) { print_r($_POST); }// to test what has been posted?>
<form id="myform" action="#" method="post">
<select id="driver_number" name="driver_number">
<option value="Driver Number">Driver Number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="button" input style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary"onclick="send();" >Send</button> </form>
<script>
function send(){ if(confirm(document.getElementById('driver_number').value)){ document.getElementById('myform').submit(); }
}
</script>
Finally, there are two typos '+ and ' in your if(!confirm('+ document.getElementById('driver_number').value')) condition, it should read if(!confirm(document.getElementById('driver_number').value))
The problem I am dealing with is to delegate an event in case of a click. The html modal snippet is:
<div id="addQues" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Input Fields</h4>
</div>
<input type="hidden" id="optCount" name="optCount" value="<?php echo $optCounter?>">
<div class="modal-body">
<input name="quesText" id="quesText" type="text" class="form-control" placeholder="Question Text" style="height: 200px" autofocus>
<select name="quesType" id="quesType" class="form-control" style="width: 100px">
<option value="Single Choice" id="SC" name="SC">Single Choice</option>
<option value="Multiple Choice" id="MC" name="MC">Multiple Choice</option>
<option value="Plain Text" id="TXT" name="TXT">Plain Text</option>
<option value="Image based" id="ÌMG" name="IMG">Image based</option>
<option value="Video Based" id="VID" name="VID">Video Based</option>
<option value="Conjoint" id="CNG" name="CNG">Conjoint</option>
</select>
<div id="optList" name="optList">
<div style="display:flex; vertical-align:top;" class="cooldiv">
<input name="optionNum_<?php echo $optCounter?>" id="optionNum_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus>
<input name="optionText_<?php echo $optCounter?>" id="optionText_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option Text" autofocus>
<button type="button" class="deleteMe">X</button>
<button type="button" class="addNext">+</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
And the jquery code is:
$(".deleteMe").on("click",".cooldiv",function(){
$(this).closest("div").remove();
var optCount = parseInt($("#optCount").val());
optCount = optCount-1;
alert(optCount)
$("#optCount").val(optCount);
});
$(".addNext").on("click",".cooldiv",function(){
var optCount = parseInt($("#optCount").val());
optCount = optCount+1;
$("#optList").append('<div style="display:flex; vertical-align:top;" class="cooldiv"><input name="optionNum_'+optCount+'" id="optionNum_'+optCount+'" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus><input name="optionText_'+optCount+'" id="optionText_'+optCount+'" type="text" class="form-control" placeholder="Option Text" autofocus><button type="button" class="deleteMe">X</button><button type="button" class="addNext">+</button></div>');
$("#optCount").val(optCount);
alert(optCount)
});
So, basically I want to add or remove options (add/remove class cooldiv) when the + or x buttons are clicked. But it's not happening this way.
UPDATE:
The complete code is this:
<?php require "login/loginheader.php";
$questionCounter = 1;
$optCounter = 1;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="login/js/jquery-2.2.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="login/js/bootstrap.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addQues">Input Question No. <?php echo $questionCounter ?></button>
<!-- Modal -->
<div id="addQues" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Input Fields</h4>
</div>
<input type="hidden" id="optCount" name="optCount" value="<?php echo $optCounter?>">
<div class="modal-body">
<input name="quesText" id="quesText" type="text" class="form-control" placeholder="Question Text" style="height: 200px" autofocus>
<select name="quesType" id="quesType" class="form-control" style="width: 100px">
<option value="Single Choice" id="SC" name="SC">Single Choice</option>
<option value="Multiple Choice" id="MC" name="MC">Multiple Choice</option>
<option value="Plain Text" id="TXT" name="TXT">Plain Text</option>
<option value="Image based" id="ÌMG" name="IMG">Image based</option>
<option value="Video Based" id="VID" name="VID">Video Based</option>
<option value="Conjoint" id="CNG" name="CNG">Conjoint</option>
</select>
<div id="optList" name="optList">
<div style="display:flex; vertical-align:top;" class="cooldiv">
<input name="optionNum_<?php echo $optCounter?>" id="optionNum_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus>
<input name="optionText_<?php echo $optCounter?>" id="optionText_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option Text" autofocus>
<button type="button" class="deleteMe">X</button>
<button type="button" class="addNext">+</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="form-signin">
<div class="alert alert-success">You have been <strong>successfully logged in</strong>.</div>
Logout
</div>
</div> <!-- /container -->
</body>
</html>
<script>
$(".deleteMe").on("click",'.cooldiv',function(){
$(this).closest("div").remove();
var optCount = parseInt($("#optCount").val());
optCount = optCount-1;
alert(optCount)
$("#optCount").val(optCount);
});
$(".addNext").on("click",'.cooldiv',function(){
var optCount = parseInt($("#optCount").val());
optCount = optCount+1;
$("#optList").append('<div style="display:flex; vertical-align:top;" class="cooldiv"><input name="optionNum_'+optCount+'" id="optionNum_'+optCount+'" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus><input name="optionText_'+optCount+'" id="optionText_'+optCount+'" type="text" class="form-control" placeholder="Option Text" autofocus><button type="button" class="deleteMe">X</button><button type="button" class="addNext">+</button></div>');
$("#optCount").val(optCount);
alert(optCount)
});
</script>
When I click on Input Question No. 1/2..., a modal opens up with option # and option text in it. I want when the button + or x is clicked, another option field with option # and option text adds or the same gets removed. Without delegation, it won't happen, but using delegation like this, it's not even working.
The problem is not related to even delegation, but to wrong usage of events and dynamic elements.
You should use
$("#optList").on("click",'.deleteMe',function(){
and
$("#optList").on("click",'.addNext',function(){
Because the #optList element exists all the time, and the new elements that you add dynamically are .deleteMe and .addNext.
Here is the jsfiddle that should work as you expected:
https://jsfiddle.net/ev6kajjf/7/
(note that you still have problems there with the value of optCount. I'm not sure why it has i to start with: <input type="hidden" id="optCount" name="optCount" value="i">).
Is there a known reason why dropdown would not work inside a modal? I am using rails 4 and the dropdown works perfectly fine all over the app except for the modal. Here is how it is rendered
I suspect this might be an issue with javascript, I have tried changing the order of including javascripts in my application.js but nothing would work. Here is my application.js:
//= require bootstrap
//= require jquery/jquery-2.1.1.js
//= require jquery_ujs
//= require turbolinks
//= require cloudinary
//= require jquery.turbolinks
//= require slimscroll/jquery.slimscroll.min.js
//= require bootstrap-sprockets
Has anyone ran into this before? is there a fix for this? I tried searching all over but couldn't find any relevant solution
EDIT: The modal code
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
`enter code here`<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Group</h4>
</div>
<div class="modal-body">
<div class="form-group"><label>Class name</label> <input type="name" placeholder="Choose a name for your group" class="form-control"></div>
<div class="form-group"><label>Class name</label> <input type="desc" placeholder="Add a description for your group" class="form-control"></div>
<div class="form-group">
<label class="font-noraml">Select</label>
<div class="input-group">
<select data-placeholder="Select a grade..." class="chosen-select" style="width:350px;" tabindex="2">
<option value="">Select</option>
<option value="Prekindergarten">Prekindergarten</option>
<option value="Kindergarten">Kindergarten</option>
<option value="1st">1st</option>
<option value="2nd">2nd</option>
<option value="3rd">3rd</option>
<option value="4th">4th</option>
<option value="5th">5th</option>
<option value="6th">6th</option>
<option value="7th">7th</option>
<option value="8th">8th</option>
<option value="9th">9th</option>
<option value="10th">10th</option>
<option value="11th">11th</option>
<option value="12th">12th</option>
<option value="Higher Education">Higher Education</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Thanks
I assume you use the jQuery.Chosen plugin. Here's the code:
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function(e) {
console.debug('modal shown!');
$('.chosen-select', this).chosen({width: "350px"});
});
$("#myModal").modal('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Add Group
</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>
Class name
</label>
<input type="name" placeholder="Choose a name for your group" class="form-control">
</div>
<div class="form-group">
<label>
Description
</label>
<input type="desc" placeholder="Add a description for your group" class="form-control">
</div>
<div class="form-group">
<label class="font-noraml">
Select
</label>
<div class="input-group">
<select data-placeholder="Select a grade..." class="form-control chosen-select" style="width:350px;" tabindex="2">
<option value="">
</option>
<option value="Prekindergarten">
Prekindergarten
</option>
<option value="Kindergarten">
Kindergarten
</option>
<option value="1st">
1st
</option>
<option value="2nd">
2nd
</option>
<option value="3rd">
3rd
</option>
<option value="4th">
4th
</option>
<option value="5th">
5th
</option>
<option value="6th">
6th
</option>
<option value="7th">
7th
</option>
<option value="8th">
8th
</option>
<option value="9th">
9th
</option>
<option value="10th">
10th
</option>
<option value="11th">
11th
</option>
<option value="12th">
12th
</option>
<option value="Higher Education">
Higher Education
</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Add Group
</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>
Class name
</label>
<input type="name" placeholder="Choose a name for your group" class="form-control">
</div>
<div class="form-group">
<label>
Description
</label>
<input type="desc" placeholder="Add a description for your group" class="form-control">
</div>
<div class="form-group">
<label class="font-noraml">
Select
</label>
<div class="input-group">
<select data-placeholder="Select a grade..." class="form-control chosen-select" style="width:350px;" tabindex="2">
<option value="">
</option>
<option value="Prekindergarten">
Prekindergarten
</option>
<option value="Kindergarten">
Kindergarten
</option>
<option value="1st">
1st
</option>
<option value="2nd">
2nd
</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
Reference: chosen with bootstrap 3 not working properly
your code works in my modal
I assume there is something wrong with styles, not with JS
check styles