Display Textbox on the click of options of list/menu

[TechnoAtif]

Hi..There is again a similar problem..Now i;ve got the option values of list?menu box to show the textbox. If the option value of list is yes then the textbox is to be displayed . Can anyone help..through php or javascript.

ONe more thing..How can i perform the same function for more than one such kind of problem..I mean if there is any other place in the form where i have to display textbox on selecting a particular value.how can it be done..for all,the form coding is here.

[HTML] <tr>
<td class=ws_body valign=top colspan=2><font color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif"><label for="ima">Do you have a Internet Merchant Account?</label></font></td>
<td class=ws_body valign=top><font color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif">
<select name=ima id =ima>
<option selected>Select</option>
<option value=imabank>Yes</option>
<option value=no>No</option>
<option value="not sure">Not Sure</option>
</select>
</font></td>
</tr>
<tr>
<td class=ws_body valign=top width="23%"><font color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif"><label for="imabank"></label>If yes, with what company <br>
(WorldPay, PaySystems, etc)?</label></font></td>
<td class=ws_body valign=center colspan=2><div align=right><font color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif">
<div id="optional1"> <input maxlength=500 size=50 name=imabank></div>
</font></div></td>
</tr>[/HTML]

[HTML]<tr>
<td><font color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif"><br>
Will you provide the images and photos?</font></td>
<td valign=bottom> <div align=right><font color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif">
<select name=imgprovide>
<option selected>Select</option>
<option value=yes>Yes</option>
<option value=no>No</option>
<option value=some>Some</option>
<option value="not sure">Not Sure</option>
</select>
</font></div></td>
</tr>
</tbody>
</table>

<table width="90%" align=center cellpadding=2>
<tbody>
<tr>
<td><font color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif">If yes, format of the images and photos?</font></td>
<td><div align=right><font color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif">
<select name=imgform>
<option selected>Select</option>
<option value="on disk">On disk</option>
<option value=broshure>Brochure</option>
<option value=paper and amp photos>Paper amp Photos</option>

<option value="dont have them yet">Don't have them yet</option>
<option value="not sure">Not sure</option>
</select>
</font></div></td>
</tr>
</tbody>
</table>
<table width="90%" align=center cellpadding=2>
<tbody>
<tr>
<td><font color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif">Do you require your images to be scanned? font></td>
<td><div align=right><font color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif">
<select name=imgscan>
<option selected>Select</option>
<option value=yes>Yes</option>
<option value=no>No</option>
<option value="not sure">Not Sure</option>
</select>
</font></div></td>
</tr>
<tr>
<td><font color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif">If yes, how many?</font></td>
<td><div align=right><font color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif">
<input maxlength=8 size=4 name=imgno>
</font></div></td>
</tr>[/HTML]

[nathj]

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]

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:

<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><font color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif">

<select name=ima id=ima onChange="this.value=this.checked; toggleDisplayState('sessionList')" >

<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%"><font 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><font color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif">
<span id="sessionList" name="sessionList" style="display:none;"><input type=text id=imabank maxlength=500 size=50 name=imabank></span>
</font></div></td>
</tr></table>[/HTML]

Regards
TechnoAtif

[nathj]

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:

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.checked; toggleDisplayState('sessionList')" >
[/html]

I think the this should look more like:
[html]
<select name=ima id=ima onChange="toggleDisplayStateBasedOnValue('sessionL ist', '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]

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.

 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 '

.toLowerCase() 

' signifies here.

Regards
TechnoAtif

[nathj]

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]

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]

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