Display Textbox on the click of options of list/menu

**nathj** · Jan 10 '08, 04:59 PM

Hi TechnoAtif,

The select box has an onchange event. This means that you can call the JS function I listed on your other post when the selected item is changed. Send in the correct parameters and away to go. The code would be the same as the radio buttons essentially just replace the onclick with onchange and update the parameters.

I hope this helps
nathj

**TechnoAtif** · Jan 11 '08, 06:42 AM

Hi Nathj..
Thanx for your response.I am just trying your code on select box.It is working but still there are problems.:

i)As I select any of the option ,the textbox gets displayed,I want it to be displayed only on selecting first option i.e. 'yes'

ii)The text from the select box ,i.e. yes,no and nor sure get vanished as i select any of them.But i want the selected item to shown on the top in the select box. I hope you can under stand that.

So If you can,then kindly look at these problems, here is the customised code:

Code:

<script language="javascript">
function toggleDisplayState(poObjectToDisplay)
{                                           
    
    var loObject = document.getElementById(poObjectToDisplay);
 
    //test the current state of the object and toggle opposite state.
    if (loObject.style.display != '' && loObject.style.display != 'none') 
    {
        loObject.style.display = 'none';
    }
    else 
    {
        loObject.style.display = 'inline';
    } 
}

</script>

[HTML]<table>
<tr>
<td class=ws_body valign=top colspan=2><font color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif">Do you have a Internet Merchant Account?</font></td>
<td class=ws_body valign=top><fon t color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif">

<select name=ima id=ima onChange="this. value=this.chec ked; toggleDisplaySt ate('sessionLis t')" >

<option selected>Select </option>
<option value="yes">Yes </option>
<option value="no">No</option>
<option value="notsure" >Not Sure</option>
</select>
</font></td>
</tr>
<tr>
<td class=ws_body valign=top width="18%"><fo nt color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif">If yes, with what company <br>
(WorldPay, PaySystems, etc)?</font></td>
<td class=ws_body valign=center colspan=2><div align=right><fo nt color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif">
<span id="sessionList " name="sessionLi st" style="display: none;"><input type=text id=imabank maxlength=500 size=50 name=imabank></span>
</font></div></td>
</tr></table>[/HTML]

Regards
TechnoAtif

**nathj** · Jan 11 '08, 08:53 AM

Hi TechnoAtif,

I will attempt to address each question in trn.

1. You only want the onChange event to fire if the user has selected 'Yes' Then I think perhaps you should adapt the JavaScript a little:

Code:

function toggleDisplayStateBasedOnValue(poObjectToDisplay, pcObjectToTest, pcTestValue)
{										   
	lcCurrentValue = document.getElementById(pcObjectToTest).value ;
	loObject = document.getElementById(pcObjectToDisplay) ;	
	
	//test the current value of the object and apply the correct state
	if (lcCurrentValue.toLowerCase() == pcTestValue.toLowerCase())
	{
		loObject.style.display = 'inline';
	}
	else
	{
		loObject.style.display = 'none';
	}
}

2. The trouble here is that you have an onChange handelr on the select control that sets the value :
[html]
<select name=ima id=ima onChange="this. value=this.chec ked; toggleDisplaySt ate('sessionLis t')" >
[/html]

I think the this should look more like:
[html]
<select name=ima id=ima onChange="toggl eDisplayStateBa sedOnValue('ses sionList', 'ima', 'Yes')" >
[/html]

This should prevent the value form being overwritten.

I have also added the final parameters required by the new JavaScript function and changed the name for you so that we can leave the original in tact.

I hope this helps you out
nathj

**TechnoAtif** · Jan 11 '08, 10:24 AM

Hi Nathj .its working.
Thanx for that. You saved my time. You are indeed an intelligent and helpful guy.
If I have to display the list/menu box in place of textbox. then i guess the same solution could be useful with some minor customization.. Lets say if i use the same list/menu box in the place of textbox again.Then what shouuld be the right way.
What do you say..i guess you wont mind further helping me .

one more thing.

Code:

 if (lcCurrentValue.toLowerCase() == pcTestValue.toLowerCase())

In this line i can guess that the condition is being checked whether the selected item value is yes or not. But what does '

Code:

.toLowerCase()

' signifies here.

Regards
TechnoAtif

**nathj** · Jan 11 '08, 10:28 AM

Originally posted by TechnoAtif

Hi Nathj .its working.
Thanx for that. You saved my time. You are indeed an intelligent and helpful guy.
If I have to display the list/menu box in place of textbox. then i guess the same solution could be useful with some minor customization.. Lets say if i use the same list/menu box in the place of textbox again.Then what shouuld be the right way.
What do you say..i guess you wont mind further helping me .

Regards
TechnoAtif

Hi TechnoAtif,

Thank you for your kind words.

I am always happy to help those who, like you, have shown some attempt to help themselves first.

What you say about minor customisation is true. this basic function can be adapted as required - that's the beauty of paarameters. Remember though that if you add parameters to a function that is already in use you need to update any existing calls.

If you need any more help simply post back to the forum - I check it out every day so chances are I'll spot your post.

Cheers
nathj

**TechnoAtif** · Jan 11 '08, 10:43 AM

Its ok.when i'l work on that code i will get to you in case i get caught in any mystery. For the time being thanx for being so generous.and can i have your view about the if condition and .tolowercase() method that i asked i my earlier post.

Thanx & Regards
TechnoAtif

**nathj** · Jan 11 '08, 10:46 AM

Originally posted by TechnoAtif

Its ok.when i'l work on that code i will get to you in case i get caught in any mystery. For the time being thanx for being so generous.and can i have your view about the if condition and .tolowercase() method that i asked i my earlier post.

Thanx & Regards
TechnoAtif

Hi TechnoAtif,

Sorry, I missed that question earlier on. The .toLowerCase simply converts the string to all lowercase. this means the if condition is now case insensitive as both sides of the operator have been converted to all lower case.

Hope this helps clear it up for you.
Cheers
nathj

Ps I'm glad to have helped out, I hope your project is a success

Display Textbox on the click of options of list/menu

Display Textbox on the click of options of list/menu

Comment

Comment

Comment

Comment

Comment

Comment

Comment