I am new to coding, so please bear with me .....

my Visualforce code has two parts the first half is success and in my Second part i have to use JAVASCRIPT to get the Total Price by Multiplying two values from two Different fields 

for eg : by calculating the price(5)*Qty(5) =Total(25)  should be displayed , i messed up somewhere and don’t know wt to do next ....

Please Help and suggest me ...... 

My VF code as follows:

<apex:page Controller="opty2proposal" id="page" >

<script type="text/javascript">

function updateRate()
{


var rat=document.getElementById('{!$Component.frm.pb.pbs.pbt.pbsi.rate}');
alert("Rate:"+rat);
var discP= document.getElementById('{!$Component.frm.pb.pbt.col1.pbs1.pbsi1.discPcrnt}'); 

alert("Total:"+rat*discP);
document.getElementByID("discRate").value = rat*discP;

}
</script> 

<apex:form id="Header" >
<form name="PrintInformationTop">
<center>
<input type="button" name="PrintInformationTop" value=" Print" onClick = "window.print()" />
</center>
</form>

<apex:sectionHeader title="Multiple Records"/>
<apex:pageBlock title="Proposal header">
<apex:pageBlockButtons >
<apex:commandButton value="Save" action="{!save}" />

</apex:pageBlockButtons>

<apex:pageBlockSection >

<apex:pageBlockSectionItem id="Opportunity"> 
<apex:outputLabel value="Opportunity Name" for="OpportunityName" />
<apex:inputText id="OpportunityName" value="{!opty.name}" size="40"/> 
</apex:pageBlockSectionItem>



<apex:pageBlockSectionItem id="Account"> 
<apex:outputLabel value="Account Name" for="AccountName" />
<apex:inputText id="AccountName" value="{!account.name}" size="40"/> 
</apex:pageBlockSectionItem>

<apex:pageBlockSectionItem id="Contact" >
<apex:outputLabel value="Contact Name" for="ContactName"/> 
<apex:selectList id="leadName" value="{!contactName}" size="1" multiselect="false">
<apex:selectoptions value="{!ContactList}" />
</apex:selectList>
</apex:pageBlockSectionItem>

<apex:pageBlockSectionItem >
<apex:outputLabel value="TextArea" for="TextArea"/>
<apex:inputTextarea id="TextArea" value="{!Description}"/>
</apex:pageBlockSectionItem> 

</apex:pageBlockSection>
</apex:pageBlock> 
</apex:form>



<apex:form id="frm">
<apex:sectionHeader title="Proposal Line Code" subtitle="AddProduct" />

<apex:pageBlock title="AddrowDynamically" id="pb" >

<apex:pageBlockButtons > <apex:commandButton value="Save" action="{!save_line}" />
</apex:pageBlockButtons>

<apex:pageBlockSection id="pbs" >
<apex:variable value="{!0}" var="rowNumber" />

<apex:commandButton value="Add" action="{!addNewObject}" reRender="newItems,panelWithVar,pbs" immediate="true"/>

<apex:outputPanel id="panelWithVar">
<apex:variable value="{!0}" var="rowNumber" />
</apex:outputPanel>

<apex:pageBlockTable value="{!objectsToInsert}" var="item" id="pbt">
<apex:column width="5%">

<apex:commandButton action="{!removeNewObject}" value=" X " reRender="newItems,panelWithVar,pbs">
<apex:param name="p1" value="{!rowNumber}" assignTo="{!numberOfRowToRemove}"/>
</apex:commandButton>

</apex:column>

<apex:column >
<apex:outputLabel value="Product Name" for="ProName"/>

<apex:selectList id="ProName" value="{!productName}" size="1" multiselect="false">
<apex:selectoptions value="{!ProductList}" />
</apex:selectList>

</apex:column>

<apex:column headerValue="Proposal Line Name">

<apex:inputField value="{!item.Name}"/>

</apex:column>

<apex:column headerValue="Price">

<apex:pageBlockSectionItem id="pbsi" >
<apex:inputField id="rate" value="{!item.Price__c}" />
</apex:pageBlockSectionItem>


</apex:column>

<apex:column headerValue="Quantity" id="col1" >

<apex:pageBlockSectionItem id="pbsi1">
<apex:inputField id="discPcrnt" value="{!item.Quantity__c}" onchange="updateRate();"/>
</apex:pageBlockSectionItem>

</apex:column>



<apex:column headerValue="Total" >

<apex:pageBlockSectionItem >
<apex:outputText id="discRate" rendered="{!check}"/>
</apex:pageBlockSectionItem>
</apex:column>


<apex:column headerValue="Description">
<apex:inputField value="{!item.Description__c}"/>
</apex:column>

</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock>

</apex:form>
</apex:page>

and my Controller :

public class opty2proposal{

public String getIsEditable() {
return null;
}

public Boolean check{ get; set; }

public List<Proposal_Line__c> objectsToInsert { get; set; }
public Integer numberOfRowToRemove { get; set; }

public String ProductName{get;set;}
public string test{get;set;}

Opportunity opty;
Account account;
Contact contact;


public String ContactName{get;set;}
public string Description{get;set;}
public Integer Quantity{get;set;}
public Integer price{get;set;}
public Integer total{get;set;}




public opty2proposal() {

objectsToInsert = new List<Proposal_Line__c>();
objectsToInsert.add(new Proposal_Line__c());


opty = [select id, name, accountId, OwnerId, Description from Opportunity where id = :ApexPages.currentPage().getParameters().get('id')];


}
public PageReference addNewObject(){

Proposal_Line__c newObject = new Proposal_Line__c();
objectsToInsert.add(newObject);

return null;
}

public PageReference removeNewObject(){

objectsToInsert.remove(numberOfRowToRemove);

return null;
}
public List<SelectOption> getProductList() {
Product2[] products = [SELECT Id,name FROM product2 LIMIT 10 ];
List<SelectOption> options = new List<SelectOption>();
options.add(new SelectOption('- None Selected - ','- None Selected - '));
for (product2 acc : products) {
options.add(new SelectOption(acc.Name,acc.Name));
}
return options;}

public PageReference save_close()
{

Proposal_Line__c objectsToInsert=new Proposal_Line__c(
name=ProductName);
insert objectsToInsert;
PageReference home = new PageReference('/home/home.jsp');
home.setRedirect(true);
return home;
}

public Opportunity getOpty() {
return opty;
}

public Account getAccount(){
account=[select id, name,OwnerId from Account where id=:opty.accountId];
return account;
}

public List<SelectOption> getContactList() {
Contact[] Contacts = [SELECT Id,Firstname,Lastname,name FROM Contact Where Accountid = :opty.accountId ];
List<SelectOption> options = new List<SelectOption>();
options.add(new SelectOption('- None Selected - ','- None Selected - '));
for (Contact con : Contacts) {
options.add(new SelectOption(con.Name,con.Name));
}
return options;
}

public void save() {


Proposal_Header__c ph=new Proposal_Header__c(
Name=contactName,
Account_Name__c=Account.name,
Opportunity_Name__c=opty.name,
Text_Area__c=Description
//CodeTotal__c
);
insert ph;
}
public PageReference save_line() {

insert objectsToInsert;
PageReference pg=New PageReference('/006/o');
return pg;

}

}