I have a div that I need to hide when an option is selected in an option, below is my current html:
Type:<select name="Type" id="Type">
<option value="choice">Multiple choice</option>
<option value="image">Image/Video</option>
<option value="click">Click Image</option>
</select><br>
<div id="answers">
Correct Answer:<input type="text" name="answer"><br>
Wrong Answer 1:<input type="text" name="wrong1"><br>
Wrong Answer 2:<input type="text" name="wrong2"><br>
Wrong Answer 3:<input type="text" name="wrong3"><br>
</div>
So what I need is when the option with the value "click" is selected the div with the id "answers" is hidden, if either the other options are selected this div should be shown.
I am sure this can be dome with javas
Listen for the change event on select, take the value .val() and check if it's "click". If so, show() the #answers, otherwise hide() them.
var $answers = $("#answers");
$("#Type").on("change", function() {
if ($(this).val() === "click") {
$answers.show();
} else {
$answers.hide();
}
});
#answers {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type:
<select name="Type" id="Type">
<option value="choice">Multiple choice</option>
<option value="image">Image/Video</option>
<option value="click">Click Image</option>
</select>
<br>
<div id="answers">
Correct Answer:
<input type="text" name="answer">
<br>Wrong Answer 1:
<input type="text" name="wrong1">
<br>Wrong Answer 2:
<input type="text" name="wrong2">
<br>Wrong Answer 3:
<input type="text" name="wrong3">
<br>
</div>
The no-jQuery version would be:
var answersElm = document.querySelector("#answers");
document.querySelector("#Type").addEventListener("change", function() {
if (this.value === "click") {
answersElm.style.display = "block";
} else {
answersElm.style.display = "none";
}
});
Try this
$(function(){
$("#Type").change(function(){
if($("#Type").val() == "click"){
$("#answers").css("display", "none");
}
else{
$("#answers").css("display", "block");
}
});
});
Related
I'm trying to reset the value of closest select option.
$(document).ready(function () {
$('.limitation_points').hide();
$('.field .limitSelected').each(function () {
$(this).change(function () {
var selected = $(this).val();
if (selected == '1') {
$(this).closest('.field').find('.limitation_points').fadeIn(200);
} else {
$(this).closest('.field').find('.limitation_points').fadeOut(200);
$(this).closest('.field').find('input[name="pillers[]"]').val("");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
<input id="limitation1" type="radio" class="limitSelected" name="limitation" value="1" />Yes
<input id="limitation2" type="radio" class="limitSelected" name="limitation" value="0" />No
<select id="pijlers" class="pillers" name="pillers[]">
<option class="placeholder" selected disabled>Make Choice</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
Till fadeIn fadeOut my code is working how it should. But This code does't reset the value of select options when value has "0".
Can anyone help me with this, what i am doing wrong here?
Thanks in advance.
Using "-1" as default value and also using select instead of input as your selector, should do the trick.
$(document).ready(function () {
$('.limitation_points').hide();
$('.field .limitSelected').each(function () {
$(this).change(function () {
var selected = $(this).val();
if (selected == '1') {
$(this).closest('.field').find('.limitation_points').fadeIn(200);
} else {
$(this).closest('.field').find('.limitation_points').fadeOut(200);
$(this).closest('.field').find('select[name="pillers[]"]').val("-1");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
<input id="limitation1" type="radio" class="limitSelected" name="limitation" value="1" />Yes
<input id="limitation2" type="radio" class="limitSelected" name="limitation" value="0" />No
<select id="pijlers" class="pillers" name="pillers[]">
<option class="placeholder" value="-1" selected disabled>Make Choice</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
Add value attribute to the default <option> and remove disabled.
When you use the empty string reset there is no matching option for it
<option value="" class="placeholder" >Make Choice</option>
I need the 'date' input to be disabled until the 'Deadline' option is selected. I have tried the following but it is not working. Any Suggestions?
CODE
<Select>
<option onselect="document.getElementById('deadline').disabled = false;">Deadline date</option>
<option>Monthly</option>
</Select>
<input id="deadline" type="date" disabled>
This should to it:
function validate() {
var dropdown = document.getElementById('dropdown');
var selectedOption = dropdown.options[dropdown.selectedIndex].value;
var input = document.getElementById('date');
if (selectedOption == "enabled") {
input.removeAttribute('disabled');
} else {
input.setAttribute('disabled', 'disabled');
}
}
<select id="dropdown" onchange="validate()">
<option value="disabled">Pick something</option>
<option value="enabled">Deadline date</option>
<option value="disabled">Monthly</option>
</select>
<input type="date" id="date" disabled="disabled">
You'll need to attach an event handler to the change event on your select, then check its value with this.value.
Finally, set the disabled attribute of your input to true or false accordingly.
document.getElementsByTagName('select')[0].onchange = function() {
document.getElementById('deadline').disabled = this.value != 'Deadline date';
}
<select>
<option>Deadline date</option>
<option>Monthly</option>
</select>
<input id="deadline" type="date" disabled>
At dropdown change event you can add or remove attribute like this with your match condition.
$("select").change(function() {
if ($(this).val() == 'Deadline date')
$('#inpTest').removeAttr('disabled');
else
$('#inpTest').attr("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Select>
<option>---select---</option>
<option>Deadline date</option>
<option>Monthly</option>
</Select>
<input type="date" disabled="disabled" id='inpTest'>
your issue is event on <option> is not trigger. please check below code.
<select id="selectedOption" onchange="myFunction()">
<option>select</option>
<option>Deadline date</option>
<option>Monthly</option>
</select>
<input id="deadline" type="date" disabled>
<script>
function myFunction() {
if (document.getElementById("selectedOption").value == "Deadline date") {
document.getElementById("deadline").disabled = false;
} else {
document.getElementById("deadline").disabled = true;
}
}
</script>
hope it help you.
Can you show me what I did do wrong here?
I would like to disable the input field when the Selection uses the second option (Treibstoffverbrauch in Liter).
$(document).ready(function() {
$('select[name="Kalkulationsart"]').on('change', function() {
var eins = $(this).val();
if (eins == "Kalkulation per Treibstoffverbrauch in Liter") {
$('#VerbrauchinL').attr('disabled', 'disabled');
} else {
$('#VerbrauchinL').removeAttr('disabled');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="KATitle">Kalkulationsart</p>
<select name="Kalkulationsart" id="Kalkulationsart" size="1" type="text">
<option value="0">Kalkulation per Verbrauch/100km</option>
<option value="others">Kalkulation per Treibstoffverbrauch in Liter</option>
</select>
<p id="KMTitle" for="VerbrauchinL">Kraftstoffverbrauch in Liter/100km</p>
<input type="number" name="Verbrauch in L" id="VerbrauchinL" onkeyup="TKPJ()">
When you are using $(this).val() it returns the value attribute of the option element. So, you'd need to compare it with 0 or others.
See the snippet below:
$(document).ready(function() {
$('select[name="Kalkulationsart"]').on('change', function() {
var eins = $(this).val();
console.log(eins);
if (eins == "others") {
$('#VerbrauchinL').attr('disabled', 'disabled');
} else {
$('#VerbrauchinL').removeAttr('disabled');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="KATitle">Kalkulationsart</p>
<select name="Kalkulationsart" id="Kalkulationsart" size="1" type="text">
<option value="0">Kalkulation per Verbrauch/100km</option>
<option value="others">Kalkulation per Treibstoffverbrauch in Liter</option>
</select>
<p id="KMTitle" for="VerbrauchinL">Kraftstoffverbrauch in Liter/100km</p>
<input type="number" name="Verbrauch in L" id="VerbrauchinL" onkeyup="TKPJ()">
Your select value is different (others) than what you comparing against.
$(document).ready(function() {
$('#Kalkulationsart').on('change', function() {
$('#VerbrauchinL').prop('disabled', $(this).val() == "others");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="KATitle">Kalkulationsart</p>
<select name="Kalkulationsart" id="Kalkulationsart" size="1" type="text">
<option value="0">Kalkulation per Verbrauch/100km</option>
<option value="others">Kalkulation per Treibstoffverbrauch in Liter</option>
</select>
<p id="KMTitle" for="VerbrauchinL">Kraftstoffverbrauch in Liter/100km</p>
<input type="number" name="Verbrauch in L" id="VerbrauchinL" onkeyup="TKPJ()">
Your code seems fine, you need to check for the value in the checkbox (others) not the label used(Kalkulation per Treibstoffverbrauch in Liter).
I changed the way the attribute disabled is applied, we can toggle between true and false, to apply/unapply the attribute.
$(document).ready(function() {
$('select[name="Kalkulationsart"]').on('change', function() {
var eins = $(this).val();
if (eins === "others") {
$('#VerbrauchinL').attr('disabled', true);
} else {
$('#VerbrauchinL').attr('disabled', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="KATitle">Kalkulationsart</p>
<select name="Kalkulationsart" id="Kalkulationsart" size="1" type="text">
<option value="0">Kalkulation per Verbrauch/100km</option>
<option value="others">Kalkulation per Treibstoffverbrauch in Liter</option>
</select>
<p id="KMTitle" for="VerbrauchinL">Kraftstoffverbrauch in Liter/100km</p>
<input type="number" name="Verbrauch in L" id="VerbrauchinL" onkeyup="TKPJ()">
change "Kalkulation per Treibstoffverbrauch in Liter" to "others"
if you provide a value in the option val() gives the value
So selecting Other from the dropdown menu gives you a textbox. And unchecking the box will hide the the textbox and the dropdown menu.
I am unable to directly edit the html to add a div to wrap both the dropdown menu and the textbox together.
The problem I am having is even if Other is not selected, if you uncheck the box, then check it back the Other textbox will display. I only want the Other textbox to display if the Other dropdown item is selected.
Any help would be greatly appreciated :)
// hide otherBox
$('#otherBox').hide();
// show OtherBox if other selected
$('#location_dropdown').change(function() {
$('#otherBox').toggle(this.value == 'Other');
});
$('#honor').change(function () {
if (!this.checked) {
$('#location_dropdown').hide();
$('.form label').hide();
} else {
$('#location_dropdown').show();
$('.form label').show();
$('#otherBox').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input name="honor" id="honor" checked="checked" type="checkbox"><label for="tribute_show_honor_fieldsname">Check for yes</label>
<div class="form">
<label for="location_dropdown"> Location: </label>
</div>
<select name="location_dropdown" selected="selected" id="location_dropdown" size="1">
<option value="Chicago Center">Chicago Center</option>
<option value="Columbia">Columbia</option>
<option value="Lower Manhattan">Lower Manhattan Hospital</option>
<option value="Other">Other</option>
</select>
<br />
<input name="otherBox" id="otherBox" value="" maxlength="255" type="text">
Remove $('#otherBox').show();, and add the two lines of code commented below:
$('#honor').change(function() {
if (!this.checked) {
$('#location_dropdown').hide();
$('.form label').hide();
$('#otherBox').hide(); //ADD THIS
} else {
$('#location_dropdown').show();
$('.form label').show();
$('#otherBox').toggle($('#location_dropdown').val() === 'Other'); //ADD THIS
}
});
Snippet:
// hide otherBox
$('#otherBox').hide();
// show OtherBox if other selected
$('#location_dropdown').change(function() {
$('#otherBox').toggle(this.value == 'Other');
});
$('#honor').change(function() {
if (!this.checked) {
$('#location_dropdown').hide();
$('.form label').hide();
$('#otherBox').hide();
} else {
$('#location_dropdown').show();
$('.form label').show();
$('#otherBox').toggle($('#location_dropdown').val() === 'Other');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input name="honor" id="honor" checked="checked" type="checkbox"><label for="tribute_show_honor_fieldsname">Check for yes</label>
<div class="form">
<label for="location_dropdown"> Location: </label>
</div>
<select name="location_dropdown" selected="selected" id="location_dropdown" size="1">
<option value="Chicago Center">Chicago Center</option>
<option value="Columbia">Columbia</option>
<option value="Lower Manhattan">Lower Manhattan Hospital</option>
<option value="Other">Other</option>
</select>
<br />
<input name="otherBox" id="otherBox" value="" maxlength="255" type="text">
I know there are variations of this question on other threads, but none seem to help me with my answer. Hopefully it is quite a simple one... What am I doing wrong?
I have an option field, and when the user selects "Between" as a drop-down option, I want it to add another input box - in this case called 'AdditionalThreshold'.
function toggleMe(a) {
var e=document.getElementByName("AdditionalThreshold");
if(e.style.display=="none"){
e.style.display = "block";
} else {
e.style.display = "none";
}
return true;
}
<td>
<select name="ThresholdType">
<option value="GreaterThan">Greater than or Equal to</option>
<option value="Between" onClick="toggleMe('BetweenField')">Between</option>
<option value="LessThan">Less than</option>
</select>
</td>
<td>
<input name="Threshold" type="text" size="4" />
<input name="AdditionalThreshold" type="text" id="BetweenField" size="4" style="display:none;">
</td>
I am quite the novice at this so forgive my coding, but any help would be much appreciated.
Thanks
I think you mean to use:
document.getElementsByName("AdditionalThreshold")
in which case returns an array-like structure called a NodeList.
So you would want to do
document.getElementsByName("AdditionalThreshold")[0];
to select the first one. (assuming thats the one you want)
document.getElementById('ThresholdType').addEventListener("change", function(){
var visibility = (this.value === 'Between')?"block":"none";
console.log(this.value);
document.getElementsByName('AdditionalThreshold')[0].style.display = visibility;
})
<select id="ThresholdType">
<option value="GreaterThan">Greater than or Equal to</option>
<option value="Between">Between</option>
<option value="LessThan">Less than</option>
</select>
<input id="Threshold" type="text" size="4" />
<input name="AdditionalThreshold" type="text" id="BetweenField" size="4" style="display:none;">
<select name="ThresholdType">
<option value="GreaterThan">Greater than or Equal to</option>
<option value="Between">Between</option>
<option value="LessThan">Less than</option>
</select>
<input name="Threshold" type="text" size="4" />
<input name="AdditionalThreshold" type="text" id="BetweenField" size="4" class="hide">
<script>
function toggleBetween(event) {
if(event.target.value.toLowerCase() === 'between') {
document.querySelector('#BetweenField').classList.remove('hide');
} else {
document.querySelector('#BetweenField').classList.add('hide');
}
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('select[name="ThresholdType"]').addEventListener('change', toggleBetween, false);
})
</script>
<style>
.hide {
display: none;
}
</style>
http://jsbin.com/pigocekava/1/edit?html,css,js,output