Does the JavaScript onclick event not work on <select> <option>'s? - javascript

For some reason the code below it is not working correctly. Unless I'm being quite stupid with my JavaScript I can't see what's going wrong besides the onclick events not firing on the <option>s.
function showOther() {
document.getElementById('other').value = "";
document.getElementById('other').style.display = 'block';
document.getElementById('otherBR').style.display = 'block';
}
function hideOther() {
document.getElementById('other').style.display = 'none';
document.getElementById('otherBR').style.display = 'none';
}
#other {
display: none;
}
#otherBr {
display: none;
}
<select name="" id="drop_down">
<option value="choose" onclick="hideOther();">Please choose</option>
<option value="Allure" onclick="hideOther();">Allure</option>
<option value="Elle" onclick="hideOther();">Elle</option>
<option value="In-Style" onclick="hideOther();">In-Style</option>
<option value="other" id="otherOption" onclick="showOther();">Other</option>
</select>
<input type="text" name="fields_where" id="other" placeholder="Other" />
<br id="otherBR" />

Add this function to your JS:
function showHideOther(){
if (document.getElementById('drop_down').value == 'other') {
showOther();
} else {
hideOther();
}
}
And change your select element like this:
<select name="" id="drop_down" onchange="showHideOther();">
<option value="choose">Please choose</option>
<option value="Allure">Allure</option>
<option value="Elle">Elle</option>
<option value="In-Style">In-Style</option>
<option value="other">Other</option>
</select>
function showHideOther() {
if (document.getElementById('drop_down').value == 'other') {
showOther();
} else {
hideOther();
}
}
function showOther() {
document.getElementById('other').value = "";
document.getElementById('other').style.display = 'block';
document.getElementById('otherBR').style.display = 'block';
}
function hideOther() {
document.getElementById('other').style.display = 'none';
document.getElementById('otherBR').style.display = 'none';
}
#other {
display: none;
}
#otherBr {
display: none;
}
<select name="" id="drop_down" onchange="showHideOther();">
<option value="choose">Please choose</option>
<option value="Allure">Allure</option>
<option value="Elle">Elle</option>
<option value="In-Style">In-Style</option>
<option value="other">Other</option>
</select>
<input type="text" name="fields_where" id="other" placeholder="Other" />
<br id="otherBR" />

An answer with JS only, not jQuery:
onclick event in option tag is just recognized by Firefox. If you need a solution that works on all browsers such as IE or Chrome you can use onchange event on your "Select" element.
HTML :
<select name="" id="drop_down" onchange="showHideOther(this.value);">
<option value="choose" ">Please choose</option>
<option value="Allure">Allure</option>
<option value="Elle" >Elle</option>
<option value="In-Style" >In-Style</option>
<option value="other" id="otherOption">Other</option>
</select>
JS defined in the html head section as script:
function showHideOther(value){
alert(value);
if (value==='other'){
document.getElementById('other').value = "";
document.getElementById('other').style.display = 'block';
document.getElementById('otherBR').style.display = 'block';
}
else{
document.getElementById('other').style.display = 'none';
document.getElementById('otherBR').style.display = 'none';
}
}
JSFiddle sample working fine: http://jsfiddle.net/amontellano/gLML3/14/
I hope it helps.

DEMO
var dropdown = document.getElementById('drop_down');
dropdown.onchange = function() {
var selected = dropdown.options[dropdown.selectedIndex].value;
switch(selected) {
case 'other':
document.getElementById('other').value = "";
document.getElementById('other').style.display = 'block';
document.getElementById('otherBR').style.display = 'block';
break;
default:
document.getElementById('other').style.display = 'none';
document.getElementById('otherBR').style.display = 'none';
break;
}
}

just add these function to your code:
$('#drop_down').on('change', function(){
($(this).val() == 'other') ? showOther() : hideOther();
});
se here: http://jsfiddle.net/gLML3/7/

Related

javascript Display children with Nav link when click

I have this code, and when I click on story or career, I want it to get the h1, and also the div and display the paragraph or information for that link. So far it's only displaying the h1, and not the div or other information associated with that link.
$(document).ready(function () {
var fontFamily, fontSize, fontWeight;
$("section h1 a").slice().hide().first().show();
$("section article").slice().hide().first().show();
$('#nlist a').on('click', function(e) {
e.preventDefault();
var $link = $(this);
var href = $link.attr('href');
href = href.substring(1);
$('section h1 a').each(function() {
var $a = $(this);
var id = $(this).attr('id').toLowerCase();
if (id === href) {
$a.show();
} else {
$a.hide();
}
});
$('section article').each(function () {
var isTrue = false;
$(this).children().each(function () {
var text = $(this).text().toLowerCase();
if (text.indexOf(href) !== -1) {
isTrue = true;
}
});
if (isTrue) {
$(this).show();
} else {
$(this).hide();
}
isTrue = false;
});
});
$(document).on('click', 'a', function(e){
var hide = document.getElementById("toolsb");
e.preventDefault;
if($(this).text() === "Add Though") {
$(this).text("Hide Though Bar");
hide.style.display = "none";
$(document).find($(this).attr('data-target')).fadeIn(2000).show();
}
else if ($(this).text() === "Read full story") {
$(this).text("Hide Paragraph");
hide.style.display = "none";
$(document).find($(this).attr('data-target')).fadeIn(1800).show();
}
else if ($(this).text() === "Hide Though Bar") {
$(this).text("Add Though");
hide.style.display = "block";
$(document).find($(this).attr('data-target')).slideDown().hide();
}
else if ($(this).text() === "Hide Paragraph"){
$(this).text("Read full story");
hide.style.display = "block";
$(document).find($(this).attr('data-target')).slideUp().hide();
}
});
$(document).on("click", "#chnage", function() {
var selectP = document.getElementById("paragraph");
var getValue = selectP.value;
var getParagraph;
var selectFF = document.getElementById("fFamilys");
fontFamily = selectFF.value;
var selectFS = document.getElementById("fSize");
fontSize = selectFS.value;
var selectFW = document.getElementById("fWeight");
fontWeight = selectFW.value;
switch (getValue) {
case "first": {
document.getElementById("p1").style.fontFamily = fontFamily;
document.getElementById("p1").style.fontSize = fontSize + "px";
document.getElementById("p1").style.fontWeight = fontWeight;
break;}
case "second":
document.getElementById("p2").style.fontFamily = fontFamily;
document.getElementById("p2").style.fontSize = fontSize + "px";
document.getElementById("p2").style.fontWeight = fontWeight;
//getParagraph = $("p2").val();
break;
case "third":
document.getElementById("p3").style.fontFamily = fontFamily;
document.getElementById("p3").style.fontSize = fontSize + "px";
document.getElementById("p3").style.fontWeight = fontWeight;
break;
default:
}
// if ($(this).val() === "Italics") {
// $(this).val("UnItalics");
// document.getElementById("textarea").style.fontStyle = "italic";
// }
// else {
// $(this).val("Italics");
// document.getElementById("textarea").style.fontStyle = "normal";
// }
});
$(function () {
$("[id^=font]").on("change", function () {
$(".textarea").css(this.id, /\d/.test(this.value) ? this.value +
"px" : this.value);
});
});
$(document).on("click", "#itali", function() {
if ($(this).val() === "Italics") {
$(this).val("UnItalics");
document.getElementById("textarea").style.fontStyle = "italic";
}
else {
$(this).val("Italics");
document.getElementById("textarea").style.fontStyle = "normal";
}
});
document.getElementById("delete").onclick = dele;
document.getElementById("before").onclick = before;
document.getElementById("after").onclick = after;
});
var dele = function () {
$("#stor").find("p").last().remove();
};
var before = function () {
$("#fParagraph").append("<p>" + $("#textarea").val() + "</p>");
$("textarea").value("");
};
var after = function () {
$("#lParagraph").append("<p>" + $("#textarea").val() + "</p>");
$("textarea").value("");
};
<!DOCTYPE html><meta charset="UTF-8">
<title>Life Story</title>
<link rel="stylesheet" href="style/Style.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jScript/javaScript.js"></script>
</head>
<body>
<div id="ndiv">
<nav id="nlist">
Story
Career
Education
Contact
</nav>
</div>
<section>
<h1> <a id="store">Coming To United State</a></h1>
<article>
<div id = "stor">
<span id ="story"></span>
<span class = "textarea" id ="fParagraph"> </span>
<p id= "p1">But now, you can go from JavaScript beginner to DOM scripting expert in a
single book! Fast-paced, professional, and packed with expert practices, our
new JavaScript book.
</p>
<p id = "p2"> Gates’s father could have spoken out, when Mr. Wilson did not addressed him properly at the Cut-Rate Drug Store by called he George. Addressed someone in-properly is an insult in today world, but we all know the old history, back in the day, people dealt with racial differences by drawing a strict line between white people and black people.</p>
<p id = "p3"> Wilson started addressed he George because of the incident that happen between them. I remember When I first came to the United sated, and I was playing for my high school, Ganger. I was a running back, one day, we were practicing and one of my teammate call me black monkey. <a id ="full" href="#" data-target ="#fullStory"
style="text-decoration: none">Read full story</a>
</p>
<span class = "textarea" id ="lParagraph"> </span>
<div class= "tools" id="toolsb">
<p>Make Changes to Paragraph</p>
<select id="paragraph" name="fonts">
<option value="first">First Paragraph</option>
<option value="second">Second Paragraph</option>
<option value="third">Third Paragraph</option>
</select>
<select id="fFamilys">
<option value="arial">Arial</option>
<option value="arial black">Arial Black</option>
<option value="book antiqua">Book Antiqua</option>
<option value="geneva">Geneva</option>
<option value="georgia">Georgia</option>
<option value="helvetica">Helvetica</option>
<option value="lucida sans unicode">Lucida Sans Unicode</option>
<option value="lucida grande">Lucida Grande</option>
<option value="palatino">Palatino</option>
<option value="sans-serif">Sans Serif</option>
<option value="serif">Serif</option>
<option value="tahoma">Tahoma</option>
<option value="trebuchet ms">Trebuchet MS</option>
<option value="times">Times</option>
<option value="times new roman">Times New Roman</option>
<option value="verdana">Verdana</option>
</select>
<select id = "fSize">
<option value="8">8</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
</select>
<select id="fWeight" name="fonts">
<option value="bold">Bold</option>
<option value="normal">normal</option>
</select>
<input type= "button" id = "i" value = "Italics"><br><br>
<input type= "button" id = "chnage" value = "Make Change">
<input type= "button" id = "dLastP" value = "Delete Last Paragraph">
</div>
</div>
<div class = "hide" id = "fullStory">
<p>I lived in Africa for sixteen years, but the four years I have spent in United States
have taught me more the previous sixteen years I did in Africa, so much more.
SomDue to our unique presentation methods and this book's modular organization,
this is the right book for any web developer who wants to use JavaScript effectivelytes, the better I will become.</p></div>
<div class = "thougharea" id = "addNote">
<div class= "style">
<select class = "fontFamily" id="fontFamily">
<option value="arial">Arial</option>
<option value="arial black">Arial Black</option>
<option value="book antiqua">Book Antiqua</option>
<option value="geneva">Geneva</option>
<option value="georgia">Georgia</option>
<option value="helvetica">Helvetica</option>
<option value="linotype">Linotype</option>
<option value="lucida sans unicode">Lucida Sans Unicode</option>
<option value="lucida grande">Lucida Grande</option>
<option value="palatino">Palatino</option>
<option value="sans-serif">Sans Serif</option>
<option value="serif">Serif</option>
<option value="tahoma">Tahoma</option>
<option value="trebuchet ms">Trebuchet MS</option>
<option value="times">Times</option>
<option value="times new roman">Times New Roman</option>
<option value="verdana">Verdana</option>
</select>
<select class ="fontSize" id = "fontSize">
<option value="8">8</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
</select>
<select class ="fontWeight" id = "fontWeight">
<option value="bold">Bold</option>
<option value="normal">Normal</option>
</select>
<input type= "button" id = "itali" value = "Italics">
</div>
<textarea class ="textarea" id= "textarea">Enter some text</textarea>
<div class= "buttions">
<input type= "button" id = "before" value = "Append At B">
<input type= "button" id = "after" value = "Append At A">
<input type= "button" id = "delete" value = "Delete Last Paragraph">
</div>
</div>
<div></div>
<div class ="add">
<nav id="thing">
<a id ="tools" href="#" data-target ="#addNote" style="text-decoration: none">Add Though</a>
</nav>
</div>
</article>
<h1> <a id="career">Career and Opportunity</a></h1>
<article>
<div id ="edu">
<span id ="caree"></span>
<p>Hav
has taught me a negative can turn into a positive experience. I immigrated
</article>
</section>
</body>
</html>
This is what I have so far. But it's only selecting the h1 element.
$("section h1 a").slice().hide().first().show();
$("section article").slice().hide().first().show();
$('#nlist a').on('click', function(e) {
e.preventDefault();
var $link = $(this);
var href = $link.attr('href');
href = href.substring(1);
$('section h1 a').each(function() {
var $a = $(this);
var id = $(this).attr('id').toLowerCase();
if (id === href) {
$a.show();
} else {
$a.hide();
}
});
$('section article').each(function () {
var isTrue = false;
$(this).children().each(function () {
var text = $(this).text().toLowerCase();
console.log(text);
if (text.indexOf(href) !== -1) {
isTrue = true;
}
});
if (isTrue) {
$(this).show();
} else {
$(this).hide();
}
isTrue = false;
});
});
I was hopping someone can help me out
> The problem is coming from here. It's not selecting the article with
the div.
$('section article').each(function () {
var isTrue = false;
$(this).children().each(function () {
var text = $(this).text().toLowerCase();
console.log(text);
if (text.indexOf(href) !== -1) {
isTrue = true;
}
});
if (isTrue) {
$(this).show();
} else {
$(this).hide();
}
isTrue = false;
});
});
You appear to be looking for the href in the article text but the href is the previous element to the article.
Does this fix the problem?
$('section article').each(function () {
var h1Link = $(this).prev().attr("id");
if(h1Link==href){
$(this).show();
}else{
$(this).hide();
}
});

Show textarea if selected item in listbox changes

I have a listbox, and I want to show a textarea if I have a selected item, it is so simple, but my code isn't working, can any one help me?
Listbox code :
<select onchange="change(this)" name="idUser" class="form-control">
<c:forEach items= '${listeU}' var='p' >
<option value="${p.getIdUser()}"> ${p.getIdUser()} - ${p.getNom()} ${p.getPrenom()}</option>
</c:forEach>
</select>
JS :
function change(obj) {
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
var textarea = document.getElementById("text_area");
if(selected === '1'){
textarea.show();
}
else{
textarea.style.display = "none";
}
}
Item to show :
<textarea id="text_area" type="text" name="text_area" style="display: none"></textarea>
show() is a jQuery and you're using pure JS so you should replace it by :
textarea.style.display = "block";
Hope this helps.
function change(obj) {
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
var textarea = document.getElementById("text_area");
if(selected === '1'){
textarea.style.display = "none";
}
else{
textarea.style.display = "block";
}
}
<select onchange="change(this)" name="idUser" class="form-control">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
</select>
<textarea id="text_area" type="text" name="text_area" style="display: none"></textarea>

Display div if a specific select option value is selected

I am trying to display a div if user select a specific option value from a select drop down list.
Example:
The select drop down list consist of dynamic names fetched from the database and also one static or permanent name at the bottom of the list called "Admin"
If user select an option that's not "Admin", a div containing certain form element is shown else if the user select "Admin" that div remain hidden
Here is my code:
Javascript -
<script language="javascript">
function admSelectCheck(nameSelect)
{
if(nameSelect){
admOptionValue = document.getElementById("admOption").value;
if(admOptionValue != 0){
document.getElementById("admDivCheck").style.display = "";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
</script>
HTML -
<select id="getFname" onchange="admSelectCheck(this.select);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
Would be glad getting help with this.
Using this.select is incorrect.
Here is the correct code:
HTML
<select id="getFname" onchange="admSelectCheck(this);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
JS
function admSelectCheck(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("admOption").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";
}
}
See the demo on JSFiddle.
I think you need like this
Just Change this line:
JS
admOptionValue = document.getElementById("getFname").value;
//alert(admOptionValue);
if(admOptionValue == 0){
document.getElementById("admDivCheck").style.display = "";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
And also in HTML
onchange="admSelectCheck(this);"
see Demo
try this:
JS:
function admSelectCheck(nameSelect)
{
if(nameSelect){
admOptionValue = nameSelect.value;
if(admOptionValue != 0){
nameSelect.style.display = "";
}
else{
nameSelect.style.display = "none";
}
}
else{
nameSelect.style.display = "none";
}
}
HTML:
<select id="getFname" onchange="admSelectCheck(this);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
Try
<select id="getFname" onchange="admSelectCheck(this);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
And
function admSelectCheck(nameSelect)
{
var val = nameSelect.options[nameSelect.selectedIndex].value;
document.getElementById("admDivCheck").style.display = val == '0' ? "block" : 'none';
}
Demo: Fiddle
You can attach change event handler on body load event and hide/unhide <div> based on selection:
HTML
<select id="getFname">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
Put the following code in Head tag:
<script type="text/javascript">
function onload() {
document.getElementById("getFname").onchange = function (e) {
if (this.value == 0) {
document.getElementById("admDivCheck").style.display="";
} else {
document.getElementById("admDivCheck").style.display="none";
}
};
}
</script>
Call the onload function in body:
<body onload="onload()">
jsfiddle demo
Change this.select to this:
<select id="getFname" onchange="admSelectCheck(this);">
Then it should work okay. Also if you have jQuery you can simply do:
$("#getFname").change(function() {
var val = $(this).text();
if (val != "Admin") {
$("#div").show();
}
});
Will supply a pure JS function too.
<select id="getFname">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$("#getFname").on("change",function(){"0"===$(this).val()?$("#admDivCheck").show():$("#admDivCheck").hide()});
</script>
Demo: https://jsfiddle.net/kingtaherkings/swzmxkej/

dropdown option and action

I have a drop down and inside that i have options. On clicking the option it must display fields respectively.
Like for
option1 == one text box
option2 == two text box and so on...
<select id="dropdown">
<option value="A">option1</option>
<option value="B">option2</option>
<option value="C">option3</option>
<option value="D">option4</option>
</select>
on clicking option1 one field must be shown. on option2 two fields.. am new to javascript and html. Please help friends..
If you can use jquery it can be done like below. On change select a data attribute containing the number of textboxes to display. Then for loop through them and append.
Demo
Html:
<select id="dropdown">
<option value="A" data-number="1">option1</option>
<option value="B" data-number="2">option2</option>
<option value="C" data-number="3">option3</option>
<option value="D" data-number="4">option4</option>
</select>
<div id="textBoxContainer">
</div>
Javascript:
$('#dropdown').change(function(){
$('#textBoxContainer').empty();
var number = $(this).find('option:selected').attr('data-number');
for (var i = 0; i < number; i++){
$('#textBoxContainer').append('<input type="text"/>');
}
});
<select id="dropdown" onChange="showHide()">
<option value="A">option1</option>
<option value="B">option2</option>
<option value="C">option3</option>
<option value="D">option4</option>
</select>
function showHide()
{
hideAll();
var val = document.getElementById("dropdown").value;
if(val == "A")
document.getElementById("firstTextBoxId").style.display = 'block';
else if(val == "B")
document.getElementById("secondTextBoxId").style.display = 'block';
else if(val == "C")
document.getElementById("ThirdTextBoxId").style.display = 'block';
else if(val == "D")
document.getElementById("FourthTextBoxId").style.display = 'block';
}
function hideAll()
{
document.getElementById("firstTextBoxId").style.display = 'none';
document.getElementById("secondTextBoxId").style.display = 'none';
document.getElementById("thirdTextBoxId").style.display = 'none';
document.getElementById("fourthTextBoxId").style.display = 'none';
}

Javascript - getElementById and help me

<script type="text/javascript">
function myfunction() {
if (document.getElementById('myform').value == "yes") {
document.getElementById('yesinput').style.display = '';
} else {
document.getElementById('yesinput').style.display = 'none';
}
}
</script>
<select name="myform" id="myform" onchange="myfunction()">
<option selected="selected">please select</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<div id="yesinput" style="display:none">
<input name="input" type="text" />
</div>
<div id="noinput" style="display:none">
<input name="input" type="text" />
</div>
Help ya. How to make if we select No will have another input field below the id="noinput".
Now it's working if we select Yes. let me know
function myfunction() {
if (document.getElementById('myform').selectedIndex == 0) {
document.getElementById('noinput').style.display = 'none';
document.getElementById('yesinput').style.display = 'inline';
} else {
document.getElementById('noinput').style.display = 'inline';
document.getElementById('yesinput').style.display = 'none';
}
}
You can construct a new Element and append it to the DOM via Javascript. An example:
var newInput = document.createElement("input");
newInput.setAttribute("id", "newElement");
newInput.setAttribute("type", "text");
document.body.appendChild(newInput);

Categories