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>
Related
I created the <script> tag before my </body> as follows:
<script type="text/javascript">
var select = document.getElementById('empresa')
var value = select.options[select.selectedIndex].value
</script>
And I created a select where I'm inserting the options like this:
<select name="empresa" id="empresa">
<option onclick="javascript: if(value == 'none'){
document.getElementById('umConvite').style.display = 'none'
document.getElementById('doisConvite').style.display = 'none'
document.getElementById('tresConvite').style.display = 'none'
document.getElementById('quatroConvite').style.display = 'none'
document.getElementById('btn-confirmar').style.display = 'none'
}" value="none">-----</option>
<option onclick="javascript:
if(value == 'Empresa 1'){
document.getElementById('umConvite').style.display = 'flex'
document.getElementById('umConvite').style.flexDirection= 'column'
document.getElementById('doisConvite').style.display = 'none'
document.getElementById('tresConvite').style.display = 'none'
document.getElementById('quatroConvite').style.display = 'none'
document.getElementById('btn-confirmar').style.display = 'flex'
}
" value="Empresa 1">Empresa 1</option>
<option onclick="if(value == 'Empresa 2'){
document.getElementById('doisConvite').style.display = 'flex'
document.getElementById('doisConvite').style.flexDirection= 'column'
document.getElementById('umConvite').style.display = 'none'
document.getElementById('tresConvite').style.display = 'none'
document.getElementById('quatroConvite').style.display = 'none'
document.getElementById('btn-confirmar').style.display = 'flex'
}" value="Empresa 2">Empresa 2</option>
</select>
This in Mozilla Firefox is working correctly, but in chrome and safari it's not working, how could I solve this?
You can define select option without any JavaScript code And the trigger change event of the select tag and check your condition:
var select = document.getElementById("empresa");
select.addEventListener('change', function (e) {
func(e);
});
function func(e) {
debugger
if (e.target.value == 'none') {
alert("none");
//document.getElementById('umConvite').style.display = 'none'
//document.getElementById('doisConvite').style.display = 'none'
//document.getElementById('tresConvite').style.display = 'none'
//document.getElementById('quatroConvite').style.display = 'none'
//document.getElementById('btn-confirmar').style.display = 'none'
}
else if (e.target.value == 'Empresa 1') {
alert("Empresa 1");
//document.getElementById('umConvite').style.display = 'flex'
//document.getElementById('umConvite').style.flexDirection = 'column'
//document.getElementById('doisConvite').style.display = 'none'
//document.getElementById('tresConvite').style.display = 'none'
//document.getElementById('quatroConvite').style.display = 'none'
//document.getElementById('btn-confirmar').style.display = 'flex'
}
else if (e.target.value == 'Empresa 2') {
alert("'Empresa 2'")
//document.getElementById('doisConvite').style.display = 'flex'
//document.getElementById('doisConvite').style.flexDirection = 'column'
//document.getElementById('umConvite').style.display = 'none'
//document.getElementById('tresConvite').style.display = 'none'
//document.getElementById('quatroConvite').style.display = 'none'
//document.getElementById('btn-confirmar').style.display = 'flex'
}
}
<select name="empresa" id="empresa">
<option value="none">
-----
</option>
<option value="Empresa 1">
Empresa 1
</option>
<option value="Empresa 2">
Empresa 2
</option>
</select>
Note that because I don't have complete html (element with umConvite, doisConvite.. ids) I just show alert in each conditions.
A form contains multiple fields. One field is "yes/no" dropdown. When yes selected, another dropdown appears. When no selected a text input field appears.
Depending on yes/no dropdown one of the fields' data should be submitted to the database.
However, both fields data is sent to the database. But the database wants a string and now it gets an array. Data can be submitted.
What should be adapted to prevent this, so only data from the showed field is put through the controller and not also data from at that moment hidden field?
Note: 1 field (input of dropdown) should be filled in, required.
JQuery
window.onload = function() {
document.getElementById('ifYes').style.display = 'none';
document.getElementById('ifNo').style.display = 'none';
}
function hideShow() {
var D = document.getElementById("yesno")
var Y = document.getElementById('isYes')
var N = document.getElementById('isNo')
if (D.selected) {
if (D.value == "yes"){
Y.style.display = 'block';
N.style.display = 'none';
Y.required = true;
}
else{
N.style.display = 'block';
Y.style.display = 'none';
N.required = true;
}
}
}
HTML
<div class="row">
<div class="col-6">
<select name="agree" class="form-control" onchange="hideShow();" id="yesno" required>
<option></option>
<option id="yes">Yes</option>
<option id="no">No</option>
</select>
</div>
<div class="col-6">
<select name="type" class="form-control" id="ifYes">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<input type="text" id="ifNo" class="form-control input-text" name="type">
</div>
</div>
<div class="row">
<button type="submit" class="btn btn-primary btn-block" style="margin: 10px;">New</button>
</div>
In my controller, I have performed validation on institute saying required. Now, I remove this. And with adapting the javascript code the error is gone.
$this->validate($request, [
'institute' => 'min:2',
...
]);
$project = new Project();
...
$project->type = request('type');
...
$project->save();
Javascript adding the disabled fields
function hideShow() {
var x = document.getElementById('YesNo');
var r = x.options[x.selectedIndex].value;
var y = document.getElementById("ifyes");
var n = document.getElementById("ifno");
if ( r == "Yes"){
y.style.display = "block";
n.style.display = "none";
y.disabled = false;
n.disabled = true;
y.required = true;
n.required = false;
}
else if ( r == "No") {
y.disabled = true;
n.disabled = false;
y.style.display = "none";
n.style.display = "block";
y.required = false;
n.required = true;
} else{
y.disabled = true;
n.disabled = true;
y.style.display = "none";
n.style.display = "none";
y.required = false;
n.required = true;
}
}
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
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();
}
});
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";
}