I am creating an online order screen for customer line items and want to know the best way to create the ability to add multiple lines of  input fields.  I have a custom object called Online_order with record types for the types of products that can be ordered.  The customer first selects the main product specifications and then within the visualforce page they will enter multiple line items specifying the quantity for each size - usually 10-20 lines per order.  Should I use apex:panelgrid or should I use a apex:pageblock with input fields for Quantity, Width, Height and then use a custom button to add each additional line, or some other combination? Below is what i have using the pageblock with input fields. 

<apex:page standardController="Online_Order__c">
     <apex:form >
         <apex:pageBlock title="Order Line Items">
             Hello {!$User.FirstName}!<br/><br/>
             Please enter your order line items. <br/>
             Once you have added all your line items and reviewed your order details click the <b>Save and Submit for Quote</b>, or <br/>
             <b>Save and Place Into Production button</b>. <br/><br/>
         
         <apex:pageBlockSection columns="4">
            </apex:pageBlockSection><apex:pageblockButtons >
                   <apex:commandButton value="Save and Add a New Line" action="{!save}"/>
                   <apex:commandButton value="Save and Submit for Quote" action="{!save}"/>
                   <apex:commandButton value="Save and Place Into Production" action="{!save}"/> 
            </apex:pageblockButtons>
                     <apex:outputLabel >Quantity:</apex:outputLabel><apex:inputField value="{!Online_Order__c.Quantity__c}"/>&nbsp;&nbsp;&nbsp;&nbsp;
                     <apex:outputLabel >Width:</apex:outputLabel><apex:inputField value="{!Online_Order__c.Width__c}"/>&nbsp;&nbsp;&nbsp;&nbsp;
                     <apex:outputLabel >Height:</apex:outputLabel><apex:inputField value="{!Online_Order__c.Height__c}"/>&nbsp;&nbsp;&nbsp;&nbsp;
                     <apex:outputLabel >Notes:</apex:outputLabel><apex:inputField value="{!Online_Order__c.Notes__c}"/>&nbsp;&nbsp;&nbsp;&nbsp;
       </apex:pageBlock>  
  </apex:form>
</apex:page>

I am writing visualforce for a page in our customer portal that will allow customers to enter the details of their product order including quantity, width, height and notes.  I inserted the code and what the output looks like below.  I'm not sure why I can see the value=""/>  portion of the code for each insert field.  I do want a label next to each input field but I don't want to see the code and I would like the label to be positioned above the input field and centered.  Also, I have a button called "Save and Add a New Line" because most customers order 10-20 different line items per order.  If someone clicks this button, I'd like a new set of blank input fields to show up and the previously entered information to be visible above.  Can anyone help me with this code?  Thank you!!

<apex:page standardController="Online_Order__c">
     <apex:form >
         <apex:pageBlock title="Order Line Items">
             Hello {!$User.FirstName}!<br/><br/>
             Please enter your order line items. <br/>
             Once you have added all your line items and reviewed your order details click the <b>

             Save and Submit for Quote</b>, or <br/>
             <b>Save and Place Into Production button</b>. <br/><br/>
         
         <apex:pageBlockSection columns="4">
            </apex:pageBlockSection><apex:pageblockButtons >
                   <apex:commandButton value="Save and Add a New Line" action="{!save}"/>
                   <apex:commandButton value="Save and Submit for Quote" action="{!save}"/>
                   <apex:commandButton value="Save and Place Into Production" action="{!save}"/> 
            </apex:pageblockButtons>
                     <apex:inputTextarea /> value="Quantity"/>
                     <apex:inputTextarea /> value="Width"/>
                     <apex:inputTextarea /> value="Height"/>                 
                     <apex:inputTextarea /> value="Note"/>
       </apex:pageBlock>
  </apex:form>
</apex:page>

I have a custom object in my customer portal called Online Order with picklists for product details such as material, style and color.  Online Order has a Master-Detail relationship to another custom object called Order Line which allows the portal user to enter the product quanitity, width and height of each product with the previously selected details.  On most orders there will be many line items per order.  I want customers to be able to see previously entered line items (quantity/width/height) when they click "save and new" and when they are done and hit save, I want them to go back to the main Online Order screen.  Right now when I click Save it keeps me on the line item page and customers have to figure out they need to find the order number and click that to go back to the main Online Order page.  I am not sure of the best way to set this up?  A grid, a visualforce page with input fields, etc. and should I create a custom button?  Thank you

I am creating an online order screen for customer line items and want to know the best way to create the ability to add multiple lines of  input fields.  I have a custom object called Online_order with record types for the types of products that can be ordered.  The customer first selects the main product specifications and then within the visualforce page they will enter multiple line items specifying the quantity for each size - usually 10-20 lines per order.  Should I use apex:panelgrid or should I use a apex:pageblock with input fields for Quantity, Width, Height and then use a custom button to add each additional line, or some other combination? Below is what i have using the pageblock with input fields. 

<apex:page standardController="Online_Order__c">
     <apex:form >
         <apex:pageBlock title="Order Line Items">
             Hello {!$User.FirstName}!<br/><br/>
             Please enter your order line items. <br/>
             Once you have added all your line items and reviewed your order details click the <b>Save and Submit for Quote</b>, or <br/>
             <b>Save and Place Into Production button</b>. <br/><br/>
         
         <apex:pageBlockSection columns="4">
            </apex:pageBlockSection><apex:pageblockButtons >
                   <apex:commandButton value="Save and Add a New Line" action="{!save}"/>
                   <apex:commandButton value="Save and Submit for Quote" action="{!save}"/>
                   <apex:commandButton value="Save and Place Into Production" action="{!save}"/> 
            </apex:pageblockButtons>
                     <apex:outputLabel >Quantity:</apex:outputLabel><apex:inputField value="{!Online_Order__c.Quantity__c}"/>&nbsp;&nbsp;&nbsp;&nbsp;
                     <apex:outputLabel >Width:</apex:outputLabel><apex:inputField value="{!Online_Order__c.Width__c}"/>&nbsp;&nbsp;&nbsp;&nbsp;
                     <apex:outputLabel >Height:</apex:outputLabel><apex:inputField value="{!Online_Order__c.Height__c}"/>&nbsp;&nbsp;&nbsp;&nbsp;
                     <apex:outputLabel >Notes:</apex:outputLabel><apex:inputField value="{!Online_Order__c.Notes__c}"/>&nbsp;&nbsp;&nbsp;&nbsp;
       </apex:pageBlock>  
  </apex:form>
</apex:page>

I am writing visualforce for a page in our customer portal that will allow customers to enter the details of their product order including quantity, width, height and notes.  I inserted the code and what the output looks like below.  I'm not sure why I can see the value=""/>  portion of the code for each insert field.  I do want a label next to each input field but I don't want to see the code and I would like the label to be positioned above the input field and centered.  Also, I have a button called "Save and Add a New Line" because most customers order 10-20 different line items per order.  If someone clicks this button, I'd like a new set of blank input fields to show up and the previously entered information to be visible above.  Can anyone help me with this code?  Thank you!!

<apex:page standardController="Online_Order__c">
     <apex:form >
         <apex:pageBlock title="Order Line Items">
             Hello {!$User.FirstName}!<br/><br/>
             Please enter your order line items. <br/>
             Once you have added all your line items and reviewed your order details click the <b>

             Save and Submit for Quote</b>, or <br/>
             <b>Save and Place Into Production button</b>. <br/><br/>
         
         <apex:pageBlockSection columns="4">
            </apex:pageBlockSection><apex:pageblockButtons >
                   <apex:commandButton value="Save and Add a New Line" action="{!save}"/>
                   <apex:commandButton value="Save and Submit for Quote" action="{!save}"/>
                   <apex:commandButton value="Save and Place Into Production" action="{!save}"/> 
            </apex:pageblockButtons>
                     <apex:inputTextarea /> value="Quantity"/>
                     <apex:inputTextarea /> value="Width"/>
                     <apex:inputTextarea /> value="Height"/>                 
                     <apex:inputTextarea /> value="Note"/>
       </apex:pageBlock>
  </apex:form>
</apex:page>

I need help on the scripting to add multiple line items in an invoice. This is to store many line items one by one after clicking a button  for example 'Add More'