CSS Forms

[gemzilla]

Hi,

I have a contact form using PHP and CSS at this link: http://www.kent-telephones.ismywebsite.co.uk/contact.php

What I want it to do is when "other" is selected in the drop down menu then a text box to specify will appear. Is it possible to do this using CSS and how do I do it. below is my code and my attempt at doing it in a different colour. I Apologise for my code, it is probably a bit messy.

CSS


/*Form*/

#contactform {
width:360px;
height:auto;
float:left;
margin:10px;
overflow:hidden;
}

#contactform p {
text-align:left;
}

#formdetails {
height:auto;
overflow:hidden;
}

#formdetails input {
border: 1px solid #aaa;
width:200px;
float:right;
margin-right:50px;
margin-top:3px;
}

#formdetails label {
float:left;
margin-top:3px;
}

#formdetails3 {
width:180px;
float:left;
height:auto;
overflow:hidden;
}

#formdetails4 {
overflow:hidden;
}

#formhide {
width:180px;
float:left;
display:none;
height:auto;
overflow:hidden;
}

#formhide > #formdetails3 option[value='other'] {
display:inline;
}

#formmessage {
margin-top:10px;
width:360px;
}

#formmessage textarea{
width:250px;
height:100px;
}




PHP


<form action="" method="POST" class="form">

<div id="formdetails">

<p>
<label for="name" class="textbox">
Name: *
</label>

<input type="text" name="name" value="<?php echo $_POST['name']; ?>">
</p>


<p>
<label for="email" class="textbox">
Email: *
</label>

<input type="text" name="email" value="<?php echo $_POST['email']; ?>">
</p>


<p>
<label for="phone" class="textbox">
Telephone: *
</label>

<input type="text" name="phone" maxlength="11" value="<?php echo $_POST['phone']; ?>">
</p>

</div>

<div id="formdetails2">

<p>
<label>
Prefered Method of contact:
</label><br/>

<input type="radio" name="prefered" value="telephone">Telephone
<input type="radio" name="prefered" value="email">Email
<input type="radio" name="prefered" value="email">Either
</p>

</div>

<div id="formdetails4">
<div id="formdetails3">

<p>
<label>
How did you find us?
</label><br/>

<select name="method" id="method">
<option value="google" selected="selected">Google</option>
<option value="youfindlocal">YouFindLocal</option>
<option value="applegate">Applegate</option>
<option value="other">Other</option>
</select>
</p>

</div>
</div>


<div id="formhide">
<p>
<label>
Please specify:
</label>
<input type="text" name="specify" value="">
</p>
</div>



<div id="formmessage">

<p>
<label for="message">
Message: *
</label><br/>

<textarea name="message" class="message"><?php echo $_POST['message']; ?></textarea>
</p>

</div>

<div id="formsubmit">

<p>
<input type="submit" name="submit" value="Send Email" class="submit">
</p>

</div>

</form>


</div>


Thank you,

Gemma

[ajfmrf]

Personally,I would just add those 'other' options to the select list you are using.It would be so much easier,unless you have a lot toadd or there is another reason to not go that way??

[Beverleyh]

Sounds like a job for JavaScript - maybe these examples will help;

Using jQuery: http://jsfiddle.net/Qe6G4/ and http://jsfiddle.net/vyc7N/

Without jQuery: http://www.webdeveloper.com/forum/showthread.php?273693-Show-Hide-text-field-when-Other-is-Selected