This has probably been asked about before, but after several hours of looking I can't seem to find anything.
I have a datalist which is meant to display a div based on your selection of the datalist. Whatever I do, I can't seem to find out how to do it. The best I can get to work is have both selections display one of the divs, but not have spesific divs display based on the selection.
How do I make it so choosing div1 display div1, div2 displays div2 and so on?
var myinput = document.getElementById('example');
myinput.addEventListener("change", function() {
var mydiv = document.getElementById('#div');
mydiv.style.display = (this.value === '' ? 'none' : 'inline');
});
.hidden {
display: none;
}
<fieldset>
<legend>This is a datalist</legend>
<input type="text" id="example" list="brow" />
<datalist id="brow">
<option value="div1" />
<option value="div2" />
</datalist>
</fieldset>
<div class="hidden" id="div1">This is div1></div>
<div class="hidden" id="div2">This is div2></div>
your script will be like this.
var myinput = document.getElementById('example');
var divs = document.querySelectorAll('.hidden');
myinput.addEventListener('change', function() {
var mydiv = document.getElementById(this.value);
divs.forEach(div => {
div.style.display = div.id === this.value ? 'block' : 'none';
});
});
.hidden {
display: none;
}
<fieldset>
<legend>This is a datalist</legend>
<input type="text" id="example" list="brow" />
<datalist id="brow">
<option value="div1" />
<option value="div2" />
</datalist>
</fieldset>
<div class="hidden" id="div1">This is div1></div>
<div class="hidden" id="div2">This is div2></div>
If you have a selected element, remove .hidden to show it.
Else, search for the div that doesn't have .hidden and add back the class to hide it.
document.getElementById('example').addEventListener("change", () => {
if(event.target.value){
document.getElementById(event.target.value).classList.remove("hidden");
}
else{
document.querySelector(".somediv:not(.hidden)").classList.add("hidden");
}
});
.hidden {
display: none;
}
<fieldset>
<legend>This is a datalist</legend>
<input type="text" id="example" list="brow"/>
<datalist id="brow">
<option value="div1"/>
<option value="div2"/>
</datalist>
</fieldset>
<div class="somediv hidden" id="div1">This is div1</div>
<div class="somediv hidden" id="div2">This is div2</div>
Related
I am having trouble deleting an element which was duplicated by an onClick event.
Firstly, please don't rage at my IDs....the page is a mess right now.
I have a div element that appears after a radio button is selected.
The Radio Buttons I have created:
<div class="wrapper">
<input type="radio" onclick="yesnoCheck();" name="select" id="option-1">
<input type="radio" onclick="yesnoCheck();" name="select" id="option-2" checked>
<label for="option-1" class="option option-1"><span>Yes</span></label>
<label for="option-2" class="option option-2"><span>No</span></label>
</div>
In this div element is a form.
<div class="basicInfoContainer">
<div class="basicInfoItemTitle"><h3>Full Name</h3></div>
<div class="basicInfoItem"><input type="text" id="fNames" name="Full Names" placeholder="John Doe" size="50"></div>
<div class="basicInfoItemTitle"><h3>Site Name</h3></div>
<div class="basicInfoItem"><input type="text" id="sName" name="Site Name" placeholder="ABC" size="50"></div>
<div class="basicInfoItemTitle"><h3>Site Address</h3></div>
<div class="basicInfoItem"><input type="text" id="sAddress" name="Site Address" placeholder="123 Story Street" size="50"></div>
<div class="basicInfoItemTitle"><h3>Branch</h3></div>
<div class="basicInfoItem">
<select name="Branch" id="branch" aria-placeholder="Select a Branch">
<option value="" disabled selected>Select a Branch...</option>
<option value="Pretoria">Option1</option>
<option value="Midrand">Option2</option>
</select></div>
</div>
<button class="addItem" value="Add Item" id="addItem" onclick = "duplicate()" style="display: none;"><label for="addItem">Add Item</label></button>
This form shows once I press the Yes radio button:
function yesnoCheck() {
if (document.getElementById("option-1").checked) {
document.getElementById("ifYes").style.display = 'block';
document.getElementById("addItem").style.display = "block";
} else {
document.getElementById("ifYes").style.display = 'none';
document.getElementById("addItem").style.display = "none";
}
};
I then duplicate the form using:
var i = 0;
var original = document.getElementById('ifYes');
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "ifYes" + ++i;
original.parentNode.appendChild(clone);
}
My question is, when I press No On the Radio Buttons, I want all those duplicated div elements to be removed.
Right now, only the one ,coded in the HTML gets removed. Not the elements created by JS.
So I managed to fix it.
The altered code lies below:
function yesnoCheck() {
if (document.getElementById("option-1").checked) {
document.getElementById("ifYes").style.display = 'block';
document.getElementById("addItem").style.display = "block";
} else {
document.getElementById("ifYes").style.display = 'none';
document.getElementById("addItem").style.display = "none";
};
if(document.getElementById("option-2").checked){
var removeEquipment= document.getElementById("ifYes0");
removeEquipment.remove();
}
}
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "ifYes" + i;
original.parentNode.appendChild(clone);
}
By no means efficient, but I got around it by not adding var i up the whole time. Once I press "Add Item", each time it will clone the div element with ID ifYes0.
Then I made a var for ifYes0 and then it removes all additional ones.
I don't care about data retention in those forms that are deleted, but if I need to, in future I might just set those display to none, instead.
I have a problem with select options with display: none, block. On PC it works, there is no problem. But on mobile, it also works, but at the second click and after 1-2 seconds. I don't know what is my mistake. I need when the user clicks yes, the place input must be display: block, price input display: none if the user clicks no the place input must be display: none, price input display: block,
My HTML
<div class="second-tab">
<div class="form-group">
<span class="work-span" id="workspan">Work?</span>
<select id="work" name="work" class="work">
<option value="no" selected>No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="form-group">
<span id="label-price" class="label-price work-span">Price</span>
<input type="text" id="price" class="price" />
</div>
<div class="form-group">
<span class="label-place work-span">Place</span>
<input type="text" id="place" name="place" class="place" />
</div>
<div class="form-group">
<button type="submit">Submit </button>
</div>
</div>
My JS
work.addEventListener("click", (e) => {
if (e.target.value == "no") {
priceInput.style.display = "block";
labelPrice.style.display = "block";
placeInput.style.display = "none";
labelPlace.style.display = "none";
} else if (e.target.value == "yes") {
priceInput.style.display = "none";
labelPrice.style.display = "none";
placeInput.style.display = "block";
labelPlace.style.display = "block";
}
});
My CSS
#label-price {
display: block;
}
#workspan {
display: block;
}
.place {
display: none;
}
.work-span {
display: none;
}
Using a change event on a select, you can toggle a class hidding whatever you want.
document.getElementById("select").addEventListener("change", () => {
document.getElementById("example").classList.toggle("d-none");
})
.d-none{
display:none;
}
<select id="select">
<option selected>Show</option>
<option>Hide</option>
</select>
<div id="example">example</div>
When I select the first option, I would like it to show the first input or div (already working) but now I need it for the 2nd option too and 3rd option too. I tried else if which didn't work.
function optSelectEstimate(nameSelect)
{
if(nameSelect){
admOptionValue = document.getElementById("optnbestim1").value;
if(admOptionValue == nameSelect.value){
document.getElementById("nbestim1").style.display = "block";
}
else{
document.getElementById("nbestim1").style.display = "none";
}
}
else{
document.getElementById("nbestim1").style.display = "none";
}
}
<form method="post" action="index-2.html">
<!--Form Group-->
<div class="form-group">
<label class="label">Étape #1</label>
<select style="width:250px;" onchange="optSelectEstimate(this);">
<option>Type de Service</option>
<option id="optnbestim1" value="fenetre">Fenêtres (panneau traditionnel)</option>
<option id="optnbestim2" value="gouttiere">Gouttières</option>
<option id="optnbestim3" value="lavagepression">Lavage à pression du revêtement extérieur</option>
</select>
</div>
<!--Form Group-->
<div class="form-group">
<label class="label">Étape #2</label>
<div id="nbestim1" style="display: none;">
<input type="number" name="nbestim1" placeholder="Unités"></div>
<div id="nbestim2" style="display: none;">
<input type="number" name="nbestim2" placeholder="Pied linéaire"></div>
<div id="nbestim3" style="display: none;">
<input type="number" name="nbestim3" placeholder="Pied carré"></div>
</div>
</form>
You can try the "selectedIndex" of your select.
var nbestimId = "nbestim" + (nameSelect.selectedIndex + 1);
document.getElementById(nbestimId).style.display = "block";
Did not test it.
Also you have to hide the other two, i suppose.
I am trying to do the following:
I have drop down menu with four options in it. When I choose Shipped a text box should enabled. So I tried the following:
<div class="col-md-3">
<select class="form-control" id="ostatus" name= "ostatus">
<option value="Uploaded" <?php if ($dispatch_status == "Uploaded") echo "selected='selected'";?> >Uploaded</option>
<option value="Processing" <?php if ($dispatch_status == "Processing") echo "selected='selected'";?> >Processing</option>
<option value="Dispatched" <?php if ($dispatch_status == "Dispatched") echo "selected='selected'";?> >Dispatched</option>
<option value="Shipped" <?php if ($dispatch_status == "Shipped") echo "selected='selected'";?> >Shipped</option>
</select>
</div>
</div>
<input type="text" class="form-control" name="shipping_notes" disabled="true" id="shipping_notes" aria-describedby="" placeholder="Enter Shipping details">
Java script:
<head>
<script type="text/javascript">
document.getElementById('ostatus').addEventListener('change', function()
{
console.log(this.value);
if (this.value == 'Shipped') {
document.getElementById('shipping_notes').disabled = false;
} else {
document.getElementById('shipping_notes').disabled = true;
}
});
</script>
</head>
Doesn't seem to trigger? I don't see log on console too. What could be wrong here?
Update:
I have pasted the html code here:
https://justpaste.it/6zxwu
Update
Since you've now shared your other code I think I know what you want. You have multiple modals, each with a select list and shipping_notes textbox which should be enabled when the selection is Shipped for that particular modal. I've modified your HTML to get this working.
I've updated your HTML a bit. You have multiple elements with the same ID. HTML IDs should be unique. If you want to target multiple elements it's safer to use class (or data-) attributes. I've added class="order-status" to each select and class="shipping_notes_txt" to each textbox. I've used element.querySelector() and document.querySelectorAll() to select DOM elements.
The snippet below mimics two modals. When the select is updated, it only enables/disabled the textbox within the same form element.
// wait for the DOM to load
document.addEventListener('DOMContentLoaded', function() {
// get all select elements with class=order-status
var selects = document.querySelectorAll('.order-status');
// iterate over all select elements
for (var i = 0; i < selects.length; i++) {
// current element
var element = selects[i];
// add event listener to element
element.addEventListener('change', function()
{
console.log(this.value);
// get the form closest to this element
var form = this.closest('form');
// find the shipping notes textbox inside form and disable/enable
if (this.value == 'Shipped') {
form.querySelector('.shipping_notes_txt').disabled = false;
} else {
form.querySelector('.shipping_notes_txt').disabled = true;
}
});
// default value if status == Shipped: enable textbox
if (element.value == "Shipped")
{
var form = element.closest('form');
form.querySelector('.shipping_notes_txt').disabled = false;
}
}
});
.modal1 {
display:inline-block;
vertical-align:top;
padding: .5em;
padding-bottom:5em;
border: 1px solid black;
}
<div class="modal1">
<h3>First Modal</h3>
<div id="edit1" class="modal fade" role="dialog">
<form action="order.php" autocomplete="off" method="post">
<div class="col-md-2 ml-3 pt-1">
<label for="role" class="mr-3">Status</label>
</div>
<select class="form-control order-status" id="ostatus1" name= "ostatus">
<option value="Uploaded" selected='selected' >Uploaded</option>
<option value="Processing">Processing</option>
<option value="Dispatched">Dispatched</option>
<option value="Shipped">Shipped</option>
</select>
<input type="text" class="form-control shipping_notes_txt" name="shipping_notes" disabled="true" id="shipping_notes1" aria-describedby="emailHelp" placeholder="Enter Shipping details">
</form>
</div>
</div>
<div class="modal1">
<h3>Second Modal</h3>
<div id="edit20" class="modal fade" role="dialog" >
<form action="order.php" autocomplete="off" method="post">
<div class="col-md-2 ml-3 pt-1">
<label for="role" class="mr-3">Status</label>
</div>
<select class="form-control order-status" id="ostatus20" name= "ostatus">
<option value="Uploaded" >Uploaded</option>
<option value="Processing">Processing</option>
<option value="Dispatched">Dispatched</option>
<option value="Shipped" selected='selected' >Shipped</option>
</select>
<input type="text" class="form-control shipping_notes_txt" name="shipping_notes" disabled="true" id="shipping_notes20" aria-describedby="emailHelp" placeholder="Enter Shipping details">
</form>
</div>
</div>
Add onchange to your <select>
<select class="form-control" id="ostatus" name= "ostatus" onchange = "statuschange()">
And change the JavaScript to :
<script type="text/javascript">
function statuschange(){
var drpDownValue = document.getElementById('ostatus').value;
if (drpDownValue == 'Shipped')
{
document.getElementById('shipping_notes').disabled = false;
}
else
{
document.getElementById('shipping_notes').disabled = true;
}
}
</script>
assuming everything on the server side this works HTML comes first
<div class="col-md-3"> <select class="form-control" id="ostatus" name= "ostatus">
<option value="Uploaded" selected="selected" >Uploaded</option>
<option value="Processing" >Processing</option>
<option value="Dispatched" >Dispatched</option>
<option value="Shipped" >Shipped</option>
</select>
</div>
</div>
<input type="text" class="form-control" name="shipping_notes" disabled="true" id="shipping_notes" aria-describedby="" placeholder="Enter Shipping details">
document.getElementById('ostatus').addEventListener('change', function()
{
console.log(this.value);
if (this.value == 'Shipped') {
document.getElementById('shipping_notes').disabled = false;
} else {
document.getElementById('shipping_notes').disabled = true;
}
});
I am trying to show the FILE DIV if the user selects the doctor value in the select statement. I know the if statement works because I also print the value in the console which works perfectly fine. I toggle my divs in the same exact manner in my other webpages so I'm not understanding what's going on with this one in particular.
function viewFile(){
var file = document.getElementById("doclicense");
var type = document.getElementById('accountType').value;
if(type === 'doctor') {
file.style.display = "block";
console.log(type);
}
}
.hidden{
display : none;
}
<div>
<select id="accountType" name="type" class="form-control" onchange="viewFile()">
<option required>Account Type</option>
<option value="doctor" name="doctor" id="doctor">Doctor</option>
<option value="regular" name="regular" id="reg">Regular Account</option>
</select>
</div>
<div class="hidden file" id="doclicense">
<input type="file" name="license" />
<input type="submit"/>
</div>
****************************************EDIT-WORKAROUND**********************
Since my code refused to work, I added a line of code with 'head' being the title and not a real value. Thanks to everyone who contributed. I took out the hidden class altogether but when I add it, it still doesn't work correctly.
function viewDocFile() {
var file = document.getElementById("doclicense");
var type = document.getElementById('accountType').value;
if (type === 'regular' || type === 'head') {
file.style.display = "none";
console.log(type);
} else {
file.style.display = "block";
console.log(type);
}
}
***************************FINAL-EDIT************************
Kept the original code, but added the CSS inline.
<div class="form-group col-md-6" id="doclicense" style="display:none;">
Works perfectly now.
Here is an example of how this code should be written (even if there are still horrors)
// declare them here and not in a function where they will be redone each time the function is called
const
file_IHM = document.querySelector('#doclicense')
,
type_IHM = document.querySelector('#accountType') // and not with .value ...!
;
type_IHM.onchange = function()
{
file_IHM.style.display = (this.value==='doctor')?"block":"none";
console.log('type_IHM.value', this.value );
}
#doclicense { display : none; }
<div>
<select id="accountType" name="type" class="form-control" > <!-- let the js in the js part -->
<option required>Account Type</option>
<option value="doctor" id="doctor" >Doctor</option>
<option value="regular" id="regular" >Regular Account</option>
</select>
</div>
<div class="file-class" id="doclicense"> <!-- do not use class="hidden... -->
<input type="file" name="license" />
<input type="submit" /> <!-- there is no form anywhere... why don't you use <button> ?? -->
</div>
If that what your code really looks like, did you add your js in a <script></script> tag?
Or do you want to toggle the hide and show of the div?
if so this answer may help
<select id="accountType" name="type" class="form-control" onchange="viewFile()"><option required>Account Type</option>
<option value="doctor" name="doctor" id="doctor">Doctor</option>
<option value="regular" name="regular" id="reg">Regular Account</option>
</select>
</div>
<div class="hidden file" id="doclicense">
<input type="file" name="license" />
<input type="submit"/>
</div>
<script>
function viewFile(){
var file = document.getElementById("doclicense");
var type = document.getElementById('accountType').value;
if(type === 'doctor') {
file.style.display = "block";
console.log(type);
}else{
file.style.display = "none";
console.log(type);
}
}
</script>