Question

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:

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

Like always thanks in advance

Answer 1

Do you have a library such as jquery available? If so, you could do something like this:

jQuery('#box').replaceWith('<newelement>')

See their documentation for this here: http://api.jquery.com/replaceWith/