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:
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:
Many thanks in advance.
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>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>Many thanks in advance.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hmm, I'm getting an error:
Unable to get value of the property 'options': object is null or undefined
any ideas?
Unable to get value of the property 'options': object is null or undefined
any ideas?
ASKER
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?
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 ...
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;
}ASKER
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:
In the code behind Pahe_Load event the following exists:
Hope that makes sense, I can understand your suggestion above but I can't set a default in this case.
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 />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;
}Hope that makes sense, I can understand your suggestion above but I can't set a default in this case.
ASKER
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...
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>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Ahh yes thats perfect, thank you very much.
ASKER
Oh great thank you, (obvious when you know how) I will give that a try now...