Javascript style.display not working with form - javascript

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

Related

Change disabled value in HTML document, if option element have specific value

I want if test2 is selected from <option> then disable all element inputs by via id element1. I try with if but dosnt work for me
function myFunction() {
if (document.getElementById("element0").value = "test2") {
document.getElementById("element1").disabled = true;
} else {
document.getElementById("element1").disabled = !0;
}
}
<select name="" id="element0">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
<div id="element1">
<label for="your-name">Name: </label>
<input type="text" name="your-name" id="" />
</div>
Generally, you should have better naming for your fields and elements. Element0 does not accurately describe what it is or does. I chose a simple name here, but please think of a better name yourself.
The function itself can be simplified. You can assign constants for the element references so that you can reuse some code. It is more readable like this and you don't have to search twice for the same element (with .getElementById).
The disabled attribute can be the outcome of the expression, since it correlates.
function myFunction() {
const dropdown = document.getElementById('dropdown');
const name = document.getElementById('name');
name.disabled = dropdown.value === 'test2';
}
<meta name="color-scheme" content="dark light" />
<body onload="myFunction()" oninput="myFunction()" style="zoom: 225%">
<select name="dropdown" id="dropdown">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
<div>
<label for="name">Name: </label>
<input type="text" name="name" id="name" />
</div>
</body>
First, the comparison operator should be "===", not "=". Secondly, you should disable the input element, not the whole div(obviously, you can't do so). So, I added the id in input. Thirdly, !0 also means true so I changed it to false
function myFunction() {
if (document.getElementById("element0").value === "test2") {
document.getElementById("element1").disabled = true;
} else {
document.getElementById("element1").disabled = false;
}
}
<select id="element0" onchange="myFunction()">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
<div>
<label for="your-name">Name: </label>
<input type="text" name="your-name" id="element1" />
</div>
So you have a couple of issues with your code.
First in your if clause you are making an assignment instead of a comparison:
= is only for assignments like: let i = 0 and == or === are used for comparison, being the latter the most used one because is does not make type inference.
Next you are disabling a div and not an input. So here's a rapid overview of my changes to your code:
<select name="myOption" id="element0">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
<div id="element1">
<label for="your-name">Name: </label>
<input id="inputElement1" type="text" name="your-name" id="" />
</div>
</body>
function myFunction() {
if (document.getElementById("element0").value === "test2" ) {
document.getElementById("inputElement1").disabled=true;
} else {
document.getElementById("inputElement1").disabled=false;
}
}
Edit: Also changed from !0 to false on the else clause because !0 is true and probably not what you want.

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/

Reset value or set to default selected option jQuery

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>

Hide Div when option from select chosen

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");
}
});
});

Display text according to the selected option

I have an option for users to select if 'Yes' or 'No'. If options selected values 'y' text box 'adv1' displays 750. If else it is 0.00
<table>
<tr>
<td>Advance Required</td>
<td><select name="advReq" id="ad">
<option value="y">Yes</option>
<option value="n">No</option>
</select>
</td>
<td><input name="adv1" type="text" readonly="readonly" value="" /></td>
</tr>
</table>
<script>
function updateText(val) {
var $el = document.getElementById("adv1");
if(val == 'y'){
$el.value = "$ 750";
} else {
$el.value = "0";
}
}
</script>
<select name="advReq" id="ad" onchange="updateText(this.value)">
<option value="y">Yes</option>
<option value="n">No</option>
</select>
<input name="adv1" type="text" id="adv1" value="" />
You can achieve this by using a simple JavaScript.
HTML Markup :
<select name="advReq" id="ad" onchange="changeValue(this.value)">
<option value="y">Yes</option>
<option value="n">No</option>
</select>
<input name="adv1" type="text" id="adv" value="" />
JavaScript :
function changeValue(val){
//use comparison operator
if(val=="y")
document.getElementById('adv').value = "$ 750";
else
document.getElementById('adv').value = "0.00";
}
If you wish to change the value dynamically with values from Server at real time. You can do it by using AJAX calls.

Categories