We Keep Coding

each option in select tag disable a specific element in page

I'm trying to implement a form in which you choose a shape from a select tag and it calculates the area and perimeter.
I just want when I select the Square option from the select, radius input disabled like the image.
Please do not use JQuery
Please do not use JQuery
Please do not use JQuery
here is my form please help me with .js file
<div class="container">
<hr class="lighter">
<label for="shapes">Shapes :</label>
<select name="shapes" id="shapes">
<option value="rectangle">Rectangle</option>
<option value="square">Square</option>
<option value="circle">Circle</option>
<option value="cylindrical">Cylindrical</option>
</select>
<br><br>
<lable for="radius">Radius : </lable>
<input type="number" id="radius" disabled><br>
<lable for="shapeWidth">Widht : </lable>
<input type="number" id="shapeWidth"><br>
<lable for="shapeHeight">Height :</lable>
<input type="number" id="shapeHeight">
<hr>
<label for="area" id="area_result">Area :</label>
<label for="area_result"></label>
<br>
<label for="primiter" id="primiter_result">Primiter :</label>
<label for="primiter_result"></label>
</div>

const eleId = document.getElementById("shapes");
const radiusId = document.getElementById("radius");
eleId.addEventListener(
"change",
function () {
if (this.value === "square") {
radiusId.disabled = true;
} else {
radiusId.disabled = false;
}
},
)
<div class="container">
<hr class="lighter" />
<label for="shapes">Shapes :</label>
<select name="shapes" id="shapes">
<option value="rectangle">Rectangle</option>
<option value="square">Square</option>
<option value="circle">Circle</option>
<option value="cylindrical">Cylindrical</option>
</select>
<br /><br />
<lable for="radius">Radius : </lable>
<input type="number" id="radius" /><br />
<lable for="shapeWidth">Widht : </lable>
<input type="number" id="shapeWidth" /><br />
<lable for="shapeHeight">Height :</lable>
<input type="number" id="shapeHeight" />
<hr />
<label for="area" id="area_result">Area :</label>
<label for="area_result"></label>
<br />
<label for="primiter" id="primiter_result">Primiter :</label>
<label for="primiter_result"></label>
</div>

Her is a vanilla JS version
I fixed some spelling and added a "please select"
window.addEventListener("DOMContentLoaded", () => { // when the page has loaded
document.getElementById("shapes").addEventListener("change", function() { // when the select is changed
document.getElementById("radius").disabled = ["rectangle","square"].includes(this.value); // disable if square or rectangle.
})
});
<div class="container">
<hr class="lighter">
<label for="shapes">Shapes :</label>
<select name="shapes" id="shapes">
<option value="">Please select</option>
<option value="rectangle">Rectangle</option>
<option value="square">Square</option>
<option value="circle">Circle</option>
<option value="cylindrical">Cylindrical</option>
</select>
<br><br>
<label for="radius">Radius : </label>
<input type="number" id="radius" ><br>
<label for="shapeWidth">Width : </label>
<input type="number" id="shapeWidth"><br>
<label for="shapeHeight">Height :</label>
<input type="number" id="shapeHeight">
<hr>
<label for="area" id="area_result">Area :</label>
<label for="area_result"></label>
<br>
<label for="perimeter" id="perimeter_result">Perimeter :</label>
<label for="perimeter_result"></label>
</div>

A label element should not be treated like the majority of other HTML elements in that it is not supposed to be used without being referenced to an input element of some type. So you should not use them to present content such as the calculation results as you do!
If you use a form around these various input controls you can use the often overlooked dotted notation to access these various form elements ( though many browsers permit accessing elements directly by ID without even requiring document.getElementById these days since HTML5 ) which is useful within any routines to perform the calculations as it reduces the code required.
// precision for floats
const precision=3;
const d=document;
// get reference to the parent form
const f=d.forms.calculator;
// event handler
const evthandler=function(e){
// ensure all disabled elements are re-enabled
f.querySelectorAll('input:disabled').forEach( input => input.disabled=false );
// named form inputs/outputs etc
let oSel=f.shapes;
let oArea=f.area;
let oPer=f.perimeter;
let oRad=f.radius;
let oWidth=f.shapeWidth;
let oHeight=f.shapeHeight;
// The currently selected `option`
let option=oSel.options[ oSel.options.selectedIndex ];
// access a named dataset to identify which elements to disable.
if( option.dataset.disable!=null ){
f[ option.dataset.disable ].disabled=true;
}
// do the calculations and show the results...
oArea.textContent=area( oSel.value, oWidth.value, oHeight.value, oRad.value );
oPer.textContent=perimeter( oSel.value, oWidth.value, oHeight.value, oRad.value );
};
const area=(shape,w,h,r)=>{
switch( shape ){
case 'square':
case 'rectangle':return w * h;
case 'circle':return ( Math.PI * Math.pow( r, 2 ) ).toFixed(precision);
case 'cylindrical':return ( 2 * Math.PI * Math.pow( r, 2 ) + 2 * Math.PI * r * h ).toFixed(precision);
}
};
const perimeter=(shape,w,h,r)=>{
switch( shape ){
case 'square':return 4 * Math.min(w,h);
case 'rectangle':return ( 2 * w ) + ( 2 * h );
case 'circle':return ( Math.PI * r * 2 ).toFixed(precision);
case 'cylindrical': return ( 2 * ( Math.PI * ( r * 2 ) ) ).toFixed(precision);
}
};
// assign the delegated event handler to respond to any change events
f.addEventListener('change', evthandler )
label{display:block;width:40%;clear:both;padding:0.5rem;}
label input,label select{float:right;width:60%;padding:0.25rem}
hr{margin:1rem 0}
output{color:green}
<div class='container'>
<hr class='lighter'>
<!--
Form added to group together form elements and allow
named access using dot notation.
labels correctly spelled and inputs nested within
so that <br /> tags can be replaced with CSS blocks
Added a dataset ( data-disable )
-->
<form name='calculator'>
<label>Shapes :
<select name='shapes'>
<option disabled hidden selected>Please select
<option data-disable='radius' value='rectangle'>Rectangle</option>
<option data-disable='radius' value='square'>Square</option>
<option value='circle'>Circle</option>
<option value='cylindrical'>Cylindrical</option>
</select>
</label>
<label>Radius: <input type='number' name='radius' min=0 step=1></label>
<label>Width: <input type='number' name='shapeWidth' min=0 step=1></label>
<label>Height: <input type='number' name='shapeHeight' min=0 step=1></label>
<hr />
<!--
output tags for displaying output rather than labels.
-->
<label>Area: <output name='area'></output></label>
<label>Perimeter: <output name='perimeter'></output></label>
</form>
</div>

Show multiple div elements on select using JavaScript

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.

want to display and hide content based on selection of drop down list

I know its to simple but I am new to this.
I am trying to display a input type date field on selection of "sold" from drop down list.
I have tried few thing but still its not working. So here is my code.
$('#dbType').change(function() {
selection = $(this).val();
switch (selection) {
case 'Sold':
$('#otherType').show();
break;
default:
$('#otherType').hide();
break;
}
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<form action="intra_day_trade_insert.php" method="POST">
Share Puchased Of Company <input type="text" name="Share_Puchased_Of_Company">
<br><br><br> Price For One Share <input type="number" name="Price_For_One_Share">
<br><br><br> Quantity <input type="number" name="Quantity">
<br><br><br> Date Of Purchase <input type="date" name="Date_Of_Purchase">
<br><br><br>
<label for="db">Status</label>
<select name="dbType" id="dbType">
<option>Choose Status</option>
<option value="oracle">Owned</option>
<option value="mssql">Sold</option>
</select>
<div id="otherType" style="display:none;">
Sold on date <input type="date" name="Sold_on_date">
</div>
<br><br><br>
<input type="submit" name="Add_To_Balance_Sheet" value="Add To Balance Sheet">
</form>

Please try it it's work fine.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>‌​
<script>
$('document').ready(function(){
$('#dbType').change(function(){
var selection = $(this).val();
switch(selection)
{
case 'mssql':
$('#otherType').show();
break;
default:
$('#otherType').hide();
break;
}
});
});
</script>
</head>
<body>
<form action = "intra_day_trade_insert.php" method = "POST">
Share Puchased Of Company <input type="text" name = "Share_Puchased_Of_Company">
<br><br><br>
Price For One Share <input type = "number" name = "Price_For_One_Share">
<br><br><br>
Quantity <input type = "number" name = "Quantity">
<br><br><br>
Date Of Purchase <input type = "date" name = "Date_Of_Purchase">
<br><br><br>
<label for="db">Status</label>
<select name="dbType" id="dbType">
<option>Choose Status</option>
<option value="oracle">Owned</option>
<option value="mssql">Sold</option>
</select>
<div id="otherType" style="display:none;">
Sold on date <input type = "date" name = "Sold_on_date">
</div>
<br><br><br>
<input type = "submit" name = "Add_To_Balance_Sheet" value = "Add To Balance Sheet">
</form>
</body>
</html>

The issue is because the value of the option in the select is mssql, not Sold - that's the text of the option.
Also, make sure that you execute the jQuery logic in a document.ready handler when including it in the <head> of the document, and you can simplify the logic by using toggle() instead. Try this:
$(function() {
$('#dbType').change(function() {
$('#otherType').toggle($(this).val() == 'mssql');
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<form action="intra_day_trade_insert.php" method="POST">
Share Puchased Of Company
<input type="text" name="Share_Puchased_Of_Company"><br><br><br>
Price For One Share <input type="number" name="Price_For_One_Share"><br><br><br>
Quantity <input type="number" name="Quantity"><br><br><br>
Date Of Purchase <input type="date" name="Date_Of_Purchase"><br><br><br>
<label for="db">Status</label>
<select name="dbType" id="dbType">
<option>Choose Status</option>
<option value="oracle">Owned</option>
<option value="mssql">Sold</option>
</select>
<div id="otherType" style="display:none;">
Sold on date <input type="date" name="Sold_on_date">
</div><br><br><br>
<input type="submit" name="Add_To_Balance_Sheet" value="Add To Balance Sheet">
</form>

You have passed wrong value in sold option, check updated snippet below:
$('#dbType').change(function(){
selection = $(this).val();
switch(selection)
{
case 'Sold':
$('#otherType').show();
break;
default:
$('#otherType').hide();
break;
}
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<form action = "intra_day_trade_insert.php" method = "POST">
Share Puchased Of Company <input type="text" name = "Share_Puchased_Of_Company">
<br><br><br>
Price For One Share <input type = "number" name = "Price_For_One_Share">
<br><br><br>
Quantity <input type = "number" name = "Quantity">
<br><br><br>
Date Of Purchase <input type = "date" name = "Date_Of_Purchase">
<br><br><br>
<label for="db">Status</label>
<select name="dbType" id="dbType">
<option>Choose Status</option>
<option value="Owned">Owned</option>
<option value="Sold">Sold</option>
</select>
<div id="otherType" style="display:none;">
Sold on date <input type = "date" name = "Sold_on_date">
</div>
<br><br><br>
<input type = "submit" name = "Add_To_Balance_Sheet" value = "Add To Balance Sheet">
</form>

Set content based on element type with jquery

I am trying create a function that can set content (value or text) of an HTML element without worrying about the type of the element. So far I have made up to to this:
function setContent(elm, value){
if(elm.is('[value]')){
elm.val(value);
}else{
elm.text(value);
}
}
but the problem here is it is not working for select element. The working snippet is added below, can you please give a lead?
$(document).ready(function(){
$('#setContent').on('click', function(){
$('#setElements').children().each(function( index ) {
var newContent = $('#newContent').val();
setContent($(this), newContent );
});
});
});
function setContent(elm, value){
if(elm.is('[value]')){
elm.val(value);
}else{
elm.text(value);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Content: <input type="text" id="newContent" value="Two" />
<button id="setContent">Set Content</button>
<hr />
Elemets to set contents:
<div id="setElements">
<input type="text" value="This is a Text" />
<input type="hidden" value="This is a Hidden" />
<input type="button" value="This is a Button" />
<button>This is a Button2</button>
<div>This is a DIV</div>
<span>SPAN here</span>
<p>Paragraph</p>
<br>
Not working on: <select>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
</div>

<select> requires appending a new option. Modify setContent() like this
function setContent(elm, value){
if(elm.is('select') ){
// empty element, and then append new option
elm.empty().append( $('<option/>', { value: value, html:value }) );
} else if(elm.is('[value]')){
elm.val(value);
}else{
elm.text(value);
}
}
$(document).ready(function(){
$('#setContent').on('click', function(){
$('#setElements').children().each(function( index ) {
var newContent = $('#newContent').val();
setContent($(this), newContent );
});
});
});
function setContent(elm, value){
if(elm.is('select') ){
elm.empty().append( $('<option/>', { value: value, html:value }) );
} else if(elm.is('[value]')){
elm.val(value);
}else{
elm.text(value);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Content: <input type="text" id="newContent" value="Two" />
<button id="setContent">Set Content</button>
<hr />
Elemets to set contents:
<div id="setElements">
<input type="text" value="This is a Text" />
<input type="hidden" value="This is a Hidden" />
<input type="button" value="This is a Button" />
<button>This is a Button2</button>
<div>This is a DIV</div>
<span>SPAN here</span>
<p>Paragraph</p>
<br>
Not working on: <select>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
</div>

You can pass selector "[value], :has([value])" to .is() at if condition
$(document).ready(function() {
$('#setContent').on('click', function() {
$('#setElements').children().each(function(index) {
var newContent = $('#newContent').val();
setContent($(this), newContent);
});
});
});
function setContent(elm, value) {
if (elm.is("[value], :has([value])"))
{
elm.val(value);
} else {
elm.text(value);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Content:
<input type="text" id="newContent" value="Two" />
<button id="setContent">Set Content</button>
<hr />Elemets to set contents:
<div id="setElements">
<input type="text" value="This is a Text" />
<input type="hidden" value="This is a Hidden" />
<input type="button" value="This is a Button" />
<button>This is a Button2</button>
<div>This is a DIV</div>
<span>SPAN here</span>
<p>Paragraph</p>
<br>Not working on:
<select>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
</div>

Please try the following script
function setContent(elm, value) {
if (elm.is('select')){
elm.val(value);
} else {
if(elm.is('[value]')){
elm.val(value);
}else{
elm.text(value);
}
}
}

change your setContent function as follows and try
function setContent(elm, value) {
var tag = elm[0].tagName;
if(['DIV','SPAN','BUTTON','P'].indexOf(tag) >= 0)
elm.text(value);
else if(['INPUT','SELECT'].indexOf(tag) >= 0)
elm.val(value);
}

How to add text field to multi list - jQuery?

I am trying to take user inputed values and add them to a list. I need to check my list to see if it exists first. I am failing at step one, how do I add the value to the list?
This is my code:
HTML:
<form action="">
<div class="device_item">
<label for="dev_name">Device Name</label>
<input id="dev_name" type="text">
</div>
<div class="device_item">
<label for="dev_name">Device Type</label>
<input id="dev_type" type="text">
</div>
<div class="device_item">
<label for="dev_os">Device OS</label>
<input id="dev_os" type="text">
</div>
<div class="device_item">
<div class="device_info">
<div class="device_info_header">
<label>Device Information Header</label>
<div>
<select multiple="multiple" id="lstBox1" name="device_info_header">
<option value="net_info">Network Info</option>
<option value="os_info">OS Info</option>
<option value="drive_info">Drive Info</option>
<option value="time_dif">Time Difference Info</option>
</select>
</div>
<div id="arrows">
<input type='button' class="delete" value=' < ' />
<input type='button' class='add' value=' > ' />
</div>
<div>
<select multiple="multiple" id="lstBox2" name="device_info_header"></select>
</div>
<input type="text" name="other_info" id="dev_info_other_text" style="display:none;">
<div class="clear_both" />
<div class="other_ops">Other:
<input id="other_field" type="text" />
<input type="button" class="add2" value=' > ' />
</div>
<br>
<br>NEXT BUTTON (creates headers or dictionary keys) TAKES YOU TO:
<br>
<br>TITLE (eg. Net Info, or OS Info)
<br>Key:
<input type="text">
<br>Value:
<input type="text">
<br>Add more button
<br>
<br>next button (loop through the headers/keys).
<br>
<br>finally, a submit button</div>
</div>
</div>
</form>
JS
$(document).ready(function () {
$('.add').click(function (e) {
var selectedOpts = $('#lstBox1 option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#lstBox2').append($(selectedOpts).clone());
e.preventDefault();
});
$('.delete').click(function (e) {
var selectedOpts = $('#lstBox2 option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$(selectedOpts).remove();
e.preventDefault();
});
$('.add2').click(function (e) {
var other_field_str = $('#other_field').val();
alert(other_field_str);
$('#lstBox2').append(other_field_str);
e.preventDefault();
});
});
I also have the code on this fiddle: http://jsfiddle.net/jdell64/8qsda/1/
UPDATED FIDDLE WITH FULL SOLUTION: http://jsfiddle.net/jdell64/8qsda/

You need to create an <option> element containing the Other input.
$('.add2').click(function (e) {
var other_field_str = $('#other_field').val();
alert(other_field_str);
var other_field = $('<option>', {
value: other_field_str,
text: other_field_str
});
$('#lstBox2').append(other_field);
e.preventDefault();
});
FIDDLE