SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using Javascript to display and hide forms

    I have 3 forms shown below

    Code:
    <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

    Code:
    /**
     * 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
    Last edited by Pullo; Aug 28, 2013 at 23:50. Reason: Added code tags


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •