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%"><font color="#333333" size="1" face="Verdana, Arial, Helvetica, sans-serif"><br>
<input type=radio name=design value=New_Web_Site />
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%"><font 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><font 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><font 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%"><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">
<input maxlength=500 size=50 name=imabank>
</font></div></td></tr>
</tbody>
</table>
</form>[/PHP]

Jan 9 '08 #1

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.value=this.checked; toggleDisplayState('sessionList')" title="search on session" value="true" name="useSession"/>
</span>
<span id="sessionList" class="formw" name="sessionList" style="display: none;">
<select id="session" name="session">
<option value="1">Session 1</option>
<option value="2">Session 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:
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

Jan 9 '08 #2

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

Jan 9 '08 #3

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

Jan 9 '08 #4

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

Jan 9 '08 #5

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

Jan 9 '08 #6

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 = toggleDisplayState('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:
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

Jan 10 '08 #7

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.getElementById("optional");
optional.className = "hidden"; //calling the CSS class
var Re_design = document.getElementById("Re_design");
Re_design.onclick = showOptional;
var New_Web_Site = document.getElementById("New_Web_Site");
New_Web_Site.onclick = hideOptional;
return true;
}function showOptional()
{
var optional = document.getElementById("optional");
optional.className = "";
return true;
}

function hideOptional()
{
var optional = document.getElementById("optional");
optional.className = "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_Site">
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

Jan 10 '08 #8

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

Jan 10 '08 #9

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..otherwise plz suggest some other place from where i could get help on them.


Regards
TechnoAtif

Jan 10 '08 #10

nathj

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..otherwise plz suggest some other place from where i could get help on them.


Regards
TechnoAtif

Hi TechnoAtif,

If you have series of checkboxes on a page all of which have ID's of their own and you then want to have system to check allof the check boxes I would use a simple link at the bottom of the checkboxes that was inside it's own div or span. This would say something like Check All. I t would have a href="javascript:void(0)" and an onclick that called a JS function.

The Js function would tkae as parameters the ID of the div the link is in so that it can be changed, a list of all the check box ID's and finally true or false.

This function would then split the list of controls into an array and loop through the array, for every element it would set the checked status to the value the third parameter and set the value to be the same.

The final step would be to change the link, so if the 3 parameter is treu change it to Uncheck All and if the third parameter is false change the link to Check All.

You would also need to keep track of the user chekcing and unchecking controls manually. So that you can change the link when all have become checked or unchecked manually. You can do this by using the onclick event of a check box and keeping a count of how many controls have been checked and comapring this to the total number of checkboxes. Then change the link to Uncheck when the numbers match and back to Check when they don't.

I know this isn't a code sample but I don't actually have code for doing this and so it was quicker to type an explanation.
Cheers
nathj

PS I haven't had chance to look at the other issue yet.

Jan 10 '08 #11

TechnoAtif

OOPS!!!
That was really a thorough explanation. I will try to go through it and build up the solution along its line.
For the next problem..whenever you get the time you can have a look at it.

Thanx & Regards
TechnoAtif

Jan 10 '08 #12