What I'm doing right now is to fetch values by their id in J Query and it is working fine.
But to do this I have to assign every control different id's (Duplicate Id does not give result on second row) .
JS
$('#Qty,#Price,#Disc').on('input', function () {
var val1 = Number($('#Qty').val());
var val2 = Number($('#Price').val());
var val3 = isNaN(Number($('#Disc').val())) ? 0 : Number($('#Disc').val());
var total = isNaN(val1 * val2) ? 0 : (val1 * val2);
$('#TotalAmount').val(total - (total * (val3 / 100)));
$('#NetAmt').val($('#TotalAmount').val());
});
$('#Qty1,#Price1,#Disc1').on('input', function () {
var val1 = Number($('#Qty1').val());
var val2 = Number($('#Price1').val());
var val3 = isNaN(Number($('#Disc1').val())) ? 0 : Number($('#Disc1').val());
var total = isNaN(val1 * val2) ? 0 : (val1 * val2);
$('#TotalAmount1').val(total - (total * (val3 / 100)));
$('#NetAmt').val(Number($('#TotalAmount').val()) + Number($('#TotalAmount1').val()));
});
RAZOR
<div style="padding:10px" class="row">
<div class="left">
#Html.EditorFor(model => model.a, new { htmlAttributes = new { Type = "Text", placeholder = "ProductName" } })
</div>
<div class="left">
#Html.EditorFor(model => model.b, new { htmlAttributes = new { id = "Qty", Type = "Text", placeholder = "Qty" } })
</div>
<div class="left">
#Html.EditorFor(model => model.c, new { htmlAttributes = new { id = "Price", Type = "Text", placeholder = "Price" } })
</div>
<div class="left">
#Html.EditorFor(model => model.d, new { htmlAttributes = new { id = "Disc", Type = "Text", placeholder = "Discount" } })
</div>
<div class="left">
#Html.EditorFor(model => model.e, new { htmlAttributes = new { id = "TotalAmount", Type = "Text", placeholder = "Total Amount" } })
</div>
<div class="left">
#Html.EditorFor(model => model.f, new { htmlAttributes = new { Type = "Text", placeholder = "Remarks" } })
</div>
</div>
<div style="padding:10px" class="row">
<div class="left">
#Html.EditorFor(model => model.a, new { htmlAttributes = new { Type = "Text", placeholder = "ProductName" } })
</div>
<div class="left">
#Html.EditorFor(model => model.b, new { htmlAttributes = new { id = "Qty1", Type = "Text", placeholder = "Qty" } })
</div>
<div class="left">
#Html.EditorFor(model => model.c, new { htmlAttributes = new { id = "Price1", Type = "Text", placeholder = "Price" } })
</div>
<div class="left">
#Html.EditorFor(model => model.d, new { htmlAttributes = new { id = "Disc1", Type = "Text", placeholder = "Discount" } })
</div>
<div class="left">
#Html.EditorFor(model => model.e, new { htmlAttributes = new { id = "TotalAmount1", Type = "Text", placeholder = "Total Amount" } })
</div>
<div class="left">
#Html.EditorFor(model => model.f, new { htmlAttributes = new { Type = "Text", placeholder = "Remarks" } })
</div>
</div>
What I've tried before is to change id to #class on my RAZOR Page 'ClassName' without numeric identifier (Example id = Qty and id = qty1 changed to #class=Qty).
JS
$('.row').each(function(){
$('.Qty,.Price,.Disc').on('input', function () {
var val1 = Number($('.Qty').val());
var val2 = Number($('.Price').val());
var val3 = isNaN(Number($('.Disc').val())) ? 0 : Number($('.Disc').val());
var total = isNaN(val1 * val2) ? 0 : (val1 * val2);
});
$('.TotalAmount1').val(total - (total * (val3 / 100)));
$('.NetAmt').val(Number($('.TotalAmount').val()));
});
Kindly guide me.
Basic Concept of Sum of row is like this , use your logic and implement
sum =0;
$('.row').each(function(e){
sum +=parseInt($($('.row')[e]).html());
})
console.log(sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="order_table">
<tr>
<th>NAME</th>
<th>value</th>
<tr>
<tr>
<td>John</td>
<td class='row'>123</td>
<tr>
<tr>
<td>Harry</td>
<td class='row'>23</td>
<tr>
</table>
Update :
$('tr').each(function () {
var sum = 0
$(this).find('.row').each(function () {
var row = $(this).text();
sum += parseFloat(row);
console.log(sum);
});
$('.result', this).val(sum);
})
https://jsfiddle.net/bo4g76ra/4/
I've Done this way.
$("#ProData").on("keyup", ".Qty,.Disc,.Price,.Cell", function (e) {
e.preventDefault();
var Qty = Number($(this).parent().find('.Qty').val());
var Price = Number($(this).parent().find('.Price').val());
var Disc = Number($(this).parent().find('.Disc').val());
var TWDisc = isNaN(Qty * Price) ? 0 : (Qty * Price);
var Total = (TWDisc - (TWDisc * (Disc / 100)))
$(this).parent().find('.TotalAmount').val(Total);
var sum = 0;
$(".TotalAmount").each(function () {
sum += +$(this).val();
});
$("#NetAmt").val(sum);
});
Related
How can I set mask on date fields, date from and date to.
Here is my code below
<div class="col-md-6">
Year_from
#Html.TextBoxFor(model => model.yfrom, new { #class = "form-control", maxlength = "10", minlength="4" })
</div>
<div class="col-md-6">
Year_to
#Html.TextBoxFor(model => model.yto, new { #class = "form-control", maxlength = "10", minlength = "4" })
</div>
<script>
jQuery(function ($) {
$("#yfrom").mask("99.99.9999");
$("#yto").mask("99.99.9999");
});
var v = this.value;
if (v.match(/^\d{2}$.) !== null) {
this.value = v + '.';
} else if (v.match(/^\d{2}\/\d{2}$.) !== null) {
this.value = v + '.';
}
</script>
</div>
I tried to include jQuery function to this, but still not working, I need something that would show error on date field when someone input wrong values in first field and switch to another one.
I try to set readonly fields for specific lines where "sth" is set in select box
the code is executed when the page is loaded / at the start of the form
i tried:
.js file
$(document).ready(function () {
$(".ecp-row").each(function () {
var start = $(this).find(".start");
var end = $(this).find(".end");
var hours = $(this).find(".gethours");
var selectboxlist = $(this).find(".selectboxlist").eq(0).val();
if (selectboxlist === "sth") {
alert("test"); // it works
start.readOnly = true; // it doesnt work
end.readOnly = true; // it doesnt work
hours.readOnly = true; // it doesnt work
}
});
});
html
#for (int nr_rows = 0; nr_rows < #ViewBag.sthelse; nr_rows++)
{
<tr class="ecp-row">
<td id="td3" >#Html.TextBoxFor(m => m.Model7[nr_rows].a, new { #class = "start"})</td>
<td id="td4" >#Html.TextBoxFor(m => m.Model7[nr_rows].b, new { #class = "end" })</td>
<td id="td5" >#Html.TextBoxFor(m => m.Model7[nr_rows].c, new { #class = "gethours" })</td>
<td id="td6" >#Html.DropDownListFor(m => m.Model7[nr_rows].sth, new SelectList(Enum.GetValues(typeof(sth))), " ", new { #class = "selectboxlist" })</td>
</tr>
}
As stated in the comment, you problem is that you are trying to execute javascript code on a jquery object.
You can either use start[0].readOnly = true; or start.attr("readOnly","true");
Demo
$(document).ready(function() {
$(".ecp-row").each(function() {
var start = $(this).find(".start");
alert("test"); // it works
//start[0].readOnly = true;
start.attr("readOnly","true");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="ecp-row">
<td id="td3"><input class="start" /></td>
</tr>
</tbody>
</table>
If you want to change readonly,you can use prop or attr:
prop:
var start = $(this).find(".start");
start.prop("readonly", true);
attr:
var gethours = $(this).find(".gethours");
gethours.attr("readonly", true);
And here's the difference between them.
demo:
#for (int nr_rows = 0; nr_rows < #ViewBag.sthelse; nr_rows++)
{
<tr class="ecp-row">
start<td id="td3">#Html.TextBoxFor(m => m.Model7[nr_rows].a, new { #class = "start" })</td>
end<td id="td4">#Html.TextBoxFor(m => m.Model7[nr_rows].b, new { #class = "end" })</td>
gethours<td id="td5">#Html.TextBoxFor(m => m.Model7[nr_rows].c, new { #class = "gethours" })</td>
</tr>
}
#section scripts{
<script>
$(function () {
var start = $(this).find(".start");
start.prop("readonly", true);
var gethours = $(this).find(".gethours");
gethours.attr("readonly", true);
})
</script>
}
result:
your are setting readonly property to true wrongly try instead jquery attr() method
var start = $(this).find(".start");
start.attr("readOnly","true");// set readonly to true
In the form I have a kendo MultiSelect that allows you to select several add-ons to your order. After selecting, I want to show the price of the add-on but somehow I do not.
The value of the selected add-on is displayed without any problem, the problem occurs when I want to display the price it needs to get with GET from the controller.
The method in the controller returns an int value.
Could someone direct me in the right direction?
function onChange(e) {
var multiselect = $("#accessoriesCombo").data("kendoMultiSelect");
var accessoriesLabel = $("#accessoriesLabel");
var startDate = $("#rentStartPicker").data("kendoDateTimePicker").value();
var endDate = $("#rentEndPicker").data("kendoDateTimePicker").value();
var diffDay;
if (calculate(startDate, endDate) < 1) {
diffDay = calculate(startDate, endDate) + 1;
} else {
diffDay = calculate(startDate, endDate);
}
var textValues = "";
var arrayValues = this.value();
var total = 0;
arrayValues.forEach(function (item) {
textValues += item;
total += getPrice(item, diffDay);
});
accessoriesLabel.text(textValues + " (" + total + ")");
}
function getPrice(id, numberOgDays) {
var returnPrice = 0;
// return int Accessories Price
$.get('/Cars/GetAccessoriesPrice/?id=' + id + '&numberOfDays=' + numberOgDays, function (price) {
returnPrice = price;
return returnPrice;
}, 'json');
}
function calculate(first, second) {
var diff = Math.round((second - first) / 1000 / 60 / 60 / 24);
return diff;
}
<div class="select-vehicle" style="padding-top:10px">
#(Html.Kendo().MultiSelect().Name("accessoriesCombo").DataValueField("AccessoriesID").DataTextField("AccessoriesName")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Accessories_Read", "Cars");
});
})
.HtmlAttributes(new { #style = "width:100%" })
.Placeholder("Volitelné příslušenství")
.AutoClose(false)
.Events(events =>
{
events.Change("onChange");
})
)
<script type="text/x-kendo-tmpl" id="accessoriesTemplate">
<div style="padding: 5px; vertical-align:middle">
<p>
<input type="checkbox" style="vertical-align:text-bottom" id="chb_accessories_#:AccessoriesID#" value="#:AccessoriesID#" /><label for="chb_accessories_#:AccessoriesID#" style="padding-left:5px"> #:AccessoriesName#</label>
<span style="font-size:12px; padding-left:5px">cena od: #:kendo.toString(data.LowestPrice, "c0", "cs-CZ")# / den</span>
</p>
</div>
</script>
</div>
I am very new to javascript and jQuery. In my view, I have a List of QuoteDetails, as follows:
<div class="col-md-10" id="QuoteDetails">
#for (int i = 0; i < Model.QuoteDetail.Count; i++)
{
<div id="row">
#Html.HiddenFor(model => model.QuoteDetail[i].QuoteId, new { htmlAttributes = new { #class = "form-control" } })
#Html.HiddenFor(model => model.QuoteDetail[i].QuoteDetailId, new { htmlAttributes = new { #class = "form-control" } })
#Html.EditorFor(model => model.QuoteDetail[i].ProductId, new { htmlAttributes = new { #id = "PId", #class = "form-control", style = "width: 75px" } })
#Html.EditorFor(model => model.QuoteDetail[i].ProductName, new { htmlAttributes = new { #id = "Product", #class = "form-control", style = "width: 300px" } })
#Html.EditorFor(model => model.QuoteDetail[i].Amount, new { htmlAttributes = new { #class = "form-control", style = "width: 95px" } })
#Html.EditorFor(model => model.QuoteDetail[i].ListPrice, new { htmlAttributes = new { #id = "Lprice", #class = "form-control", style = "width: 95px" } })
#Html.EditorFor(model => model.QuoteDetail[i].Discount, new { htmlAttributes = new { #class = "form-control", style = "width: 100px" } })
#Html.EditorFor(model => model.QuoteDetail[i].Price, new { htmlAttributes = new { #id = "Pr", #class = "form-control", style = "width: 100px" } })
#Html.ValidationMessageFor(model => model.QuoteDetail, "", new { #class = "text-danger" })
}
When either the Amount or Discount is changed by the user, I want to recalculate the Price. I am trying to solve it with the following javascript/jQuery:
<script type="text/javascript">
$(document).ready(function () {
var quoteDetails = $('[name*="QuoteDetailId"]');
var amounts = $('[id*="Amount"]')
var discounts = $('[id*="Discount"]')
var prices = $('[id*="Price"]')
var listPrices = $('[id*="LPrice"]')
for (var i = 0; i < quoteDetails.length; i++) {
$(document).on("change", discounts[i], amounts[i], function calculate() {
var finalPrice = $(amounts[i]).val() * ($(listPrices[i]).val() * ((100 - $(discount[i]).val()) / 100))
$(prices[i]).val(finalPrice);
});
};
});
</script>
Is there a way to use variables with indices as jQuery selectors in the document.on change? Any help will be much appreciated.
Give your elements class names, e.g
#Html.EditorFor(m=> m.QuoteDetail[i].Amount, new { htmlAttributes = new { #class = "form-control amount"} })
and change the container to <div class="row">
(ditto for discount, listprice and price)
Then your script becomes
$('.amount, .discount').change(function() {
// Get container
var row = $(this).closest('.row');
// Get values
var amount = Number(row.find('.amount').val());
var listprice = Number(row.find('.listprice').val());
var discount = Number(row.find('.discount').val());
// Validate
if (isNaN(amount) || isNaN(listprice) || isNaN(discount))
{
return; // may want to display an error message?
}
// Calculate
var finalPrice = amount * listprice * ((100 - discount) / 100)
// Update
row.find('.price').val(finalPrice);
})
A few things to note:
Duplicate id attributes are invalid html - remove all your new {
#id = ".." code.
Because of your class names, you can now style the widths - e.g.
.price { width: 95px; }
Convert the values to a Number and check
that the value is valid using isNaN before doing the calculation
Since Price is a calculated field, it should not be editable in the
view (or have a setter in the model. Use a <div> or similar
element to display it (and then use
row.find('.price').text(finalPrice); to set it
Note also that .on() is not necessary unless your dynamically adding those elements after the view has been first generated.
I would like to choose an option from the dropdown menu and based on the selected option automaticly set the value in the second input field.
Like this:
I created javascript code but its not working properly.
$(function () {
$("#artikel").keyup(function (e) {
var val1 = $("#artikel").val(),
result = "";
if (val1.match = "Spletna aplikacija")
result = 5;
if (val1.match = "Namizna aplikacija")
result = 10;
if (val1.match = "Mobilna aplikacija")
result = 13;
if (val1.match = "Spletna stran")
result = 20;
$("#cena").val(result);
});
});
Here is my .cshtml file (partial):
<div class="form-group">
#Html.LabelFor(model => model.artikel, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.artikel, new SelectList(new[] { String.Empty, "Spletna aplikacija - 5€", "Namizna aplikacija - 10€", "Mobilna aplikacija - 13€", "Spletna stran - 20€" } ))
#Html.ValidationMessageFor(model => model.artikel, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.cena, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.cena, new { htmlAttributes = new { #class = "#artikel" } })
#Html.ValidationMessageFor(model => model.cena, "", new { #class = "text-danger" })
</div>
</div>
And my controler POST Code:
public ActionResult Create()
{
ViewBag.zapStDoumenta_tk = new SelectList(db.dokumentGlava, "zapStDokumenta", "kodaRacuna");
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "zapStPostavke,artikel,kolicina,zapStDoumenta_tk,cena,popust,davek,znesek")] postavkaDokumenta postavkaDokumenta)
{
if (ModelState.IsValid)
{
db.postavkaDokumenta.Add(postavkaDokumenta);
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.zapStDoumenta_tk = new SelectList(db.dokumentGlava, "zapStDokumenta", "kodaRacuna", postavkaDokumenta.zapStDoumenta_tk);
return View(postavkaDokumenta);
}
Can you guys plase help me, what im doing wrong?
Much thanks!
Your function should be like below
$(function () {
$("#artikel").change(function (e) {
var val1 = $("#artikel").val(),
result = "";
if (val1 == "Spletna aplikacija - 5€")
result = 5;
if (val1 == "Namizna aplikacija - 10€")
result = 10;
if (val1 == "Mobilna aplikacija - 13€")
result = 13;
if (val1 == "Spletna stran - 20€")
result = 20;
$("#cena").val(result);
});
});
Based on you cshtml , i have tried to create a sample html. You can use the below code which match the value of the option with the current value of the select.
$(function() {
$("#artikel").change(function(e) {
var val1 = $("#artikel").val(),
result = "";
if (val1.match("Spletna aplikacija") != null)
result = 5;
if (val1.match("Namizna aplikacija") !== null)
result = 10;
if (val1.match("Mobilna aplikacija") !== null)
result = 13;
if (val1.match("Spletna stran") !== null)
result = 20;
$("#cena").val(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label>Artikel</label>
<div class="col-md-10">
<select id="artikel">
<option "">Select</option>
<option "Spletna aplikacija - 5€">Spletna aplikacija - 5€</option>
<option "Namizna aplikacija - 10€">Namizna aplikacija - 10€</option>
<option "Mobilna aplikacija - 13€">Mobilna aplikacija - 13€</option>
<option "Spletna stran - 20€">Spletna stran - 20€</option>
</select>
</div>
</div>
<div class="form-group">
<label>Cena</label>
<div class="col-md-10">
<input id="cena" value="">
</div>
</div>
Change your javascript code as mentioned bellow.
$(function () {
$("#artikel").change(function () {
var val1 = $(this).val();
var result = "";
switch (val1) {
case "Spletna aplikacija - 5€":
result = 5;
break;
case "Namizna aplikacija - 10€":
result = 10;
break;
case "Mobilna aplikacija - 13€":
result = 13;
break;
case "Spletna stran - 20€":
result = 20;
break;
}
$("#cena").val(result);
});
});