I have a DropDownList called ShippingList and when a value is selected, I want to pass that value into the variable simpleCart.shippingFlatRate. I tried creating a var and getting the selected value and then passing that var, but for some reason var shipList remains null (Firebug console). I am new to asp.net and this is my first time using javascript, so I'm kinda stuck, is this even the simplest/easiest way of passing the value?

<script type=text/javascript>

    simpleCart.email = [email protected];

    simpleCart.currency = EUR;

    simpleCart.cartHeaders = [Name_noHeader, Price_noHeader, increment_noHeader, Quantity_input_noHeader, decrement_noHeader_noHeader, Remove_noHeader, Total_noHeader];

    var shipList = document.getElementById('<%=ShippingList.ClientID%>');

    var shipCost = shipList.options[shipList.selectedIndex].value;

    simpleCart.shippingFlatRate = shipCost;

</script>

EDIT all the markup:

    <%@ Page Title= Language=C# MasterPageFile=~/Standardmaster.Master AutoEventWireup=true CodeBehind=WebShop.aspx.cs Inherits=PetShopParadise.Customer_Pages.WebShop %>

<asp:Content ID=Content1 ContentPlaceHolderID=head runat=server>

</asp:Content>

<asp:Content ID=Content2 ContentPlaceHolderID=mainContent runat=server>







<script type=text/javascript src=/simpleCart.js></script>





    <h2>

        Welcome to the Web Shop of 

        <asp:Label ID=Label1 runat=server Text=Label></asp:Label>

        !</h2>



    <asp:SqlDataSource ID=SqlDataSource2 runat=server 

        ConnectionString=<%$ ConnectionStrings:PetShopParadiseConnectionString %> 

        SelectCommand=SELECT [Name] FROM [Vendors] WHERE ([VendorID] = @VendorID)>

        <SelectParameters>

            <asp:QueryStringParameter Name=VendorID QueryStringField=VendID 

                Type=Decimal />

        </SelectParameters>

    </asp:SqlDataSource>

    <asp:GridView ID=ProductsGrid runat=server AllowSorting=True 

        DataSourceID=SqlDataSource1 AutoGenerateColumns=False DataKeyNames=ProductID >

        <Columns>

            <asp:BoundField DataField=ProductID HeaderText=ProductID 

                SortExpression=ProductID InsertVisible=False ReadOnly=True />

            <asp:BoundField DataField=Name HeaderText=Name SortExpression=Name />

            <asp:BoundField DataField=Type HeaderText=Type 

                SortExpression=Type />

            <asp:BoundField DataField=Description HeaderText=Description 

                SortExpression=Description />

            <asp:BoundField DataField=Price HeaderText=Price SortExpression=Price />

            <asp:TemplateField HeaderText=Image>

            <ItemTemplate>

            <a href=javascript:void(window.open('<%# /FullImage.ashx?ProductID=+ Eval(ProductID)%>','_blank','toolbar=no,menubar=no')) > <asp:Image ID=Image1 runat=server ImageUrl='<%# /Thumbnails.ashx?ProductID=+ Eval(ProductID)  %>'/> </a>

            </ItemTemplate>

            </asp:TemplateField>

            <asp:TemplateField>

            <ItemTemplate>

            <a href=javascript:; onclick=simpleCart.add( 'name=<%# Eval(Name) %>' , 'price=<%# Eval(Price) %>' , 'quantity=1' );>Add To Cart</a>

            </ItemTemplate>

            </asp:TemplateField>

        </Columns>

    </asp:GridView>



    <br />



    <br />

    <div id=LocationDetails>

        <asp:Label ID=Label2 runat=server Text=Choose Location></asp:Label><asp:DropDownList

            ID=ShippingList runat=server 

            onselectedindexchanged=ShippingList_SelectedIndexChanged 

            AutoPostBack=True>

            <asp:ListItem Value=5 Text=Europe></asp:ListItem>

            <asp:ListItem Value=10>Asia</asp:ListItem>

            <asp:ListItem Value=8>America</asp:ListItem>

            <asp:ListItem Value=12>Africa</asp:ListItem>

            <asp:ListItem Value=15>Rest of the World</asp:ListItem>

        </asp:DropDownList>







 <script type=text/javascript>

        simpleCart.email = [email protected];

        simpleCart.currency = EUR;

        simpleCart.cartHeaders = [Name_noHeader, Price_noHeader, increment_noHeader, Quantity_input_noHeader, decrement_noHeader_noHeader, Remove_noHeader, Total_noHeader];

        var shipList = document.getElementById('<%=ShippingList.ClientID%>');

        var shipCost = shipList.options[shipList.selectedIndex].value;

        simpleCart.shippingFlatRate = shipCost;

    </script>



        <br />

        <asp:Label ID=Label3 runat=server Text=Shipping Cost></asp:Label>

        <asp:TextBox

            ID=ShippingCostBox runat=server></asp:TextBox>



    </div>



    <div id=cartTotal>

    <strong>Total: </strong> <span class=simpleCart_total></span></div>



    <div class=simpleCart_items></div>



    <div class=CartOptions><a href=javascript:; class=simpleCart_checkout>Checkout</a>

    <a href=javascript:; class=simpleCart_empty>Empty</a></div>   







    <asp:SqlDataSource ID=SqlDataSource1 runat=server 

        ConnectionString=<%$ ConnectionStrings:PetShopParadiseConnectionString %> 



        SelectCommand=SELECT [ProductID], [Name], [Type], [Description], [Price], [Image] FROM [Products] WHERE ([VendorIDF] = @VendorIDF) 

        OldValuesParameterFormatString=original_{0} 

        ConflictDetection=CompareAllValues >



        <SelectParameters>





            <asp:QueryStringParameter Type=Int32 

            Name=VendorIDF 

            QueryStringField=VendID />



        </SelectParameters>



    </asp:SqlDataSource>





</asp:Content>

<asp:Content ID=Content3 ContentPlaceHolderID=bannerContent runat=server>

</asp:Content>