Making Form Fields Appear or Disappear,Based on the Value of other Fields

[TechnoAtif]

Here is the other one..This requires a textbox to open while clicking of a radiobutton in one part and in the other part on the click of a list/menu.

I want that..as I click the second radiobutton,the textbox be displayed so that the data may be posted.else itremains hidden or engraved..and a similar other problem with list/menu in place of rado button.

Tablename:form
Columnames :(i) des,des_url
Columnnames:(ii )dom,domname

[PHP]<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" >
<table width="90%" align=center cellpadding=2 class=medium>
<tbody>
<tr bgcolor=#42519c >
<td colspan=2><font color="#FFFFFF" size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong> 1. Type of Web Site </strong></font></td>
</tr>
<tr>
<td width="42%"><fo nt color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif"><br>
<input type=radio name=design value=New_Web_S ite />
New Web site design </font></td>
<td width="58%" rowspan=2><font color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif"><br>
</font> </td>
</tr>
<tr>
<td><font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif"><br>
<input type=radio name="design" value=Re-design />
Re-design a Web site</font></td>
</tr>
<tr>
<td width="42%"><fo nt color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif"><br>
If re-design, what is the URL?&nbsp; </font></td>
<td valign=bottom>< div align=right><fo nt color="#333333" size="1"
face="Verdana, Arial, Helvetica, sans-serif"><br>
<input maxlength=80 size=50 name=des_url >
</font></div></td>
</tr><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>
<option selected>Select </option>
<option value=yes>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="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">
<input maxlength=500 size=50 name=imabank>
</font></div></td></tr>
</tbody>
</table>
</form>[/PHP]

[nathj]

Hi,

What I've deon to overcome this issue is that when the form is built up I have check boxes to the left of textboxes or slect boxes or whatever. The controls to the right start off in a span with a display state of none. A sample section of a form would look lie this:
[html]
<div class="row">
<span class="label">
<label for="useSession ">Session: </label>
<input id="useSession " class="check" type="checkbox" onclick="this.v alue=this.check ed; toggleDisplaySt ate('sessionLis t')" title="search on session" value="true" name="useSessio n"/>
</span>
<span id="sessionList " class="formw" name="sessionLi st" style="display: none;">
<select id="session" name="session">
<option value="1">Sessi on 1</option>
<option value="2">Sessi on 2</option>
</select>
</span>
</div>
[/html]
The onclick event of the check box could be used as the onchange evet of a text box. It calls a simple javascript function that looks like:

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';
    } 
}
 

This is a very simplistic solution but then when I check the post data I check the stae of the check box to see if I need to check the contents of the other control.

A more complex solution would be to have the onclick event call a javascript function that use the XMLHTTPRequets object to get the information that was required and then write the control only when it is needed. When it is not need simply write nothing back in place of the control definition. This process is essentially AJAX and may be overkill for your project. If you want to investigate the AJAX route I would be happy to help you out and even post some psuedo code.

Cheers
nathj

[TechnoAtif]

Hi Nathj..thanx for the reply..The solution you have provided.is indeed simple.
But you have used the checkbox..can the same be replicated for radibutton or list box. IF yes please cite an example.it would be easier for me.

The other point is that you have made use of session.But i dont want to use session values.so is there any way to perform the task without using the session.

The last one . Isn't there any way to do this task in PHP alone, without .using javascript or as you mentioned.Ajax. . Is it more difficult to do it in PHP alone ?

Regards
TechnoAtif

[nathj]

Hi Nathj..thanx for the reply..The solution you have provided.is indeed simple.
But you have used the checkbox..can the same be replicated for radibutton or list box. IF yes please cite an example.it would be easier for me.

The other point is that you have made use of session.But i dont want to use session values.so is there any way to perform the task without using the session.

Regards
TechnoAtif

Hi TechnoAtif, Often simplicity is best, but thats always a judgement call.

If you wish to use this for a radio button then you may have to play around with it a bit. The radio button control ahas an onclick event so you could use it in the same way. However, I'm not sure how this would handle deactivating controls, you may have to add some extra code for that.

As for text based controls you could simply use the onchange event to handle this. However, you may then want to perform more tests on the contents of the text field - simply pass the value of the text field and if it's empty disable the display and if its not empty enable the display.

If you have aplay around with te code smaple from before but alter it to use a radio button then I may be able to help you tweak it when the time comes.

Cheers
nathj

[TechnoAtif]

Can you please sort out my other problems too that i posted today.Please have a look on those posts if you can.

Regards
Atif

[TechnoAtif]

Hi Nathj..

Its great that i now know how to solve this problem in case of checkboxes and thanx to you for that. but still since in the form radiobutton has been used to display the textboxes.so i have to do it in any case..Believe me these problems have choked up my mind since the last one week or so.Desperate to get the solution,this was my ultimate option to sought help from you noble people.You should have seen my other posts also that i posted today. So please help me out.

Regards
TechnoAtif

[nathj]

Hi Nathj..

Its great that i now know how to solve this problem in case of checkboxes and thanx to you for that. but still since in the form radiobutton has been used to display the textboxes.so i have to do it in any case..Believe me these problems have choked up my mind since the last one week or so.Desperate to get the solution,this was my ultimate option to sought help from you noble people.You should have seen my other posts also that i posted today. So please help me out.

Regards
TechnoAtif

Hi TechnoAtif,

Having read through your code more thoroughly I have one question. Am I correct in thinking that the visitor to the site can choose either 'New Site Design' or Re-design'?

If so then you could try the following for each radio button:
[html]
onclick = toggleDisplaySt ate('newsite', 'redesignsite')
[html]
The two ID/names given in this call would need to be the ID/name of the textbox against each radio button. The JS woudl then be slightly different:

function toggleDisplayState(poObjectToDisplay, pcObjectToHide)
 
{                                          
    var loObjectToShow = document.getElementById(poObjectToDisplay);
    var loObjectToHide = document.getElementById(pcObjectToHide);
 
    //test the current state of the object and toggle opposite state.
 
    loObjectToShow.style.display = 'inline';
 
    loObjectToHide.style.display = 'none';
 
 }
 

Becuase you can't uncheck a radio button it only changes when another button in the same group is checked this even simpler code should do the trick for you.

Remeber that you will need to have the text boxes defined but with a style="display: none". If there is more than one control to be shown when a radio button is clicked simply put them all in a <div> and pass the id of the div to the JavaScript.

Finally this call will need to be made on all the radio buttons and at present only allows you to enable and disable one set of controls. If you need it to enable or disable more in one go then let me know and we can look at using list of controls as parameters.

Cheers
nathj

[TechnoAtif]

Hi Nathj

Thanx for your coooperation throughout.Your advice has further improved my knowledge bank.For this problem i have implented your ideas ,they were good.In addition to that I have tried another thing from some book and i got exactly what i wanted.Here is the code that could help others like me.It involves the combination of javascript and a little bit of CSS

[HTML]<style type="text/css"> //use of css
.hidden
{
position: absolute;
left: -1500em;
}
</style>
<script type="text/javascript">
addLoadListener (init);
function init()
{
var optional = document.getEle mentById("optio nal");
optional.classN ame = "hidden"; //calling the CSS class
var Re_design = document.getEle mentById("Re_de sign");
Re_design.oncli ck = showOptional;
var New_Web_Site = document.getEle mentById("New_W eb_Site");
New_Web_Site.on click = hideOptional;
return true;
}function showOptional()
{
var optional = document.getEle mentById("optio nal");
optional.classN ame = "";
return true;
}

function hideOptional()
{
var optional = document.getEle mentById("optio nal");
optional.classN ame = "hidden";
return true;
}
</script>
<body onLoad="init()" >[/HTML][HTML]
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" >

<fieldset>

<input type=radio name=design id=New_Web_Site />

<!--<input type="radio" name="read" id="readYes" />-->
<label for="New_Web_Si te">
New Web site design
</label>
<input type=radio name="design" id=Re_design />

<!--<input type="radio" name="read" id="readNo" />-->
<label for="Re_design" >
Re-design a Web site
</label>
<div id="optional">
<label for="des_url">
If re-design, what is the URL?&nbsp;
</label>
<input type="text" maxlength=80 size=50 id = des_url name=des_url >
</div>
</fieldset>
</form>[/HTML]

Follow this up by your insert query in PHP.and you will have the solution.

Regards
TechnoAtif

[nathj]

Hi TechnoAtif,

I'm glad you have got a solution to your probblem and I am also glad that you have gained some more knowledge through the process - I always think that makes the struggle worth while.

I'm happy to have helped.

cheers
nathj

[TechnoAtif]

Yes Nathj..
Hats off to the noble peace of work you people are doing to enrich novices like us with proper knowledge.

Do You have answers to 2 of my other posts. If yes then kindlyhelp..oth erwise plz suggest some other place from where i could get help on them.


Regards
TechnoAtif