JavaScript - if selected value of dropdownlist is......

Hi Experts,

I'm out of my skillset here so need some help, I have a small JavaScript function which I managed to cobble- together from examples found on the web:

<script type="text/javascript" language="javascript">
        function TryParseInt(str, defaultValue) {
            var retValue = defaultValue;
            if (str != null) {
                if (str.length > 0) {
                    if (!isNaN(str)) {
                        retValue = parseInt(str);
                    }
                }
            } return retValue;
        }

        function TryParseDecimal(str, defaultValue) {
            var retValue = defaultValue;
            if (str != null) {
                if (str.length > 0) {
                    if (!isNaN(str)) {
                        retValue = parseFloat(str);
                    }
                }
            } return retValue;
        }

        function VATcalc() {
           
            var qty = document.getElementById('<%=txtQuantity1.ClientID%>');
            var uc = document.getElementById('<%=txtUnitCost.ClientID%>');
            var rate = document.getElementById('<%=txtVATRate.ClientID%>');

            document.getElementById('<%=txtNetTotal.ClientID%>').value = TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0);
            document.getElementById('<%=txtVAT.ClientID%>').value = (TryParseDecimal(rate.value, 0.2) * (TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0)));
            document.getElementById('<%=txtTotal.ClientID%>').value = ((TryParseDecimal(rate.value, 0.2) * (TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0))) + (TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0)));
        }

    </script>

Open in new window


As you will see, I am using it to autopopulate some text boxes - it's calculating the VAT and gross based on net, VAT-rate and quantity. Works fine, very happy.

However due to an unforseen change I would now like to be able to add an if statement which looks at the value selected from a dropdownlist and based on that performs an alternative version of the function above. I can work out how to write the new function what I'm not sure how to do is say if dropdownlist value is xxxx. Is this straightforward ?? My alternative would be to add a checkbox and say if checked, but again I'm not sure how to write that either!

This is the dropdown:
<asp:DropDownList ID="DDLNominal" runat="server" DataSourceID="NominalTable" DataTextField="account_title"
                                            DataValueField="nominal">
                                        </asp:DropDownList>

Open in new window

The datasource is a SQL select.

Many thanks in advance.
forstersAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
should be pretty straight forward like:
var ddList = document.getElementById('<%=DDLNominal.ClientID%>');
var selectedValue= ddList .options[ddList .selectedIndex].value;

Open in new window


HTH
Rainer
forstersAuthor Commented:
Hi Rainer,

Oh great thank you, (obvious when you know how) I will give that a try now...
forstersAuthor Commented:
Hmm, I'm getting an error:
Unable to get value of the property 'options': object is null or undefined

any ideas?
Get Blueprints for Increased Customer Retention

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

forstersAuthor Commented:
Ah actually I think thats a timing thing, need a if (!Page.IsPostBack) equivalent...the DDL won't be populated at pageload, hmm in fact it's in a panel which only appears after a postback so...need a way of calling my JavaScript on the ddlSelectedItem Change maybe?
Rainer JeschorCommented:
Hi,
hm - its hard for me to understand the current logic without seeing/knowing your server side code.

And I think there are some typos in my code(blank spaces).

At the moment when you want to call your client side VATCalc function, the DDL is not yet existing / filled?
Perhaps you might want to check if the options exist first - if not run a default calculation ...

var ddList = document.getElementById('<%=DDLNominal.ClientID%>');
var selectedValue;
if (typeof ddList.options === undefined || null === ddList.options) {
  selectedValue = "XXX";
} else {
 selectedValue = ddList.options[ddList.selectedIndex].value;
}

Open in new window

forstersAuthor Commented:
Hi,

Thanks for this, the JavaScript function is part of an aspx page using c# for code behind, but I have the JavaScript code just in the head of my page. But the page contains numerous panels and update panels so on firstload none of the controls referred to in the JavaScript function are visible, they are all in the second panel which is only visible after a button_click event on the first. All the functionality for the page aside from this one piece of JavaScript is built in asp.net AJAX & C#.

See below:

 
<!------------  FIRST SCREEN STARTS HERE - SELECT SUPPLIER & SAVE ------------>
            <asp:Panel ID="PanelNewOrder" runat="server">
                <asp:PlaceHolder ID="holder1" Visible="true" runat="server">
                    <h2>Create New Order</h2>
                    <table>
                        <tr>
                            <td>Select Supplier:<br />
                                <br />
                            </td>
                            <td>
                                <asp:DropDownList ID="DDLSupplier" runat="server" DataSourceID="Supplier" DataTextField="SupplierName"
                                    DataValueField="SupplierID">
                                </asp:DropDownList>
                                <asp:SqlDataSource ID="Supplier" runat="server" ConnectionString="<%$ ConnectionStrings:Supplier %>"
                                    SelectCommand="SELECT * FROM [SupplierDetails] Order By SupplierName"></asp:SqlDataSource>
                                <br />
                                <br />
                            </td>
                        </tr>
                        <tr>
                            <td>Invoice No:<br />
                                <br />
                            </td>
                            <td>
                                <asp:TextBox ID="TxtInvoiceNo" runat="server" Width="300" />
                                <br />
                                <br />
                            </td>
                        </tr>
                        <tr>
                            <td>Invoice Date:<br />
                                <br />
                            </td>
                            <td>
                                <asp:TextBox ID="TxtInvoiceDate" runat="server" Width="300" />
                                <br />
                                <br />
                            </td>
                        </tr>
                        <tr>
                            <td>Invoice Total:<br />
                                <br />
                            </td>
                            <td>
                                <asp:TextBox ID="TxtInvoiceTotal" runat="server" Width="300" />
                                <br />
                                <br />
                            </td>
                        </tr>
                    </table>
                    <asp:Button ID="ButtonSave" runat="server" Text=" Save" OnClick="ButtonSave_Click" />
                </asp:PlaceHolder>
            </asp:Panel>
            <!----------------------  FIRST SCREEN CLOSES - HOLDER1 HIDDEN ----------------->
            <!-----------  SECOND SCREEN STARTS HERE - DETAILS VIEW OF NEWLY CREATED ORDER ---------->
            <!----------------------------- THE DETAILS VIEW - ORDER SUMMARY ------------------------>
            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                <ContentTemplate>
                    <asp:PlaceHolder ID="holder2" Visible="false" runat="server">
                        <h2>New Order</h2>
                        <asp:DetailsView ID="DVOrder" DataSourceID="OrderView" runat="server" Height="50px"
                            Width="525px" AutoGenerateRows="false" GridLines="None">
                            <Fields>
                                <asp:BoundField DataField="OrderID" HeaderText="Order Ref" ReadOnly="true" />
                                <asp:BoundField DataField="SupplierName" HeaderText="Supplier" ReadOnly="true" />
                                <asp:BoundField DataField="InvoiceNo" HeaderText="Invoice No." ReadOnly="true" />
                                <asp:BoundField DataField="InvoiceDate" HeaderText="Invoice Date" ReadOnly="true" />
                                <asp:BoundField DataField="OrderDate" HeaderText="Date Created" DataFormatString="{0:f}" HtmlEncode="false" ReadOnly="true" />
                                <asp:BoundField DataField="Creator" HeaderText="Created By" ReadOnly="true" />
                                <asp:BoundField DataField="InvoiceTotal" HeaderText="Invoice Total" ReadOnly="true" />
                            </Fields>
                        </asp:DetailsView>
                        <asp:Label ID="LabelTest" runat="server" />
                        <asp:Button ID="ButtonEdit" runat="server" Text="Edit" OnClick="ButtonEdit_Click" />
                        <asp:Button ID="ButtonDelete" runat="server" Text="Delete" OnClick="ButtonDelete_Click" />
                    </asp:PlaceHolder>
                </ContentTemplate>
            </asp:UpdatePanel>
            <!------------------------------THE GRID - SHOWS ITEMS ON ORDER------------------------->
            <!----------------------------INCLUDES FOOTER TEMPLATE TO ADD ITEMS--------------------->
            <asp:Panel ID="panel3" runat="server" Visible="false">
                <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <div id="formbg">
                            <table style="padding-top: -30px;">
                                <tr>
                                    <td>
                                        <h2>Add items to this order below:
                                        </h2>
                                    </td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>Item Description:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtItemDescription" runat="server" Width="300px"></asp:TextBox>
                                    </td>
                                    <br />
                                    <br />
                                </tr>
                                <tr>
                                    <td>Category:
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="DDLCategory" runat="server" DataSourceID="Category" DataTextField="Category"
                                            DataValueField="CategoryID">
                                        </asp:DropDownList>
                                    </td>
                                </tr>
                                <asp:SqlDataSource ID="Category" runat="server" ConnectionString="<%$ ConnectionStrings:Purchase %>"
                                    SelectCommand="SELECT * FROM [ItemTypes]"></asp:SqlDataSource>
                                <br />
                                <br />
                                <tr>
                                    <td>Nominal:
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="DDLNominal" runat="server" DataSourceID="NominalTable" DataTextField="account_title"
                                            DataValueField="nominal">
                                        </asp:DropDownList>
                                        <asp:SqlDataSource ID="Nominal" runat="server" ConnectionString="<%$ ConnectionStrings:Nominals %>"
                                            SelectCommand="GetITNominals" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
                                        <br />
                                        <br />
                                        <asp:SqlDataSource ID="NominalTable" runat="server" ConnectionString="<%$ ConnectionStrings:Purchase %>"
                                            SelectCommand="Select * FROM nominals"></asp:SqlDataSource>
                                    </td>
                                </tr>

                                <tr>
                                    <td>Unit cost:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtUnitCost" onchange="VATcalc();" runat="server" Width="200px"></asp:TextBox><br />
                                        <br />
                                    </td>
                                </tr>
                                <tr>
                                    <td>Quantity - Set to 1 for Fixed Assets:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtQuantity1" onchange="VATcalc();" runat="server" Width="40px"></asp:TextBox><br />
                                        <br />
                                    </td>
                                </tr>
                                <tr>
                                    <td>Net total (per item):
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtNetTotal" runat="server" Width="200px"></asp:TextBox><br />
                                        <br />
                                    </td>
                                </tr>
                                <tr>
                                    <td>VAT Rate:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtVATRate" onchange="VATcalc();" runat="server" Text="0.2" TextMode="SingleLine" ReadOnly="false" Width="200px"></asp:TextBox><br />
                                        <br />
                                    </td>
                                </tr>
                                <tr>
                                    <td>VAT (per item):
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtVAT" runat="server" Width="200px"></asp:TextBox><br />
                                        <br />
                                    </td>
                                </tr>
                                <tr>
                                    <td>Total (per item):
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtTotal" runat="server" Width="200px"></asp:TextBox><br />
                                        <br />
                                    </td>
                                </tr>
                                <tr>
                                    <td>Quantity - always set to actual quantity:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtQuantity" runat="server" Width="40px"></asp:TextBox><br />
                                        <br />
                                    </td>
                                </tr>
                            </table>
                            <asp:Button ID="ButtonSaveItem" runat="server" Text="Add" OnClick="ButtonSaveItem_Click" />
                            <asp:Button ID="ButtonSaveItems" runat="server" Text="Add Fixed Asset" OnClick="ButtonSaveItems_Click" />
                        </div>
                        <br />

Open in new window


In the code behind Pahe_Load event the following exists:

 
if (Request.QueryString["OrderID"] != null)
        {
            Session["OrderID"] = Request.QueryString["OrderID"];
            holder1.Visible = false;
            holder2.Visible = true;
            panel3.Visible = true;
            holder4.Visible = true;
        }

Open in new window



Hope that makes sense, I can understand your suggestion above but I can't set a default in this case.
forstersAuthor Commented:
Ahhh Sorry, newbie mistake I had added the code you gave me originally outside of my main JS function - so of course it runs on pageload not when called.

Hmm so I don't get an error now but I must have got something wrong as the calc no longer seems to respond, can you tell me if I have the right syntax...

 <script type="text/javascript" language="javascript">
        function TryParseInt(str, defaultValue) {
            var retValue = defaultValue;
            if (str != null) {
                if (str.length > 0) {
                    if (!isNaN(str)) {
                        retValue = parseInt(str);
                    }
                }
            } return retValue;
        }

        function TryParseDecimal(str, defaultValue) {
            var retValue = defaultValue;
            if (str != null) {
                if (str.length > 0) {
                    if (!isNaN(str)) {
                        retValue = parseFloat(str);
                    }
                }
            } return retValue;
        }

        function VATcalc() {
        var ddList = document.getElementById('<%=DDLNominal.ClientID%>');
        var selectedValue = ddList.options[ddList.selectedIndex].value;

           if (selectedValue = 84001.0001) {
                var qty = 1;
                var uc = document.getElementById('<%=txtUnitCost.ClientID%>');
                var rate = document.getElementById('<%=txtVATRate.ClientID%>');

                document.getElementById('<%=txtNetTotal.ClientID%>').value = TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0);
                document.getElementById('<%=txtVAT.ClientID%>').value = (TryParseDecimal(rate.value, 0.2) * (TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0)));
                document.getElementById('<%=txtTotal.ClientID%>').value = ((TryParseDecimal(rate.value, 0.2) * (TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0))) + (TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0)));
            }
else {

            function VATcalc() {

     var qty = document.getElementById('<%=txtQuantity1.ClientID%>');
     var uc = document.getElementById('<%=txtUnitCost.ClientID%>');
     var rate = document.getElementById('<%=txtVATRate.ClientID%>');

     document.getElementById('<%=txtNetTotal.ClientID%>').value = TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0);
     document.getElementById('<%=txtVAT.ClientID%>').value = (TryParseDecimal(rate.value, 0.2) * (TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0)));
     document.getElementById('<%=txtTotal.ClientID%>').value = ((TryParseDecimal(rate.value, 0.2) * (TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0))) + (TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0)));
 }

        
        }


            }

    </script>

Open in new window

Rainer JeschorCommented:
Hi,
there are a couple of typos in the script:
First you assigen a value to the variable (=) instead of checking it (==), second the value will probably be of type string.
Second you should/cannot have a function keyword inside the else case.

Adjusted function:
function VATcalc() {
	var ddList = document.getElementById('<%=DDLNominal.ClientID%>');
	var selectedValue = ddList.options[ddList.selectedIndex].value;

	if (selectedValue == '84001.0001') {
		var qty = 1;
		var uc = document.getElementById('<%=txtUnitCost.ClientID%>');
		var rate = document.getElementById('<%=txtVATRate.ClientID%>');

		document.getElementById('<%=txtNetTotal.ClientID%>').value = TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0);
		document.getElementById('<%=txtVAT.ClientID%>').value = (TryParseDecimal(rate.value, 0.2) * (TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0)));
		document.getElementById('<%=txtTotal.ClientID%>').value = ((TryParseDecimal(rate.value, 0.2) * (TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0))) + (TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0)));
	}
	else {
		var qty = document.getElementById('<%=txtQuantity1.ClientID%>');
		var uc = document.getElementById('<%=txtUnitCost.ClientID%>');
		var rate = document.getElementById('<%=txtVATRate.ClientID%>');

		document.getElementById('<%=txtNetTotal.ClientID%>').value = TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0);
		document.getElementById('<%=txtVAT.ClientID%>').value = (TryParseDecimal(rate.value, 0.2) * (TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0)));
		document.getElementById('<%=txtTotal.ClientID%>').value = ((TryParseDecimal(rate.value, 0.2) * (TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0))) + (TryParseInt(qty.value, 1) * TryParseDecimal(uc.value, 0)));
	}
 }

Open in new window


HTH
Rainer

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
forstersAuthor Commented:
Ahh yes thats perfect, thank you very much.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.