Multiply of two rows or field using javascript

Script:

<script type="text/javascript" language="Javascript">
function getVal(value)
{
price = document.formname.price.value;
quantity = document.formname.quantity.value;
sum = price*quantity;
// document.formname.txtDisplay.value = sum2;(or)
document.getElementById('total').value=sum;
}
</script>

or

<script type="text/javascript">
function calculate() {
        var price = document.getElementById('price').value; 
        var quantity = document.getElementById('quantity').value;
        var total = document.getElementById('total');   
        var myResult = price * quantity;
        result.value = myResult;
      
        
    }
</script>

index.php:

<form name = "formname" action="" method="post">
    
<table width="70%" align="center" >
<tr>Price<input type="text" name="quantity"  value="" /></tr>
<tr>Quantity<input type = "text" name="select2"  value=""  onkeyup="javascript:getVal();" onkeydown="javascript:getVal();" /></tr>
<tr>Total <input type = "text" name = "txtDisplay"   value ="" id="total"/></tr>
</table>
</form>

or

<table width="80%" border="0">
  <tr>
    <th>Price</th>
    <th>Quantity</th>
    <th>Total</th>
  </tr>
  <tr>
    <td><input id="price" type="text" oninput="calculate()" /></td>
    <td><input id="quantity" type="text" oninput="calculate()" /></td>
    <td><input id="total" /></td>
  </tr>
 
</table>
    

 In this coding i included two forms and two javascript.In these above which one is to easy and easy to understand you can try it.
 One of the above code oninput function is to used and other code is onkeyup and onkeydown.
 Instead of onkeyup and onkeydown we can use onblur='OnChange(this.value).
 the difference b/w the both is if we will use OnChange event means u click on the field only the value is been displayed.
 But we use onkeyup and onkeydown when typing the value the value is ro dispalyed.