CSS Forms

[gemzilla]

Hi,

I have a contact form using PHP and CSS at this link: http://www.kent-telephones.ismywebsi...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/sh...er-is-Selected