show different modal content based on select option / dropdown value - javascript

this is my code where I want to show a modal when a dropdown option is clicked. I need the modal content to vary based on the value from the dropdown option. (example: if the option value is 高雄鳳山, the modal content will be "Welcome to 高雄鳳山") Since all I could find is a reference using buttons, not dropdown option, I'm stuck using button.data('whatever') which I knew is wrong.
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="styleLR.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<select id="branchoption" class="form__input" name="branch" required>
<option value="">--選工地--</option>
<option value="高雄鳳山" data-whatever="KS">高雄鳳山(KS1)</option>
<option value="台中會展中心" data-whatever="TC">台中會展中心(TC1)</option>
</select>
<!-- Modal -->
<div id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Where the content should vary</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$("#branchoption").on("change", function () {
$modal = $('#myModal');
//var recipient = button.data('whatever')
if($(this).val() === '高雄鳳山'){
$modal.modal('show');
//modal.find('.modal-body').text('Welcome to ' + receipient)
}
});
</script>

Related

How can i change value of clicked button after open a bootstrap modal using JavaScript?

I have multiple buttons where i clicked than open a bootstrap modal with clicked button value, its working fine. Now i want to change value of clicked button when close bootstrap modal.
What i tried:-
$("input").click(function(e){
var idClicked = e.target.id;
$('#myModal').modal('show').find('.modal-title').text(idClicked);
});
<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>
<input id="btn1" type="button" value="Submit1" />
<input id="btn2" type="button" value="Submit2" />
<!-- 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">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary submitModalBtn">submit</button>
</div>
</div>
</div>
</div>
Try this below code:
<input id="btn1" type="button" value="Submit1" />
<input id="btn2" type="button" value="Submit2" />
<!-- 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">
<input type="hidden" id="hdncurrent" >
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary submitModalBtn">submit</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(e){
$("input").click(function(e){
var idClicked = e.target.id;
$('#myModal').modal('show').find('.modal-title').text(idClicked);
$("#hdncurrent").val(idClicked);
$('#myModal').on('hidden.bs.modal', function () {
$("#" + $("#hdncurrent").val()).attr("value","test")
})
});
})
</script>
Your jquery will be like this:
<script type="text/javascript">
$("input").click(function(e){
var idClicked = e.target.id;
$('#myModal').modal('show').find('.modal-title').text(idClicked);
$(".close").click(function(){
var btid="#"+idClicked;
$(btid).val(idClicked);
});
});
</script>
You can just save the clicked button id and then on modal close event, you can change the value attribute based on the saved button id. Check out my fiddle. For now, I just changed the value to someOtherValue of the clicked button. You can change it to your expected value.
Please note, there can be multiple ways to perform this action. Kindly let me know if this is not what you are expecting.
var clicked_button_id = '';
$("input").click(function(e){
clicked_button_id = $(this).attr('id');
var idClicked = e.target.id;
$('#myModal').modal('show').find('.modal-title').text(idClicked);
});
$('#myModal').on('hidden.bs.modal', function () {
$("#"+clicked_button_id).val('someOtherValue');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>
<input id="btn1" type="button" value="Submit1" />
<input id="btn2" type="button" value="Submit2" />
<!-- 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">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary submitModalBtn">submit</button>
</div>
</div>
</div>
</div>

Display calendar in modal form popup

I have modal form to pick time but the calendar is behind modal form when modal form display. I want calendar display on the modal form
#
$('#datetimepicker1').datepicker();
$('#datetimepicker2').datepicker();
$(document).on('click', '#btn_ok', function() {
alert($('#datetimepicker1').val());
})
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> #
<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">
<h4 class="modal-title" id="myModalLabel">Chọn thời gian</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-inline">
<label style="padding-right: 10px">Từ</label>
<div class="input-group date" data-target-input="nearest">
<input type="text" id="datetimepicker1" class="form-control datetimepicker-input">
</div>
<br>
<div class="modal-footer">
<button class="btn btn-success" id="btn_ok">OK</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
Elements can overlap for a variety of reasons. Increase the z-index of datepicker-div. z-index only affects elements that have a position. and datepicker have position fixed.
result - https://www.screencast.com/t/dkpeBNbcpJq
//Add in style file.
div#ui-datepicker-div {
z-index: 9999 !important;
}
Increase the z-index of the datepicker more than the modal's z-index

trying to use the same function with similar class names Javascript and HTML

hello I know you are not able to have similar ID tags because of the fact there will be a console error, but in my scenario, I am trying to have a modal display with different info in it similar buttons are clicked with the same class name
for example
<div class="source">
<h1 data-target="2"></h1>
<button class="showBtn">BTN</button>
</div>
<div class="source">
<h1 data-target="3"></h1>
<button class="showBtn">BTN</button>
</div>
<div class="modal hide">
<div id="modalOuput"></div>
</div>
JS (I already have the modal showing up, my problem would be to have the modal display with unique identifiers in the modal also display for example)
const modalOutput = document.querySelector('#modalOutput');
const sourceData = document.querySelector('.source').getAttribute('data-target);
modalOutput.textContent = sourceData
thank you
$(document).ready(function(){
$("#modalOutput").on('show.bs.modal', function(e){
var button = $(e.relatedTarget);
var dToPopulate = button.data('whatever');
var modal = $(this);
modal.find('.modal-body').html(dToPopulate);
});
});
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="modalOutput" 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"><!-- data-whatever attribute of selected button--></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="source">
<h1></h1>
<button data-whatever="2" class="showBtn" data-toggle="modal" data-target="#modalOutput">BTN</button>
</div>
<div class="source">
<h1></h1>
<button data-whatever="3" class="showBtn" data-toggle="modal" data-target="#modalOutput">BTN</button>
</div>
The code will select the value of data-whatever and put it into modalOutput.

Bootstrap JS wont work in Chrome

This code works in FireFox and IE but not Chrome. Any ideas why? Help is appreciated. The version of Chrome I'm using is Version 53.0.2785.143 m. For some reason Chrome isn't liking the JS that's being pulled in. I'm not sure where the hang up is.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div style="width:100px;">
<select>
<option>Select a language</option>
<option data-toggle="modal" data-target="#myModal">English</option>
<option data-toggle="modal" data-target="#myModal2">Spanish</option>
</select>
<!-- Modals -->
<!-- English Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">English content</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End English Modal -->
<!-- Spanish Modal -->
<div class="modal fade" id="myModal2" 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">Spanish content</h4>
</div>
<div class="modal-body">
<p>Some text in the modal2222.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Spanish Modal -->
</div>
</body>
</html>
The data-toggle and data-target attributes are used by the bootstrap.min.js script to show/hide the modals when the elements with those attributes are clicked.
In this case, it seems that in Chrome the necessary click events are not triggered (most probably because you've used option elements for this).
To fix that, you can add some javascript code to open the modal when the select's element values is changed. Here is an example:
<script type="text/javascript">
$(function(){
$("select").change(function(){
if(this.value == "English"){
$("#myModal").modal("show");
}else if(this.value == "Spanish"){
$("#myModal2").modal("show");
}
});
});
</script>
And here is a working example with all the code.
$(function(){
$("select").change(function(){
if(this.value == "English"){
$("#myModal").modal("show");
}else if(this.value == "Spanish"){
$("#myModal2").modal("show");
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div style="width:100px;">
<select>
<option>Select a language</option>
<option data-toggle="modal" data-target="#myModal">English</option>
<option data-toggle="modal" data-target="#myModal2">Spanish</option>
</select>
<!-- Modals -->
<!-- English Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">English content</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End English Modal -->
<!-- Spanish Modal -->
<div class="modal fade" id="myModal2" 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">Spanish content</h4>
</div>
<div class="modal-body">
<p>Some text in the modal2222.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Spanish Modal -->
</div>
</body>
</html>

Chosen-select on bootstrap modal was hiding after selecting a value

var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
function add_course()
{
$('#form')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string
$('#modal_form').modal('show'); // show bootstrap modal
$('#modal_form').on('shown.bs.modal', function () {
$('.chosen-select', this).chosen('destroy').chosen();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>
<button class="btn btn-success" onclick="add_course()"><i class="glyphicon glyphicon-plus"></i>Add Course</button>
<!-- Bootstrap modal -->
<div class="modal fade" id="modal_form" role="dialog">
<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>
<h3 class="modal-title">Course Form</h3>
</div>
<div class="modal-body form">
<form action="#" id="form" class="form-horizontal">
<input type="hidden" value="" name="train_ID" />
<div class="form-body">
<div class="col-md-9">
<div class="side-by-side clearfix">
Select Department:
<select name="empdept[]" data-placeholder="Choose department..." class="chosen-select" multiple style="width:350px;" tabindex="4">
<option value="IT">IT</option>
<option value="Finance">Finance</option>
<option value="Production">Production</option>
<option value="HR">HR</option>
</select>
</div>
<span class="help-block"></span>
</div>
</div>
<!-- /.modal -->
<!-- End Bootstrap modal -->
Hi guys please help me to solve this.
I have a chosen select on a bootstrap modal it works fine
but after I choose an item it disappear .
Heres my screenshot when modal loaded
and heres what happened after I select it disappear
Heres my code :
It is working here but on my website it doesn't work ..

Categories