I have a series of input boxes in a table with some number of dynamically generated rows as such:
<table id="someDataTable">
<tbody>
<tr>
<td >Some Title</td>
<td >Units</td>
<td >Val/Unit</td>
<td >Value</td>
</tr>
<tr>
<td><input type="text" size="30" /></td>
<td><input type="text" size="14" class="units commas"/></td>
<td><input type="text" size="14" class="value commas"/></td>
<td><input type="text" size="14" readonly="readonly" class="autoTotal"/></td>
</tr>
...
</tbody>
</table>
Now, I have a blur() call to add commas every time an input box is exited to add commas with the nifty Number Formatter plugin, and it simply does this:
<script>
$(".commas").blur(function () {
$(this).parseNumber({ format: "#,###", locale: "us" });
$(this).formatNumber({ format: "#,###", locale: "us" });
});
</script>
And it works beautifully. Now, on the other side, I also have a chunk of code that does the form math automatically on every keystroke. It has a call in initialize() that looks like this:
$(document).on('keyup', '#someDataTable', DoCalculations);
The function it invokes looks like this:
function DoCalculations() {
$(this).find('tr').each(function () {
var tUnits = $(this).find('.units').val();
var tValue = $(this).find('.value').val();
$(this).find('.autoTotal').val(Math.round(tUnits * tValue));
});
}
--
Now, my problem: I need to be able to rip out the commas to do the calculations. I was hoping to be able to use NumberFormatter's parseNumber() function to do this, but it was having a small fit. This was the alternate code in DoCalculations to attempt to accomplish that:
function DoCalculations() {
$(this).find('tr').each(function () {
var tTotal;
var tUnits = $(this).find('.units').val();
var tValue = $(this).find('.value').val();
tUnits = $.parseNumber(tUnits, { format: "#,###", locale: "us" });
tValue = $.parseNumber(tValue, { format: "#,###", locale: "us" });
tTotal = tUnits * tValue;
tTotal = $.formatNumber(tTotal, { format: "#,###", locale: "us" });
$(this).find('.autoTotal').val(tTotal);
});
}
But it comes back with a runtime error in NumberFormatter.js, where it cannot get the property of numberString.indexOf of undefined or null reference. Line 442 to be exact. I'm not sure why though. I originally thought it was because there were empty input boxes, but that turned out to not matter.
At the end of the day, I need to strip out commas.
Removing characters is something that regular expressions excel at:
var tValue = parseFloat($(this).find('.value').val().replace(/,/g, ''));
UPDATE
If val() can be null/undefined, you can add a check like this:
var tValue = $(this).find('.value').val();
tValue = tValue ? parseFloat(tValue.replace(/,/g, '')) : 0;
Related
<tbody id="dailysale_tbody">
<tr class="items">
<td><select id="items_select" name="dailysale[luitem_id]"><option value=""></option></select></td>
<td><select id="brands_select" name="dailysale[lubrand_id]"><option value=""></option></select></td>
<td><select id="models_select" name="dailysale[lumodel_id]"><option value=""></option></select></td>
<td><input class="texts" id="dailysale_qty" name="dailysale[qty]" type="text" /></td>
<td><input class="texts" id="dailysale_price" name="dailysale[price]" type="text" /></td>
<td><input class="texts" id="dailysale_total" name="dailysale[total]" type="text" /></td>
<td><input type="checkbox" class="delete_row"></td>
</tr>
$(function() {
$('#dailysale_qty, #dailysale_price').keyup(function() {
var last_item = $('.items').find('#dailysale_qty');
var qty = last_row.find('#dailysale_qty').val();
var price = last_row.find('#dailysale_price').val();
var sub_total = last_row.find('#dailysale_total');
var s_total = qty * price;
if (isNaN(s_total)) {
sub_total.val('0');
}
else
sub_total.val(s_total);
});
});
I am able to perform calculations on this row. However, when I dynamically add rows with jquery, calculations are not working on the other rows.
When the calculating function is bind a button onclick, everything works well. But not on input keyup as required. I want to perform calculations on the new added row with onkeyup on qty and price input fields.
Note than upon cloning, the ids are stripped of the current row and assigned to the new row for reference.
You probably not registering keyup function when you adding new row.
You should do :
$('#dailysale_qty, #dailysale_price').unbind('keyup').keyup( function(...
Every time you adding new row.
#Nosyara The suggested line of code isn't working. Here is how am adding new rows. The commented line is what you suggested.
$(function(){
$('#newitembtn').click(function(){
//$('#dailysale_qty, #dailysale_price').unbind('keyup').keyup(function() {
var last_row = $('#dailysale_tbody').find('tr:last');
var newrow = last_row.clone();
last_row.find('#items_select').removeAttr('id');
last_row.find('#brands_select').removeAttr('id');
last_row.find('#models_select').removeAttr('id');
last_row.find('#dailysale_qty').removeAttr('id');
last_row.find('#dailysale_price').removeAttr('id');
last_row.find('#dailysale_total').removeAttr('id');
newrow.find('#items_select').val('');
newrow.find('#brands_select').val('');
newrow.find('#models_select').val('');
newrow.find('#dailysale_qty').val('');
newrow.find('#dailysale_price').val('');
newrow.find('#dailysale_total').val('');
last_row.after(newrow);
});
});
});
I'm trying to change the values of some input fields only once upon page being loaded. For example submit_date_year should be current year, so 2017 right now.
My HTML
<template name="trip_html">
<table class="table table-striped table-condensed table-hover rsk-tbl vScrollTHead">
<tr>
<td><input class="form-control input-lg" name="submit_date_day" type="text" placeholder="Day"/> </td>
<td><input class="form-control input-lg" name="submit_date_month" type="text" placeholder="Month"/> </td>
<td><input class="form-control input-lg" name="submit_date_year" type="text" placeholder="Year"/> </td>
</tr>
</table>
</template>
My JS
On page load function
Template.trip_html.rendered = function(event, template) {
event.target.submit_date_year.value = 'test'; // DOES NOT WORK
console.log('Template onLoad');
};
However, I cannot use event.target.submit_date_year in that on load function, for some reason...
But it works in events, once I click 'submit' button
Template.trip_html.events({
"submit .add-trip": function(event){
event.preventDefault();
var day = event.target.submit_date_day.value;
var month = event.target.submit_date_month.value;
var year = event.target.submit_date_year.value;
var car = event.target.submit_car.value;
var b = event.target.submit_b.value;
var a = event.target.submit_a.value;
var dist = event.target.submit_dist.value;
if(empty(day) || empty(month) || empty(year) || empty(car) || empty(b) || empty(a) || empty(dist)){
return false;
}
if(!isNumeric(day) || !isNumeric(month) || !isNumeric(year) || !isNumeric(dist)){
return false;
}
if(day.startsWith("0"))
day = day.replace("0", "");
if(month.startsWith("0"))
month = month.replace("0", "");
if(year.startsWith("0"))
year = year.replace("0", "");
console.log(day, month, year, car, a, b, dist);
Meteor.call('addTrip', day, month, year, car, a, b, dist);
event.target.submit_a.value = event.target.submit_b.value;
event.target.submit_b.value = '';
event.target.submit_dist.value = '';
},
Help please!
It does not work because you are passing an event parameter in the onRendered Callback. Therefore, you can't select the DOM element via event.target.
try to give the element a certain class in the markup and replace the line event.target.submit_date_year.value = 'test'; // DOES NOT WORK
with something like:
$('.year-input').val() = 'test';
The html line:
<td><input class="form-control input-lg year-input" name="submit_date_year" type="text" placeholder="Year"/></td>
You can delete the 'event' parameter from the rendered callback now.
Hope, I could help.
The reason it isn't working is because you aren't using the onRendered function properly. You are also trying to access the input using an event object which doesn't exist because there is no event.
Try:
Template.trip_html.onRendered(function () {
$('input[name="submit_date_year"]').val('2017');
});
EDIT
You can just use HTML to achieve this too if you don't need the data to be dynamic.
<input class="form-control input-lg" name="submit_date_year" type="text" placeholder="Year" value="2017"/>
I have a table. This table contains rows and one of those columns in each row is a date. There are two input text boxes above the table; one input box represents the from date and the other represents the to date. Let's say the user only enters in the from date, I would like the table to display every row that contains that date and after. The opposite goes for if the user only enters the date in the TO input field; it would show all rows with dates leading up to that date. Along with if the user has a FROM AND TO date. It would catch the dates with the FROM date and the TO date along with every row that contains a date that is in between those.
What I have completed so far is an input field that will search the entire body of the table and output that row for whichever characters the user has entered.
JQuery
<script>
$("#searchInput").keyup(function () {
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $(".fbody").find("tr");
if (this.value == "") {
jo.show();
return;
}
//hide all the rows
jo.hide();
//Recusively filter the jquery object to get results.
jo.filter(function (i, v) {
var $t = $(this);
for (var d = 0; d < data.length; ++d) {
if ($t.is(":contains('" + data[d] + "')")) {
return true;
}
}
return false;
})
//show the rows that match.
.show();
}).focus(function () {
this.value = "";
$(this).unbind('focus');
})
</script>
HTML
<input id="searchInput" type="text" placeholder="From"/>
<input id="searchInput" type="text" placeholder="To" >
<tbody class="fbody">
<tr>
<td>something</td>
<td>something</td>
<td>4/18/2016</td>
<td>something</td>
</tr>
<tr>
<td>something</td>
<td>something</td>
<td>4/19/2016</td>
<td>something</td>
</tr>
<tr>
<td>something</td>
<td>something</td>
<td>4/20/2016</td>
<td>something</td>
</tr>
</tbody>
Please Help. Thanks.
One big problem with your current code was the duplicate ids the DOM. The remainder of your logic was close, but I simplified it.
The snippet below should work for you. If the dates entered at the top are invalid they will be ignored completely. Note that since we're running on the input event, you're temporarily going to filter out all your rows because it is going to interpret years before they are filled-out to 4 digits. You may want to account for this differently, or potentially use the blur event instead.
$(".searchInput").on("input", function() {
var from = stringToDate($("#searchFrom").val());
var to = stringToDate($("#searchTo").val());
$(".fbody tr").each(function() {
var row = $(this);
var date = stringToDate(row.find("td").eq(2).text());
//show all rows by default
var show = true;
//if from date is valid and row date is less than from date, hide the row
if (from && date < from)
show = false;
//if to date is valid and row date is greater than to date, hide the row
if (to && date > to)
show = false;
if (show)
row.show();
else
row.hide();
});
});
//parse entered date. return NaN if invalid
function stringToDate(s) {
var ret = NaN;
var parts = s.split("/");
date = new Date(parts[2], parts[0], parts[1]);
if (!isNaN(date.getTime())) {
ret = date;
}
return ret;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="searchFrom" class="searchInput" type="text" placeholder="From"/>
<input id="searchTo" class="searchInput" type="text" placeholder="To" >
<table class="fbody" border="1">
<tr>
<td>nothing</td>
<td>nothing</td>
<td>4/18/2016</td>
<td>nothing</td>
</tr>
<tr>
<td>nothing</td>
<td>nothing</td>
<td>4/19/2016</td>
<td>nothing</td>
</tr>
<tr>
<td>nothing</td>
<td>nothing</td>
<td>4/20/2016</td>
<td>nothing</td>
</tr>
</table>
<tr>
<td><label>Birthdate</label>
<input type="text" placeholder="mm/dd/yyyy" name="birthdate" maxlength="10"/>
</td>
</tr>
Well, my code is working but I want my "input type text" to auto format like a date (html 5 input type=date) because in my Servlet I convert it to Age.
The problem is that, if I use the "input type=date" the conversion is error so I decided to use "input type=text" and it's working. So is it possible to auto put "/" in this format "mm/dd/yyyy"? For example, if the user input 2 character an "/" will auto input etc.
Servlet for birthdate to Age
String birthdate = request.getParameter("birthdate");
int monthDOB = Integer.parseInt(birthdate.substring(0, 2));
int dayDOB = Integer.parseInt(birthdate.substring(3, 5));
int yearDOB = Integer.parseInt(birthdate.substring(6, 10));
DateFormat dateFormat = new SimpleDateFormat("MM");
java.util.Date date = new java.util.Date();
int thisMonth = Integer.parseInt(dateFormat.format(date));
dateFormat = new SimpleDateFormat("dd");
date = new java.util.Date();
int thisDay = Integer.parseInt(dateFormat.format(date));
dateFormat = new SimpleDateFormat("YYYY");
date = new java.util.Date();
int thisYear = Integer.parseInt(dateFormat.format(date));
int calAge = thisYear - yearDOB;
if (thisMonth < monthDOB) {
calAge = calAge - 1;
}
if (thisMonth == monthDOB && thisDay < dayDOB) {
calAge = calAge - 1;
}
String age = Integer.toString(calAge);
Update in the form
<tr>
<td><label for="inputName">Birthdate</label>
<input type="text" placeholder="mm/dd/yyyy" id="input_date" name="birthdate" maxlength="10" />
</td>
</tr>
Update in the source
<script src="../scripts/formatter.js"></script>
<script src="../scripts/formatter.min.js"></script>
<script src="../scripts/jquery.formatter.js"></script>
<script src="../scripts/jquery.formatter.min.js"></script>
Added Script
<script>
$('#input_date').formatter({
'pattern': '{{99}}/{{99}}/{{9999}}',
'persistent': true
});
</script>
I also tried the javascript but it's not working...
I've been watching a project on GitHub (and providing feedback to improve it) for just such kind of formatting called formatter.js http://firstopinion.github.io/formatter.js/demos.html This might be just the thing you're looking for.
This wouldn't stop you from typing in dates like the 53rd of May... but it will help you format.
new Formatter(document.getElementById('date-input'), {
'pattern': '{{99}}/{{99}}/{{9999}}',
'persistent': true
});
or
$('#date-input').formatter({
'pattern': '{{99}}/{{99}}/{{9999}}',
'persistent': true
});
I have an alternative that works with a jquery-ui datepicker, without formatter.js. It is intended to be called from the keyup and change events. It adds zero padding. It works with various supported date formats by constructing expressions from the dateFormat string. I can't think of a way to do it with fewer than three replaces.
// Example: mm/dd/yy or yy-mm-dd
var format = $(".ui-datepicker").datepicker("option", "dateFormat");
var match = new RegExp(format
.replace(/(\w+)\W(\w+)\W(\w+)/, "^\\s*($1)\\W*($2)?\\W*($3)?([0-9]*).*")
.replace(/mm|dd/g, "\\d{2}")
.replace(/yy/g, "\\d{4}"));
var replace = "$1/$2/$3$4"
.replace(/\//g, format.match(/\W/));
function doFormat(target)
{
target.value = target.value
.replace(/(^|\W)(?=\d\W)/g, "$10") // padding
.replace(match, replace) // fields
.replace(/(\W)+/g, "$1"); // remove repeats
}
https://jsfiddle.net/4msunL6k/
use datepicker api from jquery
here is the link Datepicker
and here is the working code
<tr>
<td><label>Birthdate</label>
<input type="text" placeholder="mm/dd/yyyy" name="birthdate" id="birthdate" maxlength="10"/>
</td>
</tr>
<script>
$(function() {
$( "#birthdate" ).datepicker();
});
</script>
EDIT
$("input[name='birthdate']:first").keyup(function(e){
var key=String.fromCharCode(e.keyCode);
if(!(key>=0&&key<=9))$(this).val($(this).val().substr(0,$(this).val().length-1));
var value=$(this).val();
if(value.length==2||value.length==5)$(this).val($(this).val()+'/');
});
this is the code that you may need
here is the fiddled code
user2897690 had the right idea but it didn't accept Numpad numbers. So took their javascript and modified it to work.
Here is my interpretation of their code with the added feature.
$("input[name='birthdate']:first").keyup(function(e){
var chars = [48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105];
var key=chars.indexOf(e.keyCode);
console.log(key);
if(key==-1)$(this).val($(this).val().substr(0,$(this).val().length-1));
var value=$(this).val();
if(value.length==2||value.length==5)$(this).val($(this).val()+'/');
});
I want to access the values entered in the input box and then get their sum, but javascript is concatenating the result. Here is the code
<script>
$(document).ready(function(){
$( "#dateSelector" ).click(function(){
$(this).datepicker();
});
});
$(document).ready(function(){
$("#ocb750cb").click(function(){
var closingBal = 0;
var openingBal = document.getElementById("ocb750ob").value;
alert(openingBal);
Number(openingBal);
var stockBal = document.getElementById("ocb750sb").value;
alert(stockBal);
Number(stockBal);
var sold = document.getElementById("ocb750sl").value;
alert(sold);
var store = document.getElementById("ocb750cb");
store.value = (stockBal + openingBal) - sold;
});
});
</script>
<th class = "main brand">OCB 750</th>
<th class = "main"><input type="text" maxlength="5" id="ocb750ob"></th>
<th class = "main"><input type="text" maxlength="5" id="ocb750sb"></th>
<th class = "main"><input type="text" maxlength="5" id="ocb750tl"></th>
<th class = "main"><input type="text" maxlength="5" id="ocb750sl"></th>
<th class = "main"><input type="text" maxlength="5" id="ocb750rs"></th>
<th class = "main"><input type="text" maxlength="5" id="ocb750cb"></th>
suppose i enter 5 and 2 my output will be 52 and not 7, it is getting concatenated
You values have string format,you need use parceInt
The value of a textbox is text. You need to cast it to a number:
var openingBal = parseFloat(document.getElementById("ocb750ob").value);
You have to use parseInt(x) to be sure, that value is interpreted as integer. Otherwise javascript interpret it as string, so + operator is concatenating.
Use:
var openingBal = parseInt(document.getElementById("ocb750ob").value);
Etc.
var stockBal = document.getElementById("ocb750sb").value;
stockbal will be a string, so you have to parse it to get an integer
try{
var stockBalInt = parseInt(stockBal);
}catch(error){
-..handle error
}
Since you concatenate two strings together, "5" + "2" = "52"
You should use parseInt():
store.value = ( parseInt(stockBal) + parseInt(openingBal) ) - parseInt(sold);
I think it's because all the variables retrieved using getElementById("id").value are "string". Try to do like this:
var sold = parseInt(document.getElementById("id").value);
Hope this will help.