Show/Hide a text box
<p>I have this code that Show/Hide a text box if I select a category from a dropdown list. It's working fine, but what I want is if someone selects a different category then the text box disappears or be replaced with another text box. EX: If I select food then a text box appear, and if I select a different category the previous text box hides again without refreshing the whole page.  Here what I've got so far:</p>

<pre><code>&lt;script language="javascript" type="text/javascript"&gt;
    function addSubject(){
        selectedSubject = document.getElementById('category').value
        if (selectedSubject == 'food'){
            document.getElementById('box').style.display = 'block';
        }
    }
&lt;/script&gt;
&lt;?
    include ('connect.php');
    $query="SELECT id, name FROM category ";
    $result=mysql_query($query);
?&gt;
&lt;form&gt;
    &lt;select name="category" id="category" onchange="addSubject()"&gt;
        &lt;option&gt;Select Category&lt;/option&gt;
        &lt;?php while($row=mysql_fetch_array($result)) { ?&gt;
            &lt;option value=&lt;?php echo $row['id']?&gt;&gt;&lt;?php echo $row['name']?&gt;&lt;/option&gt;
        &lt;?php } ?&gt;
    &lt;/select&gt;
    &lt;div class="box"  id="box" style="display: none;"&gt;
        &lt;div&gt;
            &lt;span&gt;Title :&lt;/span&gt;&lt;input type="text" name="text" size="8" maxlength="7" /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt; 
</code></pre>

<p>Like always thanks in advance</p>
