We Keep Coding

Checkvalue for display form element interfering with each other

I have a select box where one particular value is selected another field shows up.
I have no knowledge of javascript and have taken this code from somewhere.
I have this javascript in multiple places in the same form. But, my script works only on one input. If I select another from another select box, the value of previous input closes, the thing which I don't want. This will be well understood if you see the code.
The link where you can check the issue:
jsfiddle
Javascript:
function checkvalue(val) {
if (val === "NewSale")
document.getElementById('actualamt').style.display = 'block';
else
document.getElementById('actualamt').style.display = 'none';
if (val === "SchoolWearAccessories")
document.getElementById('schoolwear').style.display = 'block';
else
document.getElementById('schoolwear').style.display = 'none';
}
<form>
Product Category:
<select name="category" required onchange='checkvalue(this.value)'>
<option value="">Select Product Category</option>
<option value="School Uniforms">School Uniforms</option>
<option value="SchoolWearAccessories">School Wear Accessories</option>
<option value="Hospital Uniforms">Hospital Uniforms</option>
<option value="Corporate Uniforms">Corporate Uniforms</option>
<option value="Industrial Uniforms">Industrial Uniforms</option>
</select>
<div id="schoolwear" style="display:none;">
Sub Category:
<select name="subcategory">
<option value="">Select Product Category</option>
<option value="Uniform Sweaters">Uniform Sweaters</option>
<option value="School Belts">School Belts</option>
<option value="School Ties">School Ties</option>
<option value="Uniform Socks and Shoes">Uniform Socks and Shoes</option>
<option value="School Caps">School Caps</option>
<option value="School Bags">School Bags</option>
</select>
</div>
Tag:
<select name="producttag" onchange='checkvalue(this.value)'>
<option value="">None</option>
<option value="New">New</option>
<option value="Sale">Sale</option>
<option value="NewSale">New and Sale</option>
</select>
<div id="actualamt" style="display:none;">
Actual Amount:
<input type="number" name="actualamt" step="any" />
</div>
</form>
Help will be appreciated.

You should have different functions for each select onchange events.
I have renamed the function to checkvalueProductTag() and checkvalueCategory()
function checkvalueProductTag(val) {
if(val==="NewSale")
document.getElementById('actualamt').style.display='block';
else
document.getElementById('actualamt').style.display='none';
}
function checkvalueCategory(val){
if(val==="SchoolWearAccessories")
document.getElementById('schoolwear').style.display='block';
else
document.getElementById('schoolwear').style.display='none';
}
Check the updated fiddle
https://jsfiddle.net/6hheckao/1/

If you want both of them to be displayed on selection then simply use two different onchange functions like this
function checkvalue(val) {
if (val === "SchoolWearAccessories")
document.getElementById('schoolwear').style.display = 'block';
else
document.getElementById('schoolwear').style.display = 'none';
}
function checkvalue1(val) {
if (val === "NewSale")
document.getElementById('actualamt').style.display = 'block';
else
document.getElementById('actualamt').style.display = 'none';
}
<form>
Product Category:
<select name="category" required onchange='checkvalue(this.value)'>
<option value="">Select Product Category</option>
<option value="School Uniforms">School Uniforms</option>
<option value="SchoolWearAccessories">School Wear Accessories</option>
<option value="Hospital Uniforms">Hospital Uniforms</option>
<option value="Corporate Uniforms">Corporate Uniforms</option>
<option value="Industrial Uniforms">Industrial Uniforms</option>
</select>
<div id="schoolwear" style="display:none;">
Sub Category:
<select name="subcategory">
<option value="">Select Product Category</option>
<option value="Uniform Sweaters">Uniform Sweaters</option>
<option value="School Belts">School Belts</option>
<option value="School Ties">School Ties</option>
<option value="Uniform Socks and Shoes">Uniform Socks and Shoes</option>
<option value="School Caps">School Caps</option>
<option value="School Bags">School Bags</option>
</select>
</div>
Tag:
<select name="producttag" onchange='checkvalue1(this.value)'>
<option value="">None</option>
<option value="New">New</option>
<option value="Sale">Sale</option>
<option value="NewSale">New and Sale</option>
</select>
<div id="actualamt" style="display:none;">
Actual Amount:
<input type="number" name="actualamt" step="any" />
</div>
</form>

jQuery check what option is selected

If I have this code:
<td class="field-type">
<select id="id_virtual_as_set-0-type" name="virtual_as_set-0-type">
<option value="M">M</option>
<option value="AI" selected="selected">AS I</option>
<option value="D">D</option>
<option value="P">P</option>
<option value="A">A</option>
<option value="R"</option>
</select>
</td>
And I wish to find out which option value is selected, how can I do this via jQuery? Also the issue is that I have a handle on the <td> element and I want to be able to access the <select> from the <td> element and then check what the selected option is.

Yes.
Just try:
$("#id_virtual_as_set-0-type").val()

Here, i have created an example of how to do this.
$(document).ready(function(){
function getSelectedProperty(select){
var selectedOption = select.find("option:selected");
$("p").html("selected Value:"+selectedOption.val() + " SelectedText:" +selectedOption.html())
}
var select = $("select");
select.change(function(){
getSelectedProperty($(this));
});
getSelectedProperty(select);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="field-type">
<select id="id_virtual_as_set-0-type" name="virtual_as_set-0-type">
<option value="M">M</option>
<option value="AI" selected="selected">AS I</option>
<option value="D">D</option>
<option value="P">P</option>
<option value="A">A</option>
<option value="R"</option>
</select>
<p></p>
</td>

There's many way to do it.
And this is how I do
$('select').on('click', function() {
console.log($(this).find('option:selected').val());
});

how to change jquery drop down value

On the basis of selection of Issue type i want to show 2nd drop down. if someone is select Board i want to show 2nd drop down and if someone select Branding i want to show different option. pls help
<label for="Issue Type">Issue Type</label>
<select name="issue_type" id="issue_type">
<option value=""> Select </option>
<option value="Board">Board</option>
<option value="Branding/Clipon">Branding/Clipon</option>
</select>
<label for="Issue Type">Issue</label>
<select name="send_to" id="send_to">
<option value=""> Select </option>
<option value="Light Not Working">Light Not Working</option>
<option value="Broken Letter">Broken Letter</option>
<option value="Transit of Board from One address to Another">Transit of Board from One address to Another</option>
<option value="Broken Board">Broken Board</option>
</select>
<select name="send_to" id="send_to">
<option value=""> Select </option>
<option value="Pasting Problem">Pasting Problem</option>
<option value="Clip-on light not working">Clip-on light not working</option>
</select>

In your select
<select name="issue_type" id="issue_type" onchange="change('issue_type');">
In your js file
$(document).ready(function(){
function change(id) {
//check condition if as
if ($('#' + id).val() == 'Board') {
//hide select except your required select
//like
$("#send_to").show().siblings().hide();
} else if () { // your next condition
//so on
}
}
});

here's jquery
$(document).ready(function(){
function changeVisibleSelect(elem){
var vis = $(elem).val() == 'Board';
$('#send_to' + (vis ? '_board' : '')).removeClass('hidden');
$('#send_to' + (vis ? '' : '_board')).addClass('hidden');
}
$('#issue_type').change(function(){
changeVisibleSelect(this);
});
changeVisibleSelect($('#issue_type'));
});
and minor edit to your html
<label for="Issue Type">Issue Type</label>
<select name="issue_type" id="issue_type">
<option value=""> Select </option>
<option value="Board">Board</option>
<option value="Branding/Clipon">Branding/Clipon</option>
</select>
<label for="Issue Type">Issue</label>
<select name="send_to" id="send_to">
<option value=""> Select </option>
<option value="Light Not Working">Light Not Working</option>
<option value="Broken Letter">Broken Letter</option>
<option value="Transit of Board from One address to Another">Transit of Board from One address to Another</option>
<option value="Broken Board">Broken Board</option>
</select>
<select name="send_to" id="send_to_board">
<option value=""> Select </option>
<option value="Pasting Problem">Pasting Problem</option>
<option value="Clip-on light not working">Clip-on light not working</option>
</select>
i changed the id of second select
css:
.hidden{display:none}
here's working jsfiddle: http://jsfiddle.net/MXjmY/1/

How can I check if Dynamically created Select Boxes have been selected

I have some code that has one contact select box hard coded and then if you click on a add button it adds more contacts. Each contact can be selected from a dropdown and give a location in at location text box.
I want on submit to be able to know if they have selected someone and if not I want to clear out the Location box as there cannot be a location if there is no contact.
<!--- The myContactCount variable is set in another part of javascript this is the current count plus one of the number of current select boxes. --->
<script type="text/javascript" language="javascript">
var e='';
var contactSelectedValue='';
for(var i=1;1<myContactCount;i++){
e = document.getElementById('myContactID_'+i);
contactSelectedValue = e.options[e.selectedIndex].value;
/* I am trying to alert the value so I can then use a if statement to check for null or even change the 'Select a Contact' value to 0 and test for that. */
alert(contactSelectedValue);
}
</script>
<!--- the ID will be 1-100 depending on how many contacts they have added --->
<select name="myContactID_#ID#">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
So after they are created dynamically they code would look like this.
<select name="myContactID_1">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3" selected="selected">Cavlin</option>
</select>
<select name="myContactID_2">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2" selected="selected">Barbara</option>
<option value="3">Cavlin</option>
</select>
<select name="myContactID_3">
<option value="">Select a Contact</option>
<option value="1" selected="selected">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>

Your script has couple of issues:-
1<myContactCount instead of i<=myContactCount and you are using name in the select and
trying to fetch it by id.
Demo
Html
<select id="myContactID_1">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3" selected="selected">Cavlin</option>
</select>
<select id="myContactID_2">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2" selected="selected">Barbara</option>
<option value="3">Cavlin</option>
</select>
<select id="myContactID_3">
<option value="">Select a Contact</option>
<option value="1" selected="selected">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
JS
var e='';
var contactSelectedValue='';
for(var i=1;i<=3;i++){
e = document.getElementById('myContactID_'+i);
contactSelectedValue = e.options[e.selectedIndex].value;
/* I am trying to alert the value so I can then use a if statement to check for null or even change the 'Select a Contact' value to 0 and test for that. */
alert(contactSelectedValue);
}

Cascading Combo box HTML

I am not really a web person and am having trouble creating a cascading combo box. I have my options, but when I cannot figure out how to do a JavaScript command to switch the second box depending on the first box's selection.
These are my first set of options:
<select id="searchType" onchange="selectedOption(this)">
<option value="sessions">Sessions</option>
<option value="files">Files</option>
<option value="clients">Clients</option>
</select>
Depending on what they click there I would like to show these set of options:
SESSIONS
<select id="secondOptions">
<option value="conf">Config ID</option>
<option value="length">Length</option>
<option value="date">Date</option>
</select>
FILES
<select id="secondOptions">
<option value="id">File ID</option>
<option value="length">Length</option>
<option value="sent">Sent</option>
<option value="sessionId">Session ID</option>
</select>
CLIENTS
<select id="secondOptions">
<option value="name">Client Name</option>
<option value="organization">Organization</option>
<option value="specialty">Specialty</option>
<option value="sessionId">Session ID</option>
</select>
And finally a textbox to type into to really specify the search.
Once again, I am trying to do this using JavaScript, but if there is a better way to do this let me know please.

Given the amended html mark-up:
<form action="#" method="post">
<select id="searchType">
<option value="sessions">Sessions</option>
<option value="files">Files</option>
<option value="clients">Clients</option>
</select>
<select id="sessions">
<option value="conf">Config ID</option>
<option value="length">Length</option>
<option value="date">Date</option>
</select>
<select id="files">
<option value="id">File ID</option>
<option value="length">Length</option>
<option value="sent">Sent</option>
<option value="sessionId">Session ID</option>
</select>
<select id="clients">
<option value="name">Client Name</option>
<option value="organization">Organization</option>
<option value="specialty">Specialty</option>
<option value="sessionId">Session ID</option>
</select>
<fieldset id="textAreaSearchBox">
<legend>Search:</legend>
<textarea></textarea>
</fieldset>
</form>
(Note the changed ids, wrapping the form elements in a form, the addition of a fieldset, legend and textarea in the mark-up), the following JavaScript seems to work:
var select1 = document.getElementById('searchType');
var selects = document.getElementsByTagName('select');
select1.onchange = function() {
var select2 = this.value.toLowerCase();
for (i = 0; i < selects.length; i++) {
if (selects[i].id != this.id) {
selects[i].style.display = 'none';
}
}
document.getElementById(select2).style.display = 'block';
document.getElementById('textAreaSearchBox').style.display = 'block';
};
JS Fiddle demo.