Using Javascript to display and hide forms

JavaScript
1

I have 3 forms shown below

<form id="browser-form" action="orderQuery.php" method="GET">
            <div class ="chooser">
                <div class ="Query">
                    <?php
                    echo queryHtml('Query', $queryMap,$optionId);
                    ?>
                </div>                
            </div>
            <div>
                <input type='hidden' id='whatChanged' name='whatChanged' />
            </div>
        </form> 
        
        
        <form id="customer-form" action="orderQuery.php" method="POST">
            <?php echo displayErrors($nameErrorMessages); ?>
            <div class ="chooser">
                <div class ="Select Customer">
                    <p><span class ="formLabel1">Customer:</span><br> <input 
                    type="text" id="customerName" name="customerName" size="15">
                    </p>
                    <p>
                        <input type="submit" name='submit' value="Submit">
                    </p>
                </div>                
            </div>       
        </form>       
        
        <form id="order-form" action="orderQuery.php" method="POST">
            <?php echo displayErrors($orderErrorMessages); ?>
            <div class ="chooser">
                <div class ="Select Order Number">
                    <p><span class ="formLabel1">Order No.:</span><br> <input 
                    type="text" id="orderNumber" name="orderNumber" size="15">
                    </p> 
                    <p>
                        <input type="submit" name='submit' value="Submit">
                    </p>
                </div>                
            </div>       
        </form>

The first form selects the one of other two using javascript

/**
 * JavaScript for orderQuery.php
 */

(function () {
    'use strict';
    /*jslint browser: true, devel: true, indent: 4, maxlen: 80 */

   var customer;
   var order;
   var optionValue;  
    
    function formHandler()
    {
        optionValue = document.getElementById('Query');
        customer = document.getElementById('customer-form'),
        order = document.getElementById('order-form');  
        
        optionValue.onchange = function () 
        {            
            optionValue = document.getElementById('Query').value;
            customer = document.getElementById('customer-form');
            order = document.getElementById('order-form');         
            
            //document.getElementById('whatChanged').value = 'Query';
            //document.getElementById('browser-form').submit();
           
            //alert(option);
            
            if(optionValue === '0'){                 
                customer.style.display='block';
                order.style.display='none';               
            }            
            if(optionValue === '1'){                
                customer.style.display='none';
                order.style.display='block';                
            }
            return optionValue;
        };   
    }
   
    formHandler();

// End of the anonymous function

My trouble is the selected form dosn’t stay whem its submitted