function showMe(id_show_element) {
document.getElementById(id_show_element).style.display = '';
}
<script type="text/javascript"> function showNhide(val,element_id) { if(val == 'Others') { document.getElementById(element_id).style.display = ''; } else { document.getElementById(element_id).style.display = 'none'; } } </script>
<select name="degrees" onchange="showNhide(this.options[this.selectedIndex].value, 'others_details');"> <option value="">Select Degree</option> <option value="O-Level">O-Level</option> </select> <span id="others_details" style="display:none"> <input type="text" name="others_degree" value="" /> </span>
There should be other error in your javascript code, following is the example through which I hide the element:
document.getElementById('dropdownListId').style.display = 'none';
to show this element I use following code
document.getElementById('dropdownListId').style.display = '';
I think there is other javascript error in your code, please share small piece of code.
Related
¡Hello! I need to make this range start working when the check is pressed ¿Can I get some help? Thanks
`
<!DOCTYPE html>
<html>
<body>
<input type="checkbox" id="si" name="nivel" onclick="myFunction()"><label for="si">Si</label>
<input type="range"id="tickmarks" disabled="disabled" />
<datalist id="tickmarks">
<option value="bajo" label="Bajo"></option>
<option value="medio" label="Medio"></option>
<option value="alto" label="Alto"></option>
</datalist>
<script>
function myFunction() {
var nivel = document.getElementById("si");
var tickmarks = document.getElementById("tickmarks");
if (nivel.checked == true){
tickmarks.style.display = "block";
} else {
tickmarks.style.display = "none";
}
}
</script>
</body>
</html>
`
I tried to press the checkbox to make the range appear and it could be selected but when it appears it is disabled.
You can control whether an element is disabled by setting the element's disabled attribute to true/false.
<input type="checkbox" id="si" name="nivel" onclick="myFunction()">
<input type="range" id="tickmarks" disabled>
function myFunction() {
const nivel = document.getElementById("si");
const tickmarks = document.getElementById("tickmarks");
if (nivel.checked == true) {
tickmarks.disabled = false;
} else {
tickmarks.disabled = true;
}
}
In this code I have 2 dependent dropdown lists and a button to duplicate/clone the form. The color selection changes based on what is selected in item. When I duplicate the dropdown list the function didn't work. I tried changing the id of the duplicated dropdown list but still can't manage to match the id of 2 dropdown list. Is there any solution? Thanks.
var count = 1;
var duplicate_div = document.getElementById('duplicate_1');
function addRecord() {
var clone = duplicate_div.cloneNode(true);
clone.id = "duplicate_" + ++count;
duplicate_div.parentNode.append(clone);
var cloneNode = document.getElementById(clone.id).children[0];
$(clone).find("*[id]").each(function() {
$(this).val('');
var tID = $(this).attr("id");
var idArray = tID.split("_");
var idArrayLength = idArray.length;
var newId = tID.replace(idArray[idArrayLength - 1], count);
$(this).attr('id', newId);
});
}
$(document).ready(function() {
$("#item_" + count).change(function() {
var val = $(this).val();
if (val == "shirt") {
$("#color_" + count).html("<option>Black</option> <option>Gray</option>");
} else if (val == "pants") {
$("#color_" + count).html("<option>Blue</option> <option>Brown</option>");
} else if (val == "shoe") {
$("#color_" + count).html("<option>White</option> <option>Red</option>");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="select-form">
<div class="duplicate" id="duplicate_1">
<br>
<label>item</label>
<select id="item_1">
<option value="template" disabled selected></option>
<option value="shirt">Shirt</option>
<option value="pants">Pants</option>
<option value="shoe">Shoe</option>
</select>
<label>color</label>
<select id="color_1">
<option disabled selected>Select item first</option>
</select>
</div>
</form>
<br><br>
<button type="button" id="add-button" onclick="addRecord()">add</button>
Since you've imported jQuery into the project, I suggest you fully use it.
It's recommended to use jQuery's .on method instead of onclick attribute.
The change event will not work on the dynamically created elements.
You should instead use "event delegation".
Last but not least, you can remove the ids if they serve as selectors. You can use jQuery to easily transverse the DOM
Try this
$(document).ready(function() {
var $cloned = $('.duplicate').first().clone(true);
var $container = $('.select-form');
$('#add-button').click(function() {
$container.append($cloned.clone());
})
$('.select-form').on('change', '.item', function() {
var val = $(this).val();
var $color = $(this).closest('.duplicate').find('.color');
if (val == "shirt") {
$color.html("<option>Black</option> <option>Gray</option>");
} else if (val == "pants") {
$color.html("<option>Blue</option> <option>Brown</option>");
} else if (val == "shoe") {
$color.html("<option>White</option> <option>Red</option>");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="select-form">
<div class="duplicate">
<br>
<label>item</label>
<select class="item">
<option value="template" disabled selected></option>
<option value="shirt">Shirt</option>
<option value="pants">Pants</option>
<option value="shoe">Shoe</option>
</select>
<label>color</label>
<select class="color">
<option disabled selected>Select item first</option>
</select>
</div>
</form>
<br><br>
<button type="button" id="add-button">add</button>
i don't know why the JS Function didn't work of Drop-down is not working when i click 1 of the option.
But on the button when i click its working.
Here's the code snippet:
<div class="btn-group">
<button onclick="myFunction()" class="btn btn-success">Disable</button>
<button onclick="myFunction1()" class="btn btn-success">Unlock</button>
</div>
<select class="">
<option onclick="myFunction()">Disable</option>
<option onclick="myFunction1()">Unlock</option>
</select>
<input type="text" name="x" id="x">
<script type="text/javascript">
function myFunction() {
document.getElementById("x").disabled = true;
}function myFunction1() {
document.getElementById("x").disabled = false;
}
</script>
And also what's the different of select option to simple button.
Why the button is working fine, except on select option ?
I don't think onclick is not supported on option elements. You could add onChange="optionChanged()" on the select element and create a new function in your JS. Something along the lines
function optionChanged() {
document.getElementById("x").disabled = !document.getElementById("x").disabled;
}
Something like this will work:
<div class="btn-group">
<button onclick="myFunction()" class="btn btn-success">Disable</button>
<button onclick="myFunction1()" class="btn btn-success">Unlock</button>
</div>
<select class="" onchange="selectOnChange(this)">
<option value="disable">Disable</option>
<option value="unlock">Unlock</option>
</select>
<input type="text" name="x" id="x">
<script type="text/javascript">
function myFunction() {
document.getElementById("x").disabled = true;
}function myFunction1() {
document.getElementById("x").disabled = false;
}function selectOnChange(e) {
if (e.value == "disable")
document.getElementById("x").disabled = true;
else
document.getElementById("x").disabled = false;
}
</script>
I already answer my own question. here's the working code.
i used onchange instead of onclick.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect" onchange="myFunction()">
<option value="disable">disable
<option value="unlock">unlock
</select>
<button id="show">modal</button>
<p id="demo"></p>
<input type="text" name="x" id="x">
<script>
$(function() {
document.getElementById("x").disabled = true;
});
function myFunction() {
$('#show').show();
var x = document.getElementById("mySelect").value;
if(x == 'unlock'){
document.getElementById("demo").innerHTML = "You selected: " + x;
$('#show').hide();
document.getElementById("x").disabled = false;
}
if(x == 'disable'){
document.getElementById("demo").innerHTML = "You selected: " + x;
document.getElementById("x").disabled = true;
}
}
</script>
<a class="btn btn-info btn-select btn-select-light">
<input type="hidden" class="btn-select-input" id="" name="shopcollection"
value="" required="required"/>
<span class="btn-select-value">Select Shop</span>
<span class='btn-select-arrow glyphicon glyphicon-chevron-down'
required="required"></span>
<ul>
<li>example1</li>
<li>example2</li>
<li>example3</li>
</ul>
</a>
$(document).ready(function () {
$(".btn-select").each(function (e) {
var value = $(this).find("ul li.selected").html();
if (value != undefined) {
$(this).find(".btn-select-input").val(value);
$(this).find(".btn-select-value").html(value);
}
});
});
$(document).on('click', '.btn-select', function (e) {
e.preventDefault();
var ul = $(this).find("ul");
if ($(this).hasClass("active")) {
if (ul.find("li").is(e.target)) {
var target = $(e.target);
target.addClass("selected").siblings().removeClass("selected");
var value = target.html();
$(this).find(".btn-select-input").val(value);
$(this).find(".btn-select-value").html(value);
}
ul.hide();
$(this).removeClass("active");
}
else {
$('.btn-select').not(this).each(function () {
$(this).removeClass("active").find("ul").hide();
});
ul.slideDown(300);
$(this).addClass("active");
}
});
$(document).on('click', function (e) {
var target = $(e.target).closest(".btn-select");
if (!target.length) {
$(".btn-select").removeClass("active").find("ul").hide();
}
});
I am trying to make it so the user has to select one of the elements (example1) however my required code does not work so the user can bypass the drop down list. I have include the drop down code (top section) and the drop down javascript file (bottom section), any tips?
You are going to need to use a select to conform to your need:
<select required>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Further reading: https://www.w3schools.com/tags/att_select_required.asp
I have two droplist in html built using tag.
<select name="List1" id="List1" onclick="GetVal()">
<option value="1" selected="selected">Mercurio</option>
<option value="2">Venus</option>
<option value="3">Tierra</option>
<option value="4">Marte</option>
</select>
<select name="List2" id="List2">
<option value="1" selected="selected">Hg</option>
<option value="2">Ve</option>
<option value="3">Ti</option>
<option value="4">Ma</option>
</select>
I have written a script such as the selection of an element from List2 relies on the selection of the corresponding element of List1.
<script language="javascript" type="text/javascript">
// <!CDATA[
function GetVal() {
var LSelect1 = document.getElementById('List1');
var LSelect2 = document.getElementById('List2');
switch (LSelect1.selectedIndex)
{
case 1:
LSelect2.selectedIndex = 1;
break;
case 2:
LSelect2.selectedIndex = 2;
break;
case 3:
LSelect2.selectedIndex = 3;
break;
default:
LSelect2.selectedIndex = 4;
}
}
// ]]>
</script>
However, the function works wrongly for the first element of the List1. Why?
selectedIndex is 0-based. A simpler way to do things might be like this:
<script language="javascript" type="text/javascript">
// <!CDATA[
function GetVal() {
var LSelect1 = document.getElementById('List1');
var LSelect2 = document.getElementById('List2');
LSelect2.selectedIndex = LSelect1.selectedIndex;
}
// ]]>
</script>