show div with forms when customer starts typing in first form

Question

i have a registration form. With text inputs for First name, second name and then company name.

If the customer starts typing, there has to slide down another div with forms where the customers can give their company information.

I had an old module, i tried to copy some code but it won't work because there are some functions which i don't know.

Here is my code, can somebody help me?

Sorry for my bad English:P

    <div id="NewCustomerDiv" >
    <label>Company name: </label>
    <input type="text" name="CompanyName" value="<?php echo $customer['CompanyName']; ?>"/>
    <br />

    <div id="CustomerCompanyDiv" <?php if(!isset($customer['CompanyName']) || !$customer['CompanyName']){ echo "style=\"display:none;\""; } ?>>
        <label>Company name:</label>
        <input type="text" name="CompanyNumber" value="<?php if(isset($customer['CompanyNumber'])){ echo $customer['CompanyNumber']; } ?>"/>
        <br />

        <label>taxnumber:</label>
        <input type="text" name="TaxNumber" value="<?php if(isset($customer['TaxNumber'])){ echo $customer['TaxNumber']; } ?>"/>
        <br />

        <?php if(count($array_legaltype) > 0){ ?>
        <label>companytax:</label>
        <select name="LegalForm" class="w1">
            <?php foreach($array_legaltype as $k=>$v){ ?>
                <option value="<?php echo $k; ?>" <?php if(isset($customer['LegalForm']) && $customer['LegalForm'] == $k){ echo "selected=\"selected\""; } ?>><?php echo $v; ?></option>
            <?php } ?>
        </select>
        <br />
        <?php } ?>

        <br />
    </div>
    </div>

Answer 1

You have to do it in javascript (client-side) I would recommand you to use a library like jquery it'll be easier.

<script type="text/javascript">
//with jQuery
$(document).ready(function(){

   //admiting that the input[name=CompanyName] is the one you want to bind with the div
   $('#NewCustomerDiv input[name=CompanyName]').keyup(function(){
     //admiting that the div you want to show is CustomerCompanyDiv
     if(!$(this).val()){
         $('#CustomerCompanyDiv').hide();
     }
     else{
         $('#CustomerCompanyDiv').show();
     }
   });
   if($('#NewCustomerDiv input[name=CompanyName]').val()){
         $('#CustomerCompanyDiv').show(); 
   }
});
</script> 

<div id="NewCustomerDiv" >
<label>Company name: </label>
<input type="text" name="CompanyName" value="<?php echo $customer['CompanyName']; ?>"/>
<br />

<div id="CustomerCompanyDiv" style="display:none">        <label>Company name:</label>
    <input type="text" name="CompanyNumber" value="<?php if(isset($customer['CompanyNumber'])){ echo $customer['CompanyNumber']; } ?>"/>
    <br />

    <label>taxnumber:</label>
    <input type="text" name="TaxNumber" value="<?php if(isset($customer['TaxNumber'])){ echo $customer['TaxNumber']; } ?>"/>
    <br />

    <?php if(count($array_legaltype) > 0){ ?>
    <label>companytax:</label>
    <select name="LegalForm" class="w1">
        <?php foreach($array_legaltype as $k=>$v){ ?>
            <option value="<?php echo $k; ?>" <?php if(isset($customer['LegalForm']) && $customer['LegalForm'] == $k){ echo "selected=\"selected\""; } ?>><?php echo $v; ?></option>
        <?php } ?>
    </select>
    <br />
    <?php } ?>

    <br />
</div>
</div>

See it in action : http://jsfiddle.net/TMG85/