We Keep Coding

Javascript changing the visibility of a div depending on what option in <select> not working

I'm trying to create a function where the user picks an option from a drop-down box, and the site should show a hidden div depending on which option the user picks.
The Dropdown box:
<select id="pick">
<option value="v2">2</option>
<option value="v3">3</option>
</select>
Button:
<input type="button" value="Generate" onclick="genFunc(this)" />
JavaScript-function:
function genFunc(sel) {
var value = sel.value;
var divChange = value;
var divChange = "document.getElementById("+ sel.value +")";
divChange.style.visibility= "visible" ;
}
CSS:
#v2 {
visibility: hidden;
}
#v3 {
visibility: hidden;
}
HTML-divs:
<div id="v2">test1</div>
<div id="v3">test2</div>
When I press the button I get this error instead:
Uncaught TypeError: Cannot set property 'visibility' of undefined
I can't find out why I'm getting this error.
Also, I'm sorry if all of this is written clumpsy.

There are two problems
this value you are passing in onclick is button, not select
You are using string, to get divChange, instead of an actual function
Try this:
function genFunc() {
var sel = document.getElementById("pick");
var divChange = document.getElementById(sel.value);
divChange.style.visibility= "visible" ;
}

There is no need to call function with this object on button click
Html for Button
<input type="button" value="Generate" onclick="genFunc()" />
Js Code
function genFunc() {
var e = document.getElementById("pick");
var value = e.options[e.selectedIndex].value;
var divChange = document.getElementById(value);
divChange.style.visibility= "visible" ;
}
Working Example

you are using the wrong element values,have to pick the value of select option. Check this fiddle...
https://jsfiddle.net/pLsdspon/1/
<select id="pick">
<option value="v2">2</option>
<option value="v3">3</option>
</select>
<input type="button" value="Generate" onclick="genFunc(this)" />
<div id="v2">test1</div>
<div id="v3">test2</div>
<script>function genFunc(sel) {
var e = document.getElementById("pick");
var strUser = e.options[e.selectedIndex].value;
var divChange = document.getElementById(strUser);
divChange.style.visibility= "visible" ;
}</script><style>#v2 {
visibility: hidden;
}
#v3 {
visibility: hidden;
}</style>

Try this
$("#pick").change(function(){
if(parseInt($(this).text()) == 2){
$("#v2").show();
$("#v2").hide();
}else{
$("#v2").hide();
$("#v2").show();
}
});

PHP/JavaScript Not affecting selectbox

I created JavaScript bellow the $titleBlock, and when I load the page, it's not affecting the select-box. What should I change?
$titleBlock->addCell(
'<select id="my-select" size="1" class="text" name="user_id">
"'.$option_str.'"
</select>'
);
<script type="text/javascript">
var mySelect = document.getElementById('my-select');;
var setBgColor = function (select) {
select.style.color = select.options[select.selectedIndex].style.color;
};
mySelect.onchange = function () {
setBgColor(this);
document.form_buttons.submit();
};
if(-1 != mySelect.selectedIndex) {
setBgColor(mySelect);
};
</script>

what do you see in log? when
if(-1 != mySelect.selectedIndex) {
console.log(mySelect.selectedIndex);
setBgColor(mySelect);
}
If nothing then that means you are not at all getting handle of select box try to put the script in onload and then try that should work

Code to detect option value does not work as expected

I was attempting to do some string comparisons in javascript. I have seen several tutorials and examples but they do not seem to work. I am missing something fundamental?
Attempt 1
function addAspect(aspect) {
var print = document.createElement('p');
var ptext;
if (aspect == "Option1") ptext = document.createTextNode("This is option1");
}
Doesnt work.
Then I found this example to which all readers said it worked fine
function addAspect() {
var print = document.createElement('p');
var ptext;
var aspect = String(document.getElementById("aspectResult").value);
if (aspect == "Option1") ptext = document.createTextNode("This is option1");
}
Doesnt work.
I also tried .toString() as well as the '===' exact match comparison.
Full code
<html>
<head>
<script type="text/javascript">
function addAspect()
{
var print = document.createElement('p');
var ptext;
var aspect = document.getElementById("aspectResult").value;
if (aspect == "Option1"){
ptext = document.createTextNode("This is option1");
}
print.appendChild(ptext);
document.getElementById("mainBlock").appendChild(print);
}
</script>
</head>
<body>
<form>
<select id="aspectResult">
<option value="Option1">Option1</option>
</select>
<input type="button" value="Check" onclick="addAspect()"/>
</form>
<span id="mainBlock">&nbsp</span>
</body>
</html>
Any suggestions?

First, a small introduction to how dropdowns work:
<select id="aspectResult">
<option value="Option1">Option1</option>
</select>
To read the selected value from the dropdown, you should do this:
var dropdown = document.getElementById('aspectResult'),
selectedValue = dropdown.options[dropdown.selectedIndex].value;
Then, you create the <p> element with a text node inside:
var p = document.createElement('p'),
txt;
if (selectedValue == 'Option1') {
txt = document.createTextNode('This is option 1');
}
Afterwards, you can append the newly created paragraph to the container of your choice:
var container = document.getElementById('mainBlock');
if (txt) {
p.appendChild(txt);
container.appendChild(p);
}
All together now!

If you are trying to add the ptext to the paragraph, you need to add two lines to the end:
function addAspect(aspect) {
var prnt = document.createElement('p');
var ptext;
if( aspect == "Option1" ) {
ptext = document.createTextNode("This is option1");
prnt.appendChild(ptext); // Add the text to the paragraph
document.body.appendChild(prnt); // Add the paragraph to the document
}
}

Your function creates a text node but then does nothing with it, so you code appears to do nothing at all. You need to append the text node to an element somewhere in the DOM:
document.body.appendChild(ptext);
Your full code appears to be working fine in IE9, Firefox 4 and Chrome 11. See http://jsbin.com/ekura5/.

Dropdown selector, change to target="_blank"

I have a dropdown selector in place and I need to change it so that the target="_blank" so it opens up a new tab.
Here is the current code:
<SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
{
if(mySel.form.target)myWin = parent[mySel.form.target];
else myWin = window;
if (! myWin) return true;
myWin.location = myVal;
}
return false;
}
//-->
</SCRIPT>
<div id=countryselector>
<FORM
ACTION="../cgi-bin/redirect.pl"
METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="gourl">
<OPTION VALUE="">Select a Country...
<OPTION VALUE="http://google.com">USA
<OPTION VALUE="http://google.ca">Canada
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go">
</FORM>
</div>
Thanks in advance

function dropdown(mySel) {
var myVal = mySel.options[mySel.selectedIndex].value;
if (myVal) {
if (mySel.form.target) {
window.open(myVal, mySel.form.target, '_attributes_');
} else {
window.location.href = myVal;
}
}
return false;
}
A list of _attributes_ can be found here for Mozilla or here for IE. There are a few differences in some of the options available, so it is best to review both lists.
You can also leave the third parameter off the function call and it should behave like target="_blank" on your <form>:
// behaves as if you submitted <form ... target="_blank">:
window.open(myVal, mySel.form.target);
Here is an example using a set of _attributes_ as documented at the links provided to open a window of a specific size and position with specific parts of the UI suppressed:
// this opens a window that is 400 pixels by 300 pixels
// it is positioned 100 pixels from the top and the left
// it will have no statusbar, no menu but the new window will have a toolbar:
window.open(myVal, mySel.form.target,
'height=300,width=400,top=100,left=100,statusbar=0,menu=0,toolbar=1');

Dynamicaly Changing the <textarea > size,style

How can i change the field size diynamicaly?
I have a select field and there are 3 options with different values.
So if the user selects one of them in the you see the values.
But how can i change the size that the values from option field fits in the
function changeText()
{
var select = document.getElementById("surl");
var textfield = document.getElementById("turl");
var bold = document.getElementById("burl");
var link = document.getElementById("linkText");
if(bold.style.display == "none")
bold.style.display = "";
//if(link.innerHtml)
bold.innerHtml = select.value;
//if(link.innerHTML !="")
link.innerHTML= select.value;
textfield.value = select.value;
}
<b>Sample: </b><select id="surl" onchange="changeText();" style="visibility: visible;" name="linkText">
<option>Select LinkText</option>
<option value="<a href='http://www.doesntexist.dsdsd/'>Want sign? http://www.doesntexist.dsdsd</a>">
Variant1
</option>
<option value="<a href='http://www.doesntexist.dsdsd/'>Wanna killme? http://www.doesntexist.dsdsd</a>">
Variant 2
</option>
</select>
<br />
<div class="succes">
<span id="burl" style="display: none"><br /><a id="linkText" href="http://www.doesntexist/"></a></span>
</div>
</p>
<p>
<textarea id="turl" style="">
text...
</textarea>
</p>

Sorry, I must’ve misunderstood your problem.
So you want to resize a textarea dynamically based on what, its contents? You could use the jQuery autoResize plugin for this…

A quick 'n' dirty jQuery solution would be the following:
$('input#foo-option-1').bind('change, click', function() {
if ($(this).is(':checked')) {
$('textarea').css('height', '150px');
}
});
$('input#foo-option-2').bind('change, click', function() {
if ($(this).is(':checked')) {
$('textarea').css('height', '250px');
}
});
$('input#foo-option-3').bind('change, click', function() {
if ($(this).is(':checked')) {
$('textarea').css('height', '350px');
}
});
Of course, this code isn’t very DRY. Moreover, modifying CSS properties through JavaScript is never a very good idea — it’s better to add classes dynamically through JS and specify the actual CSS in your CSS files (duh).

For example:
<script type="text/javascript">
document.getElementById("textarea_id").style.width = "300px";
document.getElementById("textarea_id").style.width = "200px";
</script>

First of all i thought there are more devs who can help; any way here is the answer
first create a function which calculates the strlen
function strlen(strVar)
{
return(strVar.length)
}
Second create a var tfcount
var tfcount = strlen(select.value);
and finaly
textfield.style.width = tfcount < 110 ? tfcount = 110 : 3.5*tfcount+"px";
textfield.style.height = tfcount < 110 ? tfcount = 110 : tfcount/2.5+"px";