We Keep Coding

Select options based on another option selected

Im trying to select an option when i choose a specific option from list above. Any help how can achieve that?
Print of frontend
The main idea is, when i choose Field_Support, select option "94" from StardardTemplateID
My actual try:
$(document).ready(function () {
setTimeout(function () {
const Action = Core.Config.Get("Action");
const SupportedActions = ["AgentTicketNote"];
if ($.inArray(Action, SupportedActions) !== -1) {
if (Action === "AgentTicketNote") {
$('#DynamicField_QueueNote').on('change', function () {
const Option = $(this).val();
if (Option === '- Move -')
$('#Subject').val('');
else if (Option === 'Field_Support')
$('#Subject').val('Nota para Field');
else if (Option === 'Field_Support')
$("#StandardTemplateID").html("<option value='94'>dados_para_field</option>");
else if (Option === 'Helpdesk')
$('#Subject').val('Nota para Helpdesk');
else if (Option === 'Sistemas_Windows')
$('#Subject').val('Nota para Sistemas');
else if (Option === 'Networking')
$('#Subject').val('Nota para Networking');
});
}
}
})
});

Here's one way. Bake the value associations into the select option elements as data-attributes. Then just reference it on the change event.
$(document).ready(function() {
$('select#DynamicField_QueueNote').change(function() {
$('select#StandardTemplateID').val($(this).find('option:selected').data('link'))
$('#StandardTemplateID_Search').val($('select#StandardTemplateID').find('option:selected').text());
$('#Subject').val($(this).find('option:selected').data('subject'))
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="DynamicFieldText Modernize" id="DynamicField_QueueNote" name="DynamicField_QueueNote" size="1">
<option value="">-</option>
<option value="- Move -" selected="selected">- Move -</option>
<option value="Field_Support" data-link='94' data-subject='Nota para Field'>Field_Support</option>
<option value="Helpdesk" data-link='' data-subject='Nota para Helpdesk'>Helpdesk</option>
<option value="Sistemas_Windows" data-link='' data-subject='Nota para Sistemas'>Sistemas_Windows</option>
</select>
<hr>
<label>Subject</label>
<input type="text" id="Subject" name="Subject" value="" class="W75pc Validate Validate_Required" aria-required="true">
<hr>
<label for="StandardTemplateID">Text Template:</label>
<div class="Field">
<div class="InputField_Container" tabindex="-1">
<div class="InputField_InputContainer"><input id="StandardTemplateID_Search" class="InputField_Search ExpandToBottom" type="text" role="search" autocomplete="off" aria-label="Text Template:" style="width: 273.333px;" aria-expanded="true"></div>
</div>
<select class="Modernize" id="StandardTemplateID" name="StandardTemplateID" style="display: none;">
<option value="">-</option>
<option value="71">1ª_Tentativa_Contacto</option>
<option value="72">2ª_Tentativa_Contacto</option>
<option value="73">3ª_Tentativa_Contacto</option>
<option value="80">Acesso_VPN_atribuido</option>
<option value="94">dados_para_field</option>
</select>
<p class="FieldExplanation">Setting a template will overwrite any text or attachment.</p>
</div>
<!--
<select id='select1'>
<option> Choose...</option>
<option value='option1' data-link='100'> Option 1 (link to 100)</option>
<option value='option2' data-link='133'> Option 2 (link to 133)</option>
<option value='option3' data-link='94'> Option 3 (link to 94)</option>
<option value='option4' data-link='120'> Option 4 (link to 120)</option>
</select>
<select id='select2'>
<option></option>
<option value='94'>Template 94</option>
<option value='100'>Template 100</option>
<option value='120'>Template 120</option>
<option value='133'>Template 133</option>
</select> -->

You can create a conditional that checks the value of the select on change and then sets the value of the input if the value of the select equals the target value.
Using jQuery:
$(document).ready(function() {
$('#StandardTemplate').change(function() {
if ($(this).val() === '94') {
$('#text_template').val($('option[value="94"]').text())
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<select class="Modernize" id="StandardTemplate" name="StandardTemplate">
<option value>-</option>
<option value="71">1_Tentative_Contacto</option>
<option value="72">2_Tentative_Contacto</option>
<option value="73">3_Tentative_Contacto</option>
<option value="80">Accesso_VPN_atibuido</option>
<option value="94">dadios_para_field</option>
</select>
<label for="text_template">Text Template: <input name="text_template" id="text_template"></label>
</div>
Using Vanilla JS:
const sel = document.getElementById('StandardTemplate')
const input = document.getElementById('text_template')
sel.addEventListener('change', e => {
if(e.target.value === '94'){
document.getElementById('text_template').value = document.querySelector('option[value="94"]').textContent
}
})
<div id="parent">
<select class="Modernize" id="StandardTemplate" name="StandardTemplate">
<option value>-</option>
<option value="71">1_Tentative_Contacto</option>
<option value="72">2_Tentative_Contacto</option>
<option value="73">3_Tentative_Contacto</option>
<option value="80">Accesso_VPN_atibuido</option>
<option value="94">dadios_para_field</option>
</select>
<label for="text_template">Text Template: <input name="text_template" id="text_template"></label>
</div>

show div on form option selected by user using id or class

First question here so please go easy on me ! Trying to get this form select working but after hours still struggling. Code works fine when just one option has an id, but will not work with multiple id's. Have a feeling the right approach would be to assign each select option with a class but still can't figure it out.
Any assistance would be gratefully appreciated !
<form>
<p align="center">Size :
<input type="hidden" value="1" name="qty1" />
<select name="productpr1" id="getFname" onchange="showdiv(this);">
<option selected value="ERROR - Please select finish">please select</option>
<option id="show" value="product 1:5:0:105805">product 1</option>
<option id="" value="product 2:10:0:105205">product 2</option>
<option id="show" value="product 3:15:0:105605">product 3</option>
</select>
</p>
<div id="admDivCheck" style="display:none;text-align:center;">Choose delivery date</div>
<p><input type="submit" class="button" value="ADD TO BASKET" /></p>
</form>
<script>
function showdiv(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("show").value;
if(admOptionValue == nameSelect.value){
document.getElementById("admDivCheck").style.display = "block";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
</script>
Edit
Thanks for the assistance on here - the final version which works as I need :
<input type="hidden" value="1" name="qty1" />
<select name="productpr1" id="getFname" onchange="showdiv();">
<option selected value="ERROR - Please select finish">please select</option>
<option class="show" value="product 1:5:0:105805">product 1</option>
<option class="" value="product 2:10:0:105205">product 2</option>
<option class="show" value="product 3:15:0:105605">product 3</option>
</select>
<div id="admDivCheck" style="display:none">Choose delivery date</div>
<p><input type="submit" class="button" value="ADD TO BASKET" /></p>
<script>
function showdiv() {
var getFname= document.getElementById("getFname");
var askForDelivery = getFname.options[getFname.selectedIndex].classList;
if(askForDelivery.contains('show')){
document.getElementById('admDivCheck').style.display = 'block';
}
else{document.getElementById('admDivCheck').style.display = 'none';
}}
</script>

the id property is for the object document model and should be unique, just use 1,2,3 for it

In your script admOptionValue == nameSelect.value This value checking will always same, because selected option only the value of select tag.....
function showdiv(nameSelect)
{
console.log('choosed option',nameSelect.value);
if(nameSelect.value !="") document.getElementById("admDivCheck").style.display = "block";
else document.getElementById("admDivCheck").style.display = "none";
}
<form>
<p align="center">Size :
<input type="hidden" value="1" name="qty1" />
<select name="productpr1" id="getFname" onchange="showdiv(this);">
<option selected value="">please select</option>
<option value="product 1:5:0:105805">product 1</option>
<option value="product 2:10:0:105205">product 2</option>
<option value="product 3:15:0:105605">product 3</option>
</select>
</p>
<div id="admDivCheck" style="display:none;text-align:center;">Choose delivery date</div>
<p><input type="submit" class="button" value="ADD TO BASKET" /></p>
</form>

The reason that it is not working when having multiple id's is this line here:
admOptionValue = document.getElementById("show").value;
That is always going to return the first element with id show.
You should be able to get the selected value like this:
function showdiv() {
var getFname= document.getElementById("getFname");
var selectedValue = getFname.options[getFname.selectedIndex].value;
alert(selectedValue);
}
<select name="productpr1" id="getFname" onchange="showdiv();">
<option selected value="ERROR - Please select finish">please select</option>
<option value="product 1:5:0:105805">product 1</option>
<option value="product 2:10:0:105205">product 2</option>
<option value="product 3:15:0:105605">product 3</option>
</select>
So All I did was get the selectedIndex of the select box, rather than getting the individual option by id. All the options should have a unique id, and trying to get all of them would be a huge waste of time
EDIT
As mentioned earlier, you wanted to add a class to a specific item to determine if it should show or hide another div.
All you would do is check for classList instead of value to determine if it is true.
All you would have to do is get the classList of the selected item. If it contains the desired class, show your hidden div.
function showdiv() {
var getFname= document.getElementById("getFname");
var askForDelivery = getFname.options[getFname.selectedIndex].classList;
if(askForDelivery.contains('show')){
document.getElementById('admDivCheck').style.display = 'block';
}
}
I made a fiddle to demonstrate:
https://jsfiddle.net/k68nuams/

How to show a textbox or select/option in the page once user selects an option from the list without clicking the submit button?

I want to show another dropdown list beneath the current one once the user chooses Rank or Department. After choosing from the new list, they user can submit the form.
Similarly, if the user chooses any other option (except LastName), a textbox will appear that needs to be filled in before they can click the submit button.
<form action="viewEmployeeHTML.php" method="post">
<div class="outer-div">
<div class="inner-div">
<br><br><br>
<h2>Search By:</h2>
<select name="selectionToView" class="SelectBox">
<option value="Select">-- Select --</option>
<option value="ID">ID</option>
<option value="FirstName">First Name</option>
<option value="MiddleName">Middle Name</option>
<option value="LastName">Last Name</option>
<option value="Email">Email</option>
<option value="Phone">Phone</option>
<option value="IP_Phone">IP Phone</option>
<option value="OfficeNumber">Office Number</option>
<option value="CoordinatorName">Coordinator Name</option>
<option value="Rank">Rank</option>
<option value="Department">Department</option>
<option value="JoiningDate"> Joining Date</option>
<option value="Committee_AND_Unit">Committee/Unit</option>
</select><br><br><br>
</div>
</div>
<br><br><br>
<center><input type="submit" value="VIEW" name="view"></center>
</form>
I tried this code but it didn't work for me:
<form action="viewEmployeeHTML.php" method="post">
<div class="outer-div" >
<div class="inner-div">
<br><br><br>
<h2>Search By:</h2>
<select name="selectionToView" class="SelectBox" onchange="OnSelectionChange()">
<option value="Select">-- Select --</option>
<option value="ID">ID</option>
<option value="FirstName">First Name</option>
<option value="MiddleName">Middle Name</option>
<option value="LastName">Last Name</option>
<option value="Email">Email</option>
<option value="Phone">Phone</option>
<option value="IP_Phone">IP Phone</option>
<option value="OfficeNumber">Office Number</option>
<option value="CoordinatorName">Coordinator Name</option>
<option value="Rank">Rank</option>
<option value="Department">Department</option>
<option value="JoiningDate"> Joining Date</option>
<option value="Committee_AND_Unit">Committee/Unit</option>
</select>
<br><br><br>
</div>
</div>
<br><br><br>
<center><input type="submit" value="VIEW" name="view"></center>
</form>
<script>
function OnSelectionChange(){
</script>
<?php
$selectionToView=$_POST['selectionToView']
if(isset(selectionToView) == "ID"){
?>
<script>document.write("<center><input type="submit" value="VIEW" name="view"></center>");</script>
<?php
}
?>
<script>
}
</script>

I've sligthly changed the HTML and wrote JavaScript for it with a little help of CSS.
function OnSelectionChange(value) {
document.getElementById("submit-button").disabled = true;
if ( value == "Rank" ) {
document.getElementById("rank-select").style.display = "block";
document.getElementById("department-select").style.display = "none";
document.getElementById("text").style.display = "none";
} else if ( value == "Department" ) {
document.getElementById("rank-select").style.display = "none";
document.getElementById("department-select").style.display = "block";
document.getElementById("text").style.display = "none";
} else if ( value == "Select" ) {
document.getElementById("rank-select").style.display = "none";
document.getElementById("department-select").style.display = "none";
document.getElementById("text").style.display = "none";
} else {
document.getElementById("rank-select").style.display = "none";
document.getElementById("department-select").style.display = "none";
document.getElementById("text").style.display = "block";
}
}
function onSecondSelectChange(value) {
if ( value != "Select" ) {
document.getElementById("submit-button").disabled = false;
} else {
document.getElementById("submit-button").disabled = true;
}
}
function onTextChange(value) {
if ( value != "" ) {
document.getElementById("submit-button").disabled = false;
} else {
document.getElementById("submit-button").disabled = true;
}
}
#rank-select,
#department-select,
#text {
display: none;
}
<form>
<div class="outer-div" >
<div class="inner-div">
<h2>Search By:</h2>
<select name="selectionToView" class="SelectBox" onchange="OnSelectionChange(this.options[this.selectedIndex].value)">
<option value="Select">-- Select --</option>
<option value="ID">ID</option>
<option value="FirstName">First Name</option>
<option value="MiddleName">Middle Name</option>
<option value="LastName">Last Name</option>
<option value="Email">Email</option>
<option value="Phone">Phone</option>
<option value="IP_Phone">IP Phone</option>
<option value="OfficeNumber">Office Number</option>
<option value="CoordinatorName">Coordinator Name</option>
<option value="Rank">Rank</option>
<option value="Department">Department</option>
<option value="JoiningDate"> Joining Date</option>
<option value="Committee_AND_Unit">Committee/Unit</option>
</select>
<select name="rank-select" id="rank-select" onchange="onSecondSelectChange(this.options[this.selectedIndex].value)">
<option value="Select">-- Select --</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="department-select" id="department-select" onchange="onSecondSelectChange(this.options[this.selectedIndex].value)">
<option value="Select">-- Select --</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="text" name="text" id="text" onchange="onTextChange(this.value)">
</div>
</div>
<input type="submit" value="VIEW" name="view" id="submit-button" disabled="disabled">
</form>

If i understood you correctly, you want another select list or textarea to appear under the current select list when the user selects certain option. Select list when he picks Rand or Department, and textarea in all other cases.
What i would do is make those extra elements you need(another select list and textarea) and put them on display:none. Then with onchange event handler use a function that would check which option is selected and display/hide whatever you need. You would need an extra select list for each option in the first select list, but in case you are populationg option from a database, then you could use ajax to dinamicaly populate single select list depending on what the user picked.
Hope this helps.
onchange would be like:
onchange='displayList(this)'
function would look something like this:
function displayList(selectObject){
var option = selectObject.value;
if(option == 'Department' || option == 'Rank'){
document.getElementById('select').style.display='inline';
document.getElementById('text').style.display='none';
}
else{
document.getElementById('select').style.display='none';
document.getElementById('text').style.display='inline';
}
if(option == 'Select'){
document.getElementById('select').style.display='none';
document.getElementById('text').style.display='none';
}
}

javascript code that is used to show a div modified to work with multiple unique divs

I've got a <select> form field, and onchange it runs a javascript function. If the function matches something specific, it shows new form field options located inside of a <div style="display: none;">
I've got a unique situation where I need to use this same code across multiple select boxes; however, each one has a specific name. They are not all the same and need to work independantly. Each one has a unique ID #.
I only want the second select field to show up if "ship with" is selected in the first field.
First, here is the code for the select field
<select name="first_select_option" onchange="ShowDiv(this);">
<option value="">Select Option</option>
<option value="SHIP WITH" id="SHIPWITH_<?php echo $data_order_id; ?>_Show">SHIP WITH</option>';
</select>
Here is the code for the hidden select field. There are multiple of these called dynamically on the page during a php while loop. That is why I am using the <?php echo $data_order_id; ?> inside the id of each one.
<div id="SHIPWITH_<?php echo $data_order_id;?>" style="display: none;">
<select name="secondhiddenselect">
<option value="">SELECT OPTIONS BELOW</option>
</select>
</div>
As you notice I am using a php variable inside the id. That is a unique id assigned to that specific select field inside a while loop. So the more while loops, the more select fields are pupulated, therefore, there end up being a bunch of select fields each with a unique ID all because of the $data_order_id
I need to modify the following script to not only work with a single SHIPWITH, but work with each individual SHIP WITH_{id}
<script type="text/javascript">
function ShowDiv(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
OptionValue = document.getElementById("NEWCC_Show").value;
if(OptionValue == nameSelect.value){
document.getElementById("NEWCC").style.display = "block";
}
else{
document.getElementById("NEWCC").style.display = "none";
}
}
else{
document.getElementById("NEWCC").style.display = "none";
}
}
</script>
I attempted to modify this and make it work by using .split('_') to break the variable up but its not working. I am not as good with JavaScript as I'd like to be. Here is my attempt...
<script type="text/javascript">
function ShowDiv(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
var name = nameSelect;
var splitName = name.split('_');
alert(splitName[1]);
OptionValue = document.getElementById(splitName[0] + splitName[1] + splitName[2]).value;
if(OptionValue == nameSelect.value){
document.getElementById(splitName[0] + splitName[1]).style.display = "block";
}
else{
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}
else{
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}
</script>
So even though there are multiple select fields, the JavaScript ONLY communicates with the specific one that corresponds with the $data_order_id.
Here is an updated snippet to help diagnose problem
function ShowDiv(nameSelect) {
console.log(nameSelect);
if (nameSelect) {
var name = nameSelect;
var splitName = name.split('_');
alert(splitName[1]);
OptionValue = document.getElementById(splitName[0] + splitName[1] + splitName[2]).value;
if (OptionValue == nameSelect.value) {
document.getElementById(splitName[0] + splitName[1]).style.display = "block";
} else {
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
} else {
document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}
<select name="number_of_skids" onchange="ShowDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_11_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_11" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>
<select name="number_of_skids" onchange="ShowDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_21_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_21" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>
<select name="number_of_skids" onchange="ShowDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_33_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_33" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>

As mentioned in the comments, it looks like you want to get the id of the selected option, not the select. One way of getting that is to use the selectedIndex property of the select in combination with its options collection (you could also use selectedOptions[0], among other techniques).
I've taken the liberty of "correcting" some naming conventions; generally, initial uppercase letters denote an object's constructor, not a plain function or variable. Also, using var (or let or const, depending on the need) before a variable assignment keeps it from becoming a global variable by default. There were a few other minor corrections made I'll leave to you to discover.
function showDiv(nameSelect) {
console.log(nameSelect);
if (nameSelect) {
var selectedOption = nameSelect.options[nameSelect.selectedIndex];
var name = selectedOption.id;
var splitName = name.split('_');
console.log(splitName[1]);
var idOfSection = splitName[0] + '_' + splitName[1];
var optionValue = selectedOption.value;
if (optionValue == nameSelect.value) {
document.getElementById(idOfSection).style.display = "block";
} else {
document.getElementById(idOfSection).style.display = "none";
}
} else {
// Commenting this out, since splitName will be undefined in this branch...
//document.getElementById(splitName[0] + splitName[1]).style.display = "none";
}
}
<select name="number_of_skids" onchange="showDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_11_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_11" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>
<select name="number_of_skids" onchange="showDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_21_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_21" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>
<select name="number_of_skids" onchange="showDiv(this);">
<option value="SHIP WITH" id="SHIPWITH_33_Show">SHIP WITH</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div id="SHIPWITH_33" style="display: none;">
<select name="ship_with_product">
<option value="">SELECT PRODUCT</option>
<option value="4">1234</option>
</select>
</div>

javascript - how would you write the if(...) statement for selection options in a form?

How do you write the if statement for a select option using javascript?
I wrote a form and made a select option list. I want to write an if statement that will do something if an option is selected.
JS
function name(obj) {
if (option.value == "cat") {
document.getElementById("owner").jim.disabled = true;
}
}
HTML
<p>
selection:*
<select id="Sone" name="Selection" size="1">
<option>Select</option>
<option value="cat" onclick="name(this);">cat</option>
<option value="dog" onclick="name(this);">dog</option>
<option value="bird" onclick="name(this);">bird</option>
<option value="Other" onclick="name(this);">Other</option>
</select>
</p>

<select id= "Sone" name="Selection" onchange="check()">
<option value="cat">cat</option>
<option value="dog">dog</option>
</select>
<input type="text" id="res" size="25"/>
And the function is :-
function check() {
var val = document.getElementById('Sone').value;
if(val=='cat') {
document.getElementById('res').value = "Thanks for selecting cat";
} else {
document.getElementById('res').value = "please select CAT";
}
}

You have to work as below
<form name="AddEditUser">
.
.
<select name="listCompany" style="width:200px" id="listCompany" onchange="fnCompany()">
<option value="None">None</option>
<option value="ABC">ABC</option>
<option value="XYZ">XYZ</option>
</select>
</form>
You have to call the javascript function a
function fnCompany(){
if(document.frmAddEditUser.listCompany.value=='None'){
//do something
}
}