Question

I have a textbox Quantity and when I change the value, I want it to update the @finalprice value right away, currently I have this, but not sure how to use Jquery and Mvc3 together

@{
   var value = 1; 
   var price = 50;
   var finalprice = value * price;
}

    <tr>
      <td>@Html.TextBox("txbQuantity", "1") </td>  
      <td>@finalprice</td>
    </tr>

How do I trigger when textbox value is changed, change the finalprice value..

Thank you

Answer 1

First wrap your FinalPrice into some type of container so you can target it.

I’ve used a span, but you can assign an ID to the td element itself if you want.

<tr>
  <td>@Html.TextBox("txbQuantity", "1") </td>  
  <td><span id="finalPrice">@finalprice</span></td>
</tr>

Then you can hookup to the blur event of the input. Razor will give it an id of txbQuantity. Then just redo the calculation and update the text.

<script type="text/javascript">

   $(document).ready(function() {

     $("#txbQuantity").blur(function() {
       $("#finalPrice").text(@price * $(this).val());
     });

   });

</script>