[brerallia]

I have this list menu....its like a drop down menu but you have to manually click on it...
in this list menu, i called it status... i have two options....
-Regular employee
-part-time...

so when i click on the regular employee, i should show a textfield.... but if i click on the part-time.... it should show nothing...

im really new to javascript... so i dont know much about it... but i tried to... and i come up with this code... and its not working...

Html

<td>Status: </td>
						<td><select name="status" id="status" onchange="onselectedstatus">
						  <option>Please select a status</option>
						  <option  <?php if(($_POST['status']) == "Regular Employee") echo "selected='selected'";?> >Regular Employee</option>
						  <option <?php if(($_POST['status']) == "Part-time") echo "selected='selected'";?> >Part-time</option>
						  </select></td>

Javascript

function onselectedstatus()
{
if (document.getElementById('status').value == "Regular Employee"){
    //show the textfield here, which is im discovering since i dont know how to yet...
}
}

ANY HELP WILL BE APPRECIATED...

[Atli]

A good way to show or hide an element through Javascript is to manipulate it's display style. If you set that style to "none", the element will be effectively removed from the DOM, so it won't show on the page. Resetting it back to it's initial value (usually "inline" or "block") will make the element appear again. See the MDN page I linked to for details on the various values it can contain.

So, in your HTML just add the element you need (an <input> in this case), give it an "id", then use the document.getElementById function to fetch it, like you do in your example there. After that you can manipulate it's styles like you normally would.

var input = document.getElementById("theinput");
if (/* Element should be hidden */) {
    input.styles.display = "none";
}
else {
    input.styles.display = "inline";
    // "inline" is the default for input elements. Use
    // "block" for elements like <p> or <div>.
}

[brerallia]

Atli, on 05 October 2013 - 07:45 PM, said:

if (/* Element should be hidden */)

Thank you... I understand but... what condition will i write there??? Im not really use to javascript codes... so i dont know if using this (input.value == "Regular Employee") is appropriate???

[Atli]

Think about what that condition would mean. The input referred to in my example is the text input that you want to be shown or hidden based on the selection. Does it matter, then, what it's value is? Should the input be hidden when the user types "Regular Employee" into the text input? - The answer to that is of course: no.

What, then, should affect the text-box visibility? That's easy; you've already answered that question in your own code example: the value of the "status" select element should decide whether or not it's visible. - And you already have that condition in your own code.

[brerallia]

I got this idea... but it isnt working on external javascript...

function onselectedstatus(){
	if (document.getElementById('status').value = "Regular Employee")
		MM_effectAppearFade('vl_sub', 1000, 100, 0, true)
	else
		MM_effectAppearFade('vl_sub', 1000, 100, 0, true)
}

[andrewsw]

You are assigning the value (=) rather than comparing (==).

I recommend that you properly terminate JS statements with semi-colons.

I can't help you with the Spry effect. Although, you are using the exact same effect, the same arguments, twice; I don't know if that will toggle the effect.

This post has been edited by andrewsw: 06 October 2013 - 02:58 AM

[andrewsw]

Going back to your original code, you are not calling your function:

onchange="onselectedstatus"
// should be
onchange="onselectedstatus()"

[brerallia]

andrewsw, on 06 October 2013 - 02:59 AM, said:

Going back to your original code, you are not calling your function:

onchange="onselectedstatus"
// should be
onchange="onselectedstatus()"

Ohh,....so that is why it isnt working right... thanks.... It works now but i had this problem.... if the web page loads first..... the textfield can be seen and when i click on the different values in the drop down list all it has to do is hide and show, hide and show the text field...
i want it that when i click on the drop-down list that has an option of Regular employee, it will show the text field.... else or what ever the user clicks then the textfield remains hidden...

here is my new code:
Javascript:

function onselectedstatus(){
	var vl = document.getElementById('vl_sub');
	if (document.getElementById('status').value == "Regular Employee")
		vl.style.display = 'inline';
	else
		vl.style.display = 'none';
}

HTML

<select name="status" class="input_list" id="status" onchange="onselectedstatus()" >
						  <option>Please select a status</option>
						  <option  <?php if(($_POST['status']) == "Regular Employee") echo "selected='selected'";?> >Regular Employee</option>
						  <option <?php if(($_POST['status']) == "Part-time") echo "selected='selected'";?> >Part-time</option>
						  <option <?php if(($_POST['status']) == "Contractual") echo "selected='selected'";?> >Contractual</option>
						  </select>

and when i click on the part-time, then the php echoes the regular employee.... is it because of the javascript??

[jimzcoder]

you can still call the same function or create a new one and call it as your form loads. you can surely select which value you'd like to display on your list as you load your form.

like this one.

<body onload="AssignValueToList();">
</body>

on your javascript

function AssignValueToList()
{
   document.GetElementById('ListID').setAttribute("value","blah");
}

that is not the actual code but i am trying to pass the logic to try to help you get through this problem.


Hope this helped.
Happy Coding.

D.I.C really rocks.

This post has been edited by jimzcoder: 07 October 2013 - 07:57 AM