How to dynamically alter a value in mvc3 html page

Question

        <tr> 
           <td>
               Delivery
           </td>
            <td>
               <div class="confdelivery">
                    <select id="NxtDay" name="NxtDay">
                         <option selected="selected" value="1">Normal Devliery + 10.00</option>
                            <option value="2">Next Day Delivery + 20.00</option>
                        </select>
                    </div>
                </td>
            </tr>
             <tr>
                <td>
                    Total
                </td>
                <td> 
                     @{
                var total = Model.CartTotal;
             }
            @total
                </td>
            </tr>

Basically if a user selects next day delivery. I want 20 to be added to @total?

AJC · Accepted Answer · 2011-09-23 15:58:59Z

3

I thing you are going about this the wrong way. You either update some input value with javascript, or use the NxtDay value in your controller action to assign the correct value, depending on the selection.

ADDED:

What you want to do is something like this: (I am assuming you are using jquery, since it come with MVC3).

HOWEVER: You should check out some tutorial if you are starting. This is pretty basic stuff and you won't go far without having to come back here unless to read up on this sutff.

<tr> 
   <td>
       Delivery
   </td>
    <td>
       <div class="confdelivery">
            <select id="NxtDay" name="NxtDay">
                <option selected="selected" value="10">Normal Devliery + 10.00</option>
                <option value="20">Next Day Delivery + 20.00</option>
            </select>
        </div>
    </td>
</tr>
 <tr>
    <td>
        Total
    </td>
    <td> 
        <span id="totalValue" style="display: none">@Model.CartTotal</span>
        <span id="totalWithShipping">0</span>
       <input id="hiddenTotal" type="hidden" value="0">
    </td>
</tr>

<script>
    $(document).ready(function () {
        $('#NxtDay').change(function() {
            addToTotal();
        });
    });
    function addToTotal(){
        $('#totalWithShipping').html($('#totalValue').html() + $("#NxtDay option:selected").val());
        $('#hiddenTotal').val($('#totalWithShipping').html());
    }
</script>

edited Sep 23, 2011 at 15:58

answered Sep 23, 2011 at 15:10

AJC

1,8931 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Beginner Over a year ago

Is there a way if a user drops it down and selects an option it calls a function to go to the controller and then reload the page

AJC Over a year ago

@Beginner - Yeah, with ajax you can do this and update content without reloading the whole page. However, unless you are updating something from or to your underlying database, I recommend you use Javascript to update any values in your front end and save yourself the roundtrip.

AJC Over a year ago

@Beginner Updated it again... Added a hidden input so the value could travel back in your form post. And added Model.CartTotal to the totalValue prior to adding the shipping.

Beginner Over a year ago

when added this adds 10 or 20 to the end of the total. Does not add them together. so £120.00 becomes £120.0020

Collectives™ on Stack Overflow

How to dynamically alter a value in mvc3 html page

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related