Develop Reference

How to add select box in event FullCalendar

How to add select box in event? I use eventRender, but after render the field is empty and I can't change value.
eventRender: function(info) {
var content = info.el.children[0];
var eventProps = info.event.extendedProps;
if(info.event.allDay){
content.innerHTML = eventProps.name+'<br>'+eventProps.phone;
}else{
let apartment = eventProps.apartment == 0 || eventProps.apartment == null ? '' : eventProps.apartment;
content.children[1].remove();
var districtDiv = document.createElement('div');
districtDiv.style.float = 'right';
districtDiv.innerHTML = eventProps.district;
content.insertBefore(districtDiv, content.firstChild);
var newDiv = document.createElement('div');
var html = `<div>
<div>${eventProps.street}</div>
<div>
<select class="select">
<option value="" disabled selected>Type</option>
<option>Type 1</option>
<option>Type 2</option>
</select>
Ap: ${apartment}
</div>
</div>`;
newDiv.innerHTML = html;
content.appendChild(newDiv);
}
},
eventClick: function(info) {
if(info.jsEvent.target.className == 'select') return false;
}
Result:

show multiple text when select option is select

I have multiple div, I want to display 2 hidden text when I select the value of 1, when I choose value of 2 it will display 4 hidden text etc.
function showDiv(divId, element) {
document.getElementById('depositProductType').addEventListener('change', function() {
var style = this.value == 1 ? 'block' : 'none';
document.getElementById('allowJoint').style.display = style;
document.getElementById('allowTransfer').style.display = style;
var style = this.value == 2 ? 'block' : 'none';
document.getElementById('allowJoint').style.display = style;
document.getElementById('allowTransfer').style.display = style;
document.getElementById('allowDisabling').style.display = style;
document.getElementById('createOne').style.display = style;
var style = this.value == 3 ? 'block' : 'none';
document.getElementById('allowTransfer').style.display = style;
document.getElementById('createOne').style.display = style;
});
}
<select id="depositProductType" name="prod_type" onchange="showDiv('allowJoint','allowTransfer','allowDisabling','createOne', this)">
<option class="blank" value="">Please select</option>
<option value="1">Fixed Deposit</option>
<option value="2">Savings Deposit</option>
<option value="3">Scheduled Deposit</option>
</select>
<!-- this is the multiple div I want to display from my html -->
<div id="allowJoint"> ------- </div>
<div id="allowTransfer"> ------ </div>
<div id="allowDisabling"> ------- </div>
<div id="createOne"> ---------- </div>

First change you select to only pass the element
<select id="depositProductType" name="prod_type" onchange="showDiv(this)">
Then you showDiv can no need to listen to event since it is trigger by the onChange event already. Just call your function.
function showDiv(ele) {
var allowJoint = document.getElementById('allowJoint');
var allowTransfer = document.getElementById('allowTransfer');
var allowDisabling = document.getElementById('allowDisabling');
var createOne = document.getElementById('createOne');
if(ele.value == 1) {
allowJoint.style.display = 'block';
allowTransfer.style.display = 'block';
allowDisabling.style.display = 'none';
createOne.style.display = 'none';
}
else if(ele.value == 2) {
allowJoint.style.display = 'block';
allowTransfer.style.display = 'block';
allowDisabling.style.display = 'block';
createOne.style.display = 'block';
}
else if(ele.value == 3) {
allowTransfer.style.display = 'block';
createOne.style.display = 'block';
allowJoint.style.display = 'none';
allowDisabling.style.display = 'none';
}
}

function showDiv(element) {
var old_element = document.getElementById("depositProductType");
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);
document.getElementById('depositProductType').addEventListener('change', function() {
console.log(this.value)
document.getElementById('allowJoint').style.display = (this.value == 1 || this.value == 2) ? 'block' : 'none';
document.getElementById('allowTransfer').style.display = (this.value == 1 || this.value == 2) ? 'block' : 'none';
document.getElementById('allowDisabling').style.display = (this.value == 3 || this.value == 2) ? 'block' : 'none';
document.getElementById('createOne').style.display = (this.value == 3 || this.value == 2) ? 'block' : 'none';
});
}
<select id="depositProductType" name="prod_type" onchange="showDiv(this)">
<option class="blank" value="0">Please select</option>
<option value="1">Fixed Deposit</option>
<option value="2">Savings Deposit</option>
<option value="3">Scheduled Deposit</option>
</select>
<!-- this is the multiple div I want to display from my html -->
<div id="allowJoint" style="display: none"> allowJoint </div>
<div id="allowTransfer" style="display: none"> allowTransfer </div>
<div id="allowDisabling" style="display: none"> allowDisabling </div>
<div id="createOne" style="display: none"> createOne </div>

Changing html content with javascript based on dropdown selection

I have a code in which I want different html elements to appear and disappear based on selection in html dropdown. The problem is that the console returns the value of the dropdown correctly but with the given code below, none of the html appear upon changing the value of the dropdown.
Here's the code: http://textuploader.com/dhzi6
HTML
<select id="dropDown">
<option value="default" selected="selected"> Please select shape </option>
<option value="one" id="rectangle">Rectangle</option>
<option value="two" id="triangle">Triangle</option>
<option value="three" id="circle">Circle</option>
</select>
<div id="wrapperOne"></div>
<div id="wrapperTwo"></div>
<div id="wrapperThree"></div>
JS
var dropDown = document.getElementById("dropDown"),
myWrappers = [
document.getElementById("wrapperOne"),
document.getElementById("wrapperTwo"),
document.getElementById("wrapperThree")
];
for (i=0; i<myWrappers.length; i++){
if(dropDown.value === "default"){
myWrappers[i].style.display = "none";
} else if(dropDown.value === "one"){
myWrappers[i].style.display = "none";
myWrappers[0].style.display = "block";
} else if(dropDown.value === "two"){
myWrappers[i].style.display = "none";
myWrappers[1].style.display = "block";
} else if(dropDown.value === "three"){
myWrappers[i].style.display = "none";
myWrappers[2].style.display = "block";
}
}

The problem is you have not fired the onchange event. Add onchange event for your select box and kept your javascript code inside one function. It will work.
HTML
<select id="dropDown" onchange="test()">
<option value="default" selected="selected"> Please select shape </option>
<option value="one" id="rectangle">Rectangle</option>
<option value="two" id="triangle">Triangle</option>
<option value="three" id="circle">Circle</option>
</select>
<div id="wrapperOne"><h1>First</h1></div>
<div id="wrapperTwo"><h1>Second</h1></div>
<div id="wrapperThree"><h1>Third</h1></div>
JS
var dropDown = document.getElementById("dropDown"),
myWrappers = [
document.getElementById("wrapperOne"),
document.getElementById("wrapperTwo"),
document.getElementById("wrapperThree")
];
function test() {
for (i=0; i<myWrappers.length; i++){
if(dropDown.value === "default"){
myWrappers[i].style.display = "none";
} else if(dropDown.value === "one"){
myWrappers[i].style.display = "none";
myWrappers[0].style.display = "block";
} else if(dropDown.value === "two"){
myWrappers[i].style.display = "none";
myWrappers[1].style.display = "block";
} else if(dropDown.value === "three"){
myWrappers[i].style.display = "none";
myWrappers[2].style.display = "block";
}
}
}
FIDDLE DEMO
UPDATE
Now the above code will run successfully, but the way you are achieving the desired result is too complicated. You can make it very simple and neat. Look at the following code javascript code.
function changeEvent() {
var dropDown = document.getElementById("dropDown").value;
if(dropDown === "default"){
document.getElementById('wrapperOne').style.display = 'block';
document.getElementById('wrapperTwo').style.display = 'block';
document.getElementById('wrapperThree').style.display = 'block';
} else {
document.getElementById('wrapperOne').style.display = 'none';
document.getElementById('wrapperTwo').style.display = 'none';
document.getElementById('wrapperThree').style.display = 'none';
if(dropDown === "one"){
document.getElementById('wrapperOne').style.display = 'block';
} else if(dropDown === "two"){
document.getElementById('wrapperTwo').style.display = 'block';
} else if(dropDown === "three"){
document.getElementById('wrapperThree').style.display = 'block';
}
}
}
In the above code, first thing there is no for loop. Simply check the selected value and display the html parts accordingly. The same I have added in the snippet below.
function changeEvent() {
var dropDown = document.getElementById("dropDown").value;
if(selvalue === "default"){
document.getElementById('wrapperOne').style.display = 'block';
document.getElementById('wrapperTwo').style.display = 'block';
document.getElementById('wrapperThree').style.display = 'block';
} else {
document.getElementById('wrapperOne').style.display = 'none';
document.getElementById('wrapperTwo').style.display = 'none';
document.getElementById('wrapperThree').style.display = 'none';
if(selvalue === "one"){
document.getElementById('wrapperOne').style.display = 'block';
} else if(selvalue === "two"){
document.getElementById('wrapperTwo').style.display = 'block';
} else if(selvalue === "three"){
document.getElementById('wrapperThree').style.display = 'block';
}
}
}
<select id="dropDown" onChange="changeEvent()">
<option value="default" selected="selected"> Please select shape </option>
<option value="one" id="rectangle">Rectangle</option>
<option value="two" id="triangle">Triangle</option>
<option value="three" id="circle">Circle</option>
</select>
<div id="wrapperOne"><h1>This is Wrapper ONE</h1></div>
<div id="wrapperTwo"><h1>This is Wrapper TWO</h1></div>
<div id="wrapperThree"><h1>This is Wrapper THREE</h1></div>

If you are willing to use jQuery i would suggest this:
$('#dropDown').on('change', function(e){
var selectedOption = $(this).find(':selected');
if (selectedOption.attr('data-id') != null) {
$('.wrapper:not(#' + selectedOption.attr('data-id') + ')').hide();
$('#' + selectedOption.attr('data-id')).show();
} else {
$('.wrapper:not(:hidden)').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown">
<option value="default" selected="selected"> Please select shape </option>
<option data-id="wrapperOne" value="one" id="rectangle">Rectangle</option>
<option data-id="wrapperTwo" value="two" id="triangle">Triangle</option>
<option data-id="wrapperThree" value="three" id="circle">Circle</option>
</select>
<div id="wrapperOne" class="wrapper" style="display: none;">One</div>
<div id="wrapperTwo" class="wrapper" style="display: none;">Two</div>
<div id="wrapperThree" class="wrapper" style="display: none;">Three</div>
With best regards,
John

hide/show div depending on option

i am very confused why is this it doesn't show my div. This is just a simple idea, i have two divs which is :
<div id="custom-report">
</div>
<div id="daily-report">
</div>
now, i have a select which select when i want to hide or show them:
<select class="form-control" id="selectedrep">
<option value="0">--- SELECT OPTION ---</option>
<option value="1">Daily</option>
<option value="2">Custom</option>
</select>
and i am doing my javascript like this:
$('#selectedrep').change(function(){
var selectedReport = $(this).val();
if(selectedReport == 1) {
document.getElementById('daily-report').style.display = "block";
document.getElementById('custom-report').style.display = '';
alert("daily");
}
if(selectedReport == 2) {
document.getElementById('custom-report').style.display = "block";
document.getElementById('daily-report').style.display = '';
alert('custom');
}
else {
document.getElementById('custom-report').style.display = "none";
document.getElementById('daily-report').style.display = "none";
}
});
and also first, i will hide them all with my css with this:
#custom-report {
display: none;
}
#daily-report {
display: none;
}
why is it, when i go navigate to daily, it will show, and just vanished. and if i go navigate for custom, it will show my div correctly.

In your second condition, you should have else if instead of if
Else condition is only considered when second if condition fails, not every time. if....else if...else flow would solve this problem.
$('#selectedrep').change(function() {
var selectedReport = $(this).val();
if (selectedReport == 1) {
document.getElementById('daily-report').style.display = "block";
document.getElementById('custom-report').style.display = '';
} else if (selectedReport == 2) {
document.getElementById('custom-report').style.display = "block";
document.getElementById('daily-report').style.display = '';
} else {
document.getElementById('custom-report').style.display = "none";
document.getElementById('daily-report').style.display = "none";
}
});
#custom-report {
display: none;
}
#daily-report {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="custom-report">
CUSTOM
</div>
<div id="daily-report">
DAILY
</div>
<select class="form-control" id="selectedrep">
<option value="0">--- SELECT OPTION ---</option>
<option value="1">Daily</option>
<option value="2">Custom</option>
</select>
Simplified code -
$('#selectedrep').change(function() {
var selectedReport = this.value;
document.getElementById('custom-report').style.display = "none";
document.getElementById('daily-report').style.display = "none";
if (selectedReport == 1) {
document.getElementById('daily-report').style.display = "block";
} else if (selectedReport == 2) {
document.getElementById('custom-report').style.display = "block";
}
});
#custom-report {
display: none;
}
#daily-report {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="custom-report">
CUSTOM
</div>
<div id="daily-report">
DAILY
</div>
<select class="form-control" id="selectedrep">
<option value="0">--- SELECT OPTION ---</option>
<option value="1">Daily</option>
<option value="2">Custom</option>
</select>
Using jQuery(No need to have css) -
$('#selectedrep').change(function() {
var selectedReport = this.value;
var custom = $('#custom-report');
var daily = $('#daily-report');
custom.add(daily).hide()
if (selectedReport == 1) {
daily.show();
} else if (selectedReport == 2) {
custom.show();
}
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="custom-report">
CUSTOM
</div>
<div id="daily-report">
DAILY
</div>
<select class="form-control" id="selectedrep">
<option value="0">--- SELECT OPTION ---</option>
<option value="1">Daily</option>
<option value="2">Custom</option>
</select>

You have done mistake in if else. In your second condition you have to use if else instead of only if. Please follow below code::
$('#selectedrep').change(function(){
var selectedReport = $(this).val();
if(selectedReport == 1) {
document.getElementById('daily-report').style.display = "block";
document.getElementById('custom-report').style.display = '';
alert("daily");
}
else if(selectedReport == 2) {
document.getElementById('custom-report').style.display = "block";
document.getElementById('daily-report').style.display = '';
alert('custom');
}
else {
document.getElementById('custom-report').style.display = "none";
document.getElementById('daily-report').style.display = "none";
}
});
#custom-report {
display: none;
}
#daily-report {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="custom-report">
Custom Report
</div>
<div id="daily-report">
Daily Report
</div>
<select class="form-control" id="selectedrep">
<option value="0">--- SELECT OPTION ---</option>
<option value="1">Daily</option>
<option value="2">Custom</option>
</select>
Also just one thing As you are using jQuery onchange event you can use jQuery for hide and show. Please follow working jsfiddle link:: link

Why cant you add "else" infront of IF statement, this may be your problem.
$('#selectedrep').change(function(){
var selectedReport = $(this).val();
if(selectedReport == 1) {
document.getElementById('custom-report').style.display = 'none';
document.getElementById('daily-report').style.display = "block";
alert("daily");
}
else if(selectedReport == 2) {
document.getElementById('daily-report').style.display = 'none';
document.getElementById('custom-report').style.display = "block";
alert('custom');
}
else {
document.getElementById('custom-report').style.display = "none";
document.getElementById('daily-report').style.display = "none";
}
});

$("#selectdrep").on("click",function(){
var selectedvalue = $(this).val();
if(selectedvalue == "1"){
document.getElementById("custom-report").style.display = "block";
document.getElementById("daily-report").style.display = "none";
}else if(selectedvalue == "2"){
document.getElementById("daily-report").style.display = "block";
document.getElementById("custom-report").style.display = "none";
}else{
document.getElementById("custom-report").style.display = "none";
document.getElementById("daily-report").style.display = "none";
}
})

Or you could get rid of the if..else altogether:
$("#selectdrep").on("click",function(){
var selectedvalue = $(this).val();
document.getElementById("custom-report").style.display = selectvalue == 1 ? "block" : "none";
document.getElementById("daily-report").style.display = selectvalue == 2 ? "block" : "none";
})

In your second condition, you should have else if instead of if
Complete jQuery solution based on the fact you have $('#selectedrep').change() as your function.
$('#selectedrep').change(function() {
var selectedReport = $(this).val();
if (selectedReport == 1) {
$('#daily-report').show();
$('#custom-report').hide();
} else if (selectedReport == 2) {
$('#custom-report').show();
$('#daily-report').hide();
} else {
$('#custom-report').hide();
$('#daily-report').hide();
}
});

Change visibility of div when option is changed inside dropbox

I got codes like this inside my php:
<section id="placeOrder">
<h2>Place order</h2>
Your details
Customer Type:
<select name="customerType">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
and these are the divs of which visibility has to be changed according to the selected option:
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename" id="forename" />
Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
Company Name <input type="text" name="companyName" id="companyName" />
</div>
I tried this javascript:
<script>
document.getElementsByName("customerType").onchange = function () {
var val = this.options[this.selectedIndex].value;
document.getElementById("tradeCustDetails").style.visibility = (val == "trd") ? "visible" : "hidden";
document.getElementById("retCustDetails").style.visibility = (val == "trd") ? "hidden" : "visible";
};
</script>
But div tradecustdetails" does not appear and div retCustDetails is still on there.
Can anyone help?

getElementsByName() returns a collection of all elements in the document with the specified name. Hence you have to loop through them like this:
var x = document.getElementsByName("customerType");
for (var i = 0; i < x.length; i++) {
// do something with x[i]
}
If you are using only one select element, then it is better to use getElementById() like this:
HTML
<select id="customerType" name="customerType">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
Script
document.getElementById("customerType").onchange = function () {
var val = this.options[this.selectedIndex].value;
document.getElementById("tradeCustDetails").style.visibility = (val == "trd") ? "visible" : "hidden";
document.getElementById("retCustDetails").style.visibility = (val == "trd") ? "hidden" : "visible";
};

Updated your script, this should work.
<script>
function jsFunction() {
var val = document.getElementById("dropSelect").options[document.getElementById("dropSelect").selectedIndex].value;
document.getElementById("tradeCustDetails").style.visibility = (val == "trd") ? "visible" : "hidden";
document.getElementById("retCustDetails").style.visibility = (val == "trd") ? "hidden" : "visible";
}
</script>
Update your dropdown HTML as well.
<select id="dropSelect" name="customerType" onchange="jsFunction()">
EDIT #1: using getElementsByName()
function jsFunction() {
var val = document.getElementsByName("customerType")[0];
val = val.options[val.selectedIndex].value;
document.getElementById("tradeCustDetails").style.visibility = (val == "trd") ? "visible" : "hidden";
document.getElementById("retCustDetails").style.visibility = (val == "trd") ? "hidden" : "visible";
}