hi im new to javascript and im attempting it for the first time. im using framework 4.5, asp.net, c#. i need help in with the javascript.
i need calculate quotation and display the information. heres my code so far
model.cs
public class QuotationView
{
[Display(Name = "Pickup Address")]
[Required(ErrorMessage = "Pickup Address is required")]
[StringLength(50, ErrorMessage = "First name cannot be longer than 50 characters.")]
public string PickupDestination { get; set; }
[Display(Name = "Drop-off Address")]
[Required(ErrorMessage = "Dropoff Address is required")]
[StringLength(50, ErrorMessage = "Surname cannot be longer than 50 characters.")]
public string DropoffDestination { get; set; }
[Display(Name = "Kilometres")]
[Required(ErrorMessage = "Kilometres is required")]
[StringLength(50, ErrorMessage = "Kilometres cannot be longer than 50 characters.")]
public int Kilometres { get; set; }
[Display(Name = "Customers Name")]
[Required(ErrorMessage = "Customers Name is required")]
[StringLength(50, ErrorMessage = "Customers Name cannot be longer than 50 characters.")]
public string CustomersName { get; set; }
[Required(ErrorMessage = "Load Type is required")]
[Display(Name = "Type of goods")]
[StringLength(50, ErrorMessage = "Load Type cannot be longer than 50 characters.")]
public string LoadType { get; set; }
[Required(ErrorMessage = "Quantity is required")]
[Range(0, 500, ErrorMessage = "Must not exceed 500")]
public int Quantity { get; set; }
public bool Insurance { get; set; }
}
}
Quotation.chtml
<h2>Quotation</h2>
<div class="form-horizontal">
<h4>Quotation</h4>
<hr />
<div class="row">
<div class="col-md-6">
<div class="form-group">
@Html.LabelFor(model => model.PickupDestination, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.PickupDestination, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.PickupDestination, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.DropoffDestination, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.DropoffDestination, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.DropoffDestination, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Kilometres, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Kilometres, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Kilometres, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.CustomersName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.CustomersName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.CustomersName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.LoadType, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.LoadType, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LoadType, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Quantity, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Quantity, "", new { @class = "text-danger" })
</div>
</div>
<form action="form-group" method="get">
<input type="checkbox" name="IncludeInsurance" value="includeInsurance"> Include Insurance <br>
</form>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div>
<button id="Calculate" type="button" onclick="calculate;">Calculate Quote</button>
</div>
<button id ="test" onclick="test();">test</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
"display info here"
</div>
</div>
<div>
@Html.ActionLink("List", "Home")
</div>
<script src="~/Scripts/jquery.js"></script>
<script>
Quotation.js
function getQuantity() {
var theForm = document.forms["form"];
var quantity = theForm.elements["Quantity"];
var howmany = 0;
if (quantity.value != "") {
howmany = parseInt(PickUpDestination.value);
}
return howmany;
}
function InsurancePrice() {
var InsurancePrice = 0;
var theForm = document.forms["form"];
var includeInclude = theForm.elements["includeInsurance"];
if (includeInsurance.checked == true) {
InsurancePrice = 1000;
}
return InsurancePrice;
}
function getCalculate() {
var kilometres = "",
fuelCost = 13,
wearAndTear = 5000,
labourCost = 10000,
additionals = 5000;
var QuotationPrice = (kilometres() * fuelCost()) + wearAndTear() + labourCost() + additionals();
document.getElementById('Calculate').innerHTML =
"Total Quotation Price" + QuotationPrice;
}
