I am new to html javascript and trying to learn it. I am having an issue that when I select a value of a dropdown it will select another dropdown value when certain criteria matches.
If they Select the option 4 (takeout) from service_type dropdown, the counter dropdown will automatically selected the option 2 driveway. else user are free to select any value on both dropdown. Only if they select Takeout, it will make driveway selected and also make the table service option inactive.
if they select 1,2 or 3 from the Service type dropdown then option 1 will be enabled.
I need a javascript and no jquery. Please help me
<div class="form-group col-md-12">
<select name="service_type" id="service_type" class="form-control form-control-line" required>
<option value="" selected="selected" >Select Service</option>
<option value="1">Dining</option>
<option value="2">Beverages</option>
<option value="3">Liquor</option>
<option value="4">Takeout</option>
</select>
</div>
<div class="form-group col-md-12">
<select name="counter" id="counter" class="form-control form-control-line" required>
<option value="" selected="selected" >Select Counter</option>
<option value="1">Table Service</option>
<option value="2">Driveway</option>
</select>
</div>
You can use javascript like this:
function Checker(el){
const select = document.getElementById('counter');
removeOptions(select);
if(el.value == '4'){
var option1 = document.createElement("option");
option1.text = "Driveway";
option1.value = "2";
select.add(option1);
}else{
var option2 = document.createElement("option");
option2.text = "Table Service";
option2.value = "1";
select.add(option2);
var option1 = document.createElement("option");
option1.text = "Driveway";
option1.value = "2";
select.add(option1);
}
}
function removeOptions(selectElement) {
var i, L = selectElement.options.length - 1;
for (i = L; i >= 0; i--) {
selectElement.remove(i);
}
}
<div class="form-group col-md-12">
<select name="service_type" id="service_type" class="form-control form-control-line" onChange="Checker(this)" required>
<option value="" selected="selected" >Select Service</option>
<option value="1">Dining</option>
<option value="2">Beverages</option>
<option value="3">Liquor</option>
<option value="4">Takeout</option>
</select>
</div>
<div class="form-group col-md-12">
<select name="counter" id="counter" class="form-control form-control-line" required>
<option value="" selected="selected" >Select Service Fist</option>
</select>
</div>
Create two function one for create option base to first choise and second for remove option everytime function is called.
const firstSelect = document.querySelector('#serviceType');
const secondSelect = document.querySelector('#counter');
firstSelect.addEventListener('change', (event) => {
if (event.target.value === '4') {
secondSelect.value = '2';
secondSelect.disabled = true;
} else if (typeof event.target.value === 'string' && event.target.value.length > 0) {
secondSelect.disabled = false;
secondSelect.value = '1';
} else {
secondSelect.disabled = false;
secondSelect.value = '';
}
});
<div class="form-group col-md-12">
<select name="service_type" id="serviceType" class="form-control form-control-line" required>
<option value="" selected="selected" >Select Service</option>
<option value="1">Dining</option>
<option value="2">Beverages</option>
<option value="3">Liquor</option>
<option value="4">Takeout</option>
</select>
</div>
<div class="form-group col-md-12">
<select name="counter" id="counter" class="form-control form-control-line" required>
<option value="" selected="selected" >Select Counter</option>
<option value="1">Table Service</option>
<option value="2">Driveway</option>
</select>
</div>
How does it work?
You need to select your Select controls from DOM and then listen to change event on first select, then you can get value from it and depending on your choice change value of Select #2. In order to disable ability to choose another option in second dropdown, you can disable it.
Related
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>
I am trying to show a table of reviews by taking the value of two dropdowns. When I was having one dropdown(positive, negative etc) that works fine but when I introduce another dropdown(food, drinks etc) it is not working.
It only works when I change the first dropdown and second dropdown but if I kept the first dropdown unchanged then it's not working
I tried by adding onchange method to the second dropdown. I just started with Javascript so not much idea about what to try.
function printResult(form) {
var output = {
{
output | safe
}
};
var sel = form.list;
var sel2 = form.list2;
var selectedVal = sel.options[sel.selectedIndex].value;
var selectedVal2 = sel2.options[sel.selectedIndex].value;
//document.getElementById("showResult").innerText = "Your number is: " + selectedVal;
//console.log(output);
document.getElementById("showResult").innerText = "Your number is: " + selectedVal2;
}
<form action="dropdown" onSubmit="return printResult(this);">
<label for="sentiment">Sentiment</label>
<div class="styled-select blue semi-square">
<select name="list">
<option value="all">All</option>
<option value="positive">Positive</option>
<option value="negative">Negative</option>
<option value="neutral">Neutral</option>
</select>
</div>
<div>
<select name="list2" onChange="printResult()">
<option value="menu">Menu Range</option>
<option value="food">Food</option>
<option value="drinks">Drinks</option>
<option value="desserts">Desserts</option>
</select>
</div>
<input type="submit" value="Filter">
<span id="showResult"></span>
</form>
You need to pass the form on the change too and return false to not submit the form:
function printResult(form) {
var sel = form.list;
var sel2 = form.list2;
var selectedVal = sel.value;
var selectedVal2 = sel2.value;
document.getElementById("showResult").innerText = "Your number is: " + selectedVal2;
return false;
}
<form action="dropdown" onSubmit="return printResult(this);">
<label for="sentiment">Sentiment</label>
<div class="styled-select blue semi-square">
<select name="list">
<option value="all">All</option>
<option value="positive">Positive</option>
<option value="negative">Negative</option>
<option value="neutral">Neutral</option>
</select>
</div>
<div>
<select name="list2" onChange="printResult(this.form)">
<option value="menu">Menu Range</option>
<option value="food">Food</option>
<option value="drinks">Drinks</option>
<option value="desserts">Desserts</option>
</select>
</div>
<input type="submit" value="Filter">
<span id="showResult"></span>
</form>
Perhaps you wanted this instead
window.addEventListener("load", function() {
document.getElementById("form1").addEventListener("submit", function(e) {
e.preventDefault(); // stop submission
var sel = this.list;
var sel2 = this.list2;
var selectedVal = sel.value;
var selectedVal2 = sel2.value;
document.getElementById("showResult").innerText = (selectedVal && selectedVal2) ? selectedVal + ":" + selectedVal2 : "Please select both";
});
});
<form action="dropdown" id="form1">
<label for="sentiment">Sentiment</label>
<div class="styled-select blue semi-square">
<select name="list">
<option value="">All</option>
<option value="positive">Positive</option>
<option value="negative">Negative</option>
<option value="neutral">Neutral</option>
</select>
</div>
<div>
<select name="list2">
<option value="">Menu Range</option>
<option value="food">Food</option>
<option value="drinks">Drinks</option>
<option value="desserts">Desserts</option>
</select>
</div>
<input type="submit" value="Filter">
<span id="showResult"></span>
</form>
I am trying to create a dropdown that will show a second when the first is selected.
<div id="prob_type_1" name="prob_type_1">
<label>Select Problem Type</label>
<select class="form-control required" type="select" title="" id="prob_type_1" name ="prob_type_1">
<?php if ($client_db_number < 15000) { ?>
<option value = "">-Please Select-</option>
<option value = "SS-20 Appliance">SS-20 Appliance</option>
<option value = "BBoxx Appliance">BBoxx Appliance</option>
</select>
</div>
<div id="SS-20 Appliance" class="warren" style="display: none;" onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="SS-20 Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
</select>
</div>
<div id="BBoxx Appliance" class="warren" style="display: none;" onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="BBoxx Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
<option value = "BBoxx Radio">BBoxx Radio</option>
<option value = "Bboxx USB Multi Charger">Bboxx USB Multi Charger</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#prob_type_1").change(function(){
correspondingID = $(this).find(":selected").val()
$(".warren").hide();
$("#" + correspondingID).show();
})
</script>
the second menu just isn't showing when either of these is selected...
fiddle: https://jsfiddle.net/wazzahenry/6af6jd83/
based on this :http://jsfiddle.net/dKMzk/
and from this question: Show a second dropdown based on previous dropdown selection
You have a style: none for your multiple select. To solve this, instead of using $("#" + correspondingID).show();, I will rather change the style of the element.
You are declaring your id with an espace character. It is as if you are declaring differents ids for the same element. To solve this, I removed the space character in the ids .
$("#prob_type_1").change(function(){
var correspondingID = $(this).find(":selected").val()
$(".warren").hide();
correspondingID = correspondingID.replace(" ", "")
$("#" + correspondingID).css("display", "inherit");
})
<div id="prob_type_1" name="prob_type_1">
<label>Select Problem Type</label>
<select class="form-control required" type="select" title="" id="prob_type_1" name ="prob_type_1">
<?php if ($client_db_number < 15000) { ?>
<option value = "">-Please Select-</option>
<option value = "SS-20 Appliance">SS-20 Appliance</option>
<option value = "BBoxx Appliance">BBoxx Appliance</option>
</select>
</div>
<div id="SS-20Appliance" class="warren" style="display: none;" onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="SS-20 Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
</select>
</div>
<div id="BBoxxAppliance" class="warren" style="display: none;" onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="BBoxx Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
<option value = "BBoxx Radio">BBoxx Radio</option>
<option value = "Bboxx USB Multi Charger">Bboxx USB Multi Charger</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
i am creating a webpage using html,php and javascript.
i have used script for select option. The problem i am encountering on executing the code is that the first input field doesn't disappear on selecting the option again. instead i get the second input box and first input box as well. i.e. i get both even if i use if else condition.
var fil = document.getElementById("filter");
fil.onchange = function filteron() {
var filtertag = document.getElementById("filter");
var tag = filtertag.options[filtertag.selectedIndex].value;
var searchbox = document.createElement("input");
var filter = document.getElementById("criteriain");
searchbox.setAttribute("id", "criteria");
if (tag === 'ed') {
searchbox.setAttribute("type", "date");
searchbox.setAttribute("name", "searchin");
} else if (tag === 'gw') {
searchbox.setAttribute("type", "number");
searchbox.setAttribute("name", "searchin");
}
filter.appendChild(searchbox);
};
<form action="" method="post">
<label for="filter" id="filterin">Filter by</label>
<select id="filter" size="1" name="filter" onchange="filteron()">
<option value='slno' >Sl No</option>
<option value='ed' >Entry Date</option>
<option value='lot' >Lot No</option>
<option value='par' >Party</option>
<option value='var' >Variety</option>
<option value='cst' >Current status</option>
<option value='gw' >Gray width</option>
</select>
<br/>
<label for='criteria' id='criteriain'>Search for</label>
It is because irrespective of your selection you are creating a new element every time and only changing the type in if/else block for new element.
var fil = document.getElementById("filter");
fil.onchange = function filteron() {
var filtertag = document.getElementById("filter");
var tag = filtertag.options[filtertag.selectedIndex].value;
var searchbox = document.getElementById("criteria");
var filter = document.getElementById("criteriain");
if(undefined === searchbox || null === searchbox) {
searchbox = document.createElement("input");
searchbox.setAttribute("id", "criteria");
}
if (tag === 'ed') {
searchbox.setAttribute("type", "date");
searchbox.setAttribute("name", "searchin");
} else if (tag === 'gw') {
searchbox.setAttribute("type", "number");
searchbox.setAttribute("name", "searchin");
}
filter.appendChild(searchbox);
};
<form action="" method="post">
<label for="filter" id="filterin">Filter by</label>
<select id="filter" size="1" name="filter" onchange="filteron()">
<option value='slno' >Sl No</option>
<option value='ed' >Entry Date</option>
<option value='lot' >Lot No</option>
<option value='par' >Party</option>
<option value='var' >Variety</option>
<option value='cst' >Current status</option>
<option value='gw' >Gray width</option>
</select>
<br/>
<label for='criteria' id='criteriain'>Search for</label>
I don't know much about javascript and unfortunately don't have time to learn before this project is due (wish I did!). I assume it is possible to pass the value of a drop-down selection into a hidden text input field on a form before the form is submitted. Could anyone help me figure out how to do that with javascript? Thank you! Here are my drop-down and text box details:
<div class="formEntryArea">
<div class="formEntryLabel">
<span class="formLabel"><label for=" langdropdown">Would you like to receive library notices in English or Spanish? ><span class="formRequired">*</span></label></span>
</div>
<div class="formMultiSelect" id=”langdropdown”>
<select name=" langdropdown ">
<option value="0" selected="selected">Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
<input type="text" id="ddepartment" name="ddepartment" value=””>
</select>
</div>
This is simply. First of all, you have to bind a change event handler for your select. Then, you have to set input text with value selected from dropdown.
var select=document.getElementsByTagName('select')[0];
var input=document.getElementById('ddepartment');
select.onchange=function(){
input.value=select.options[select.selectedIndex].text;
}
<div class="formEntryArea">
<div class="formEntryLabel">
<span class="formLabel"><label for=" langdropdown">Would you like to receive library notices in English or Spanish? ><span class="formRequired">*</span></label></span>
</div>
<div class="formMultiSelect" id=”langdropdown”>
<select name=" langdropdown ">
<option value="0" selected="selected">Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
</select>
<input type="text" id="ddepartment" name="ddepartment">
</div>
You can use this code:
var myselect = document.getElementById("MySelect");
myselect.onchange = function(){
alert(myselect.options[myselect.selectedIndex].value);
document.getElementById("ddepartment").value = myselect.options[myselect.selectedIndex].value;
};
Result: https://jsfiddle.net/fh5myefw/
Mind to close the tags, it's better practice.
var select = document.getElementById('selectElem');
var outputElem = document.getElementById('ddepartment');
select.addEventListener('change',function(){
var newValue = !this.selectedIndex ? "":this.options[this.selectedIndex].text;
outputElem.value = newValue;
});
<select name="langdropdown" id="selectElem" required>
<option value="" selected="selected">Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
</select>
<input type="text" id="ddepartment" name="ddepartment" value="">
this is javascript function
function func(selectObject)
{
document.getElementById('ddepartment').value = selectObject.value;
}
add onchange event to select element like this
<select name="langdropdown" onchange="func(this)">
Here use this:
var sel = document.getElementById('lang');
sel.onchange = function() {
var val = this.options[this.selectedIndex].value;
var che = document.getElementById('cache').value;
che = val;
console.log(che);
}
SNIPPET
var sel = document.getElementById('lang');
sel.onchange = function() {
var val = this.options[this.selectedIndex].value;
var che = document.getElementById('cache').value;
che = val;
console.log(che);
}
<select id='lang' name="lang">
<option value="" selected>Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
<option value="jpn">Japanese</option>
<option value="zho">Chinese</option>
<option value="fin">Finnish</option>
<option value="nav">Navajo</option>
</select>
<input type="hidden" id="cache" name="cache" value=””>