I have a calculate script for cost, but I have a little problem when I try to empty price box, there is "NaN" in cost box.
I do not know where is the problem. I have made following changes: digitsVal=isNaN(digitsVal)?0:digitsVal; became var digitsVal=isNaN(digitsVal)?0:digitsVal; and first this code is working, but second I try to empty in cost box, there is still "NaN" in cost box.
How to fix this calculate script ?. Are there solution about this script?
Example :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>berkelilingkesemua.info</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var price=$('#price'),
phone=$('#phone_number'),
digits=$('#digits'),
sum=$('#sum');
function calculateSum() {
var digitsVal=parseInt(phone.val().substr(-2));
digitsVal=isNaN(digitsVal)?0:digitsVal;
digits.val(digitsVal);
sum.val(parseFloat(price.val())+digitsVal);
};
phone.on('keyup', calculateSum);
price.on('keyup', calculateSum);
});
</script>
<table width="300px" border="1">
<tr>
<td width="40px">1</td>
<td>Price</td>
<td><input class="txt" name="price" type="text" id="price"></td>
</tr>
<tr>
<td>2</td>
<td>Phone Number</td>
<td><input name="phone_number" type="text" id="phone_number"></td>
</tr>
<tr>
<td>3</td>
<td>2 Digits</td>
<td><input class="txt" name="digits" type="text" id="digits" readonly></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Cost :</td>
<td align="center"><input type="text" name="sum" id="sum" value="0"></span></td>
</tr>
</table>
</body>
</html>
Replace:
sum.val(parseFloat(price.val())+digitsVal);
With:
isNaN(parseFloat(price.val())+digitsVal) ? sum.val(0) : sum.val(parseFloat(price.val())+digitsVal);
I think this should work for you
Related
So I am learning how to use controllers in angularjs and I am stuck. I created a form using html and tested to see if the controller was responding to the html through the data-binded attribute "message". However "enter your details" does not appear under "Add Event" in the browser. Am I missing something in my code? Is there somewhere in the app.module folder where I should declare a constructor? Let me know your thoughts.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h3>Add Event</h3>
<div ng-app='eventForm' name='AddEventForm' ng-submit='AddEvent();' ng-controller='eventsCtrl'>
{{message}}
<table>
<tr>
<td>Event Name</td>
<td><input type="text" ng-model="event.Name" required /></td>
</tr>
<tr>
<td>Event Location</td>
<td><input type="text" ng-model="event.Location" required /></td>
</tr>
<tr>
<td>Event Description</td>
<td><input type="text" ng-model="event.Description" required /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="submit" ng-disabled="AddEventForm.$invalid"></td>
</tr>
</table>
</div>
<script>
var eventForm = angular.module('eventForm', []);
eventForm.controller('eventsCtrl', function($scope) {
$scope.message = 'Enter your details';
$scope.addEvent = function()
{
}
});
</script>
</body>
</html>
You can like this following
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h3>Add Event</h3>
<form
ng-app="eventForm"
ng-controller="eventsCtrl"
name="AddEventForm"
ng-submit="AddEvent()"
>
{{ message }}
<table>
<tr>
<td>Event Name</td>
<td><input type="text" ng-model="event.Name" required /></td>
</tr>
<tr>
<td>Event Location</td>
<td><input type="text" ng-model="event.Location" required /></td>
</tr>
<tr>
<td>Event Description</td>
<td><input type="text" ng-model="event.Description" required /></td>
</tr>
<tr>
<td colspan="2">
<button type="submit" ng-disabled="AddEventForm.$invalid">
Submit
</button>
</td>
</tr>
</table>
</form>
<script>
var eventForm = angular.module("eventForm", []);
eventForm.controller("eventsCtrl", function($scope, $log) {
$scope.message = "Enter your details";
$scope.AddEvent = function() {
$log.log($scope.event);
};
});
</script>
</body>
</html>
I think you should to use form tag in this situation:
<form ng-app='eventForm' name='AddEventForm' ng-submit='AddEvent();' ng-controller='eventsCtrl'>
I have a simple question regarding jAutoCalc, my question can be answered in two ways:
1> How to customize the jAutoCalc plugin so that we can make it able to be used for input array names instead of just names.
my code is here:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/c17r/jAutoCalc/master/jAutoCalc.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
function autoCalcSetup() {
$('form[name=cart]').jAutoCalc('destroy');
$('form[name=cart] tr[name=line_items]').jAutoCalc({
keyEventsFire: true,
decimalPlaces: 2,
emptyAsZero: true
});
$('form[name=cart]').jAutoCalc({
decimalPlaces: 2
});
}
autoCalcSetup();
$('button[name=remove]').click(function(e) {
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button[name=add]').click(function(e) {
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr[name=line_items]').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy');
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
});
</script>
</head>
<body>
<form name="cart">
<table name="cart">
<tr>
<th></th>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th> </th>
<th>Item Total</th>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" name="qty" value="1"></td>
<td><input type="text" name="price" value="9.99"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>More Stuff</td>
<td><input type="text" name="qty" value="2"></td>
<td><input type="text" name="price" value="12.50"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>And More Stuff</td>
<td><input type="text" name="qty" value="3"></td>
<td><input type="text" name="price" value="99.99"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Subtotal</td>
<td> </td>
<td><input type="text" name="sub_total" value="" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>
Tax:
<select name="tax">
<option value=".06">CT Tax</option>
<option selected value=".00">Tax Free</option>
</select>
</td>
<td> </td>
<td><input type="text" name="tax_total" value="" jAutoCalc="{sub_total} * {tax}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Total</td>
<td> </td>
<td><input type="text" name="grand_total" value="" jAutoCalc="{sub_total} + {tax_total}"></td>
</tr>
<tr>
<td colspan="99"><button name="add">Add Row</button></td>
</tr>
</table>
</form>
</body>
</html>
since the names are same for dynamically generated input's i want use input array. The problem is that if i do so then I'm unable to use the plugin features!
2> The question can be answered in second way by providing methods to use plugin while using input arrays
I know its an old post but maybe others may have same issue.
Try to open jautocalc.js find this function "getFieldSelector(field)" and edit this code.
return ':input[name="' + field + '"]';
to
return ':input[name="' + field + '[]"]';
I think the whole problem is with javascript
the javascript should be like
$(document).ready(function(){
$('.item_total').keyup(function(){
$('your result input name here).text($('.item_total').val() * 1.5);
});
});
this link will help you:
http://jsfiddle.net/7BDwP/
You will get idea from the above link what i am trying to say
I am using serialize() method in my JSP page. But its returning null. Dont know what I am doing wrong
Please help.
jQuery Code :
$(document).ready(function() {
$("#addBtn").click(function() {
var offerData = $("#testForm").serialize();
alert(offerData);
}
});
HTML Code :
<form id="testForm">
<table>
<tr>
<td>Name :</td>
<td>
<input type="text" name="name" id="name" />
</td>
</tr>
<tr>
<td>Address :</td>
<td>
<input type="text" name="address" id="address" />
</td>
</tr>
<tr>
<input type="button" id="addBtn" />
</tr>
</table>
</form>
I posted relevant code only.
I think your javascript code is bad formatted, I tried this and it works fine...
$(document).ready(function () {
$("#addBtn").click(function () {
var offerData = $("#testForm").serialize();
alert(offerData);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form id="testForm">
<table>
<tr>
<td>Name :</td>
<td><input type="text" name="name" id="name"/></td>
</tr>
<tr>
<td>Address :</td>
<td><input type="text" name="address" id="address"/></td>
</tr>
<tr>
<input type="button" id="addBtn"/>
</tr>
</table>
</form>
There's an error in your javascript code. It should be:
<script type="text/javascript">
$(document).ready(function () {
$("#addBtn").click(function () {
var offerData = $("#testForm").serialize();
alert(offerData);
});
});
</script>
Notice the closing bracket and semicolon after your click method.
you forgot the close parenthesis, the code below works
$(document).ready(function () {
$("#addBtn").click(function () {
var offerData = $("#testForm").serialize();
alert(offerData);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="testForm">
<table>
<tr>
<td>Name :</td>
<td><input type="text" name="name" id="name"/></td>
</tr>
<tr>
<td>Address :</td>
<td><input type="text" name="address" id="address"/></td>
</tr>
<tr>
<input type="button" id="addBtn"/>
</tr>
</table>
</form>
Missing closing parenthesis for click event handler. Also in the HTML the last <tr> has no <td> included. Consider including your input element into <td colspan="2">
jQuery
$("#addBtn").click(function() {
var offerData = $("#testForm").serialize();
alert(offerData);
}); // <-- missing );
HTML
<tr>
<td colspan="2">
<input type="button" id="addBtn" />
</td>
</tr>
Using jQuery, I'm trying to find the first row of a given column in a table based on the control that has focus. The below kind of works, but it finds the last row of the given column. I want it to find the first row.
var $next= $('input:focus').closest('table').find('td:nth-child(3)').find('input')
I believe this is going to the last row because of the use of the 'closest()' method which traverses through the elements starting from the bottom.
What this ultimately being used for is navigate through a table using the arrow keys. It's based on this helpful code someone was kind enough to share: https://gist.github.com/krcourville/7309218.
EDIT: Adding additional fuller jquery and html as requested.
jQuery (stripped down version):
<script>
$('table.arrow-nav').keydown(function(e){
switch(e.which){
case //... other cases for other keycodes ...
case e.ctrlKey && 38: // <ctrl> + <Up>
$next = $('input:focus').closest('tr').parent().find("tr:first").find('td:nth-child(3)').find('input');
break;
}
if($next && $next.length){
$next.focus();
}
});
</script>
HTML:
<html>
<head></head>
<body>
<table class="arrow-nav" border="1" cellpadding="2" cellspacing="2">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td><input id="ctl_1_1" type="text"></td>
<td><input id="ctl_2_1" type="text"></td>
<td><input id="ctl_3_1" type="text"></td>
<td><input id="ctl_4_1" type="text"></td>
</tr>
<tr>
<td><input id="ctl_1_2" type="text"></td>
<td><input id="ctl_2_2" type="text"></td>
<td><input id="ctl_3_2" type="text"></td>
<td><input id="ctl_4_2" type="text"></td>
</tr>
<tr>
<td><input id="ctl_1_3" type="text"></td>
<td><input id="ctl_2_3" type="text"></td>
<td><input id="ctl_3_3" type="text"></td>
<td><input id="ctl_4_3" type="text"></td>
</tr>
</table>
</body>
<html>
Try like this
$('input:focus').closest('tr').parent().find("tr:nth-child(2)").find('td:nth-child(3)').find('input')
You can use the ids for referencing each row:
$(function() {
$('input').on('focus', function(event) {
var foc = $(this).attr('id');
var ctl = parseInt(foc.charAt(6), 10);
var next = $('tr')[ctl];
if (next === $('tr')[2]) {
next = $('tr')[0];
}
console.log('Focused input is ' + foc);
console.log('The next row is ' + (ctl + 1));
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Next Row</title>
</head>
<body>
<table class="arrow-nav" border="1" cellpadding="2" cellspacing="2">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>
<input id="ctl_1_1" type="text">
</td>
<td>
<input id="ctl_2_1" type="text">
</td>
<td>
<input id="ctl_3_1" type="text">
</td>
<td>
<input id="ctl_4_1" type="text">
</td>
</tr>
<tr>
<td>
<input id="ctl_1_2" type="text">
</td>
<td>
<input id="ctl_2_2" type="text">
</td>
<td>
<input id="ctl_3_2" type="text">
</td>
<td>
<input id="ctl_4_2" type="text">
</td>
</tr>
<tr>
<td>
<input id="ctl_1_3" type="text">
</td>
<td>
<input id="ctl_2_3" type="text">
</td>
<td>
<input id="ctl_3_3" type="text">
</td>
<td>
<input id="ctl_4_3" type="text">
</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>
So I have this little homework im struggling with. Everytime I declare a variable as parseFloat in Javascript. It just results the textbox a NaN. Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Bank Statement</title>
</head>
<body>
<center>
<h1 style="font-size:43pt">Statement of Account</h1>
<p>
<form name=fr1>
Customer Name: <input type=text name=ct>
Account No. : <input type=text name=acct><br><br>
<table border=4>
<tr>
<th>Description</th>
<th>Debit</th>
<th>Credit</th>
<th>Balance</th>
</tr>
<tr>
<th>Last Balance</th>
<td> </td>
<td> </td>
<td><input type=text name=b1></td>
</tr>
<tr>
<th>Monthly Salary</th>
<td><input type=text name=d2></td>
<td><input type=text name=c2></td>
<td><input type=text name=b2></td>
</tr>
<tr>
<th>ATM</th>
<td><input type=text name=d3></td>
<td><input type=text name=c3></td>
<td><input type=text name=b3></td>
</tr>
<tr>
<th>Refund</th>
<td><input type=text name=d4></td>
<td><input type=text name=c4></td>
<td><input type=text name=b4></td>
</tr>
<tr>
<th>ATM</th>
<td><input type=text name=d5></td>
<td><input type=text name=c5></td>
<td><input type=text name=b5></td>
</tr>
<tr>
<th>Telephone Bill</th>
<td><input type=text name=d6></td>
<td><input type=text name=c6></td>
<td><input type=text name=b6></td>
</tr>
<tr>
<th>Total Movement</th>
<td><input type=text name=d7></td>
<td><input type=text name=c7></td>
<td> </td>
</tr>
</table><br>
<input type=button value="Show" onclick=show()>
<input type=reset value="Clear">
</form>
<script language="javascript">
function show()
{
b1=document.fr1.b1.value;
b2=document.fr1.b2.value;
b3=document.fr1.b3.value;
b4=document.fr1.b4.value;
b5=document.fr1.b5.value;
b6=document.fr1.b6.value;
d2=document.fr1.d2.value;
d3=document.fr1.d3.value;
d4=document.fr1.d4.value;
d5=document.fr1.d5.value;
d6=document.fr1.d6.value;
d7=document.fr1.d7.value;
c2=document.fr1.c2.value;
c3=document.fr1.c3.value;
c4=document.fr1.c4.value;
c5=document.fr1.c5.value;
c6=document.fr1.c6.value;
c7=document.fr1.c7.value;
b1=parseFloat(b1);
b2=parseFloat(b2);
b3=parseFloat(b3);
b4=parseFloat(b4);
b5=parseFloat(b5);
b6=parseFloat(b6);
d2=parseFloat(d2);
d3=parseFloat(d3);
d4=parseFloat(d4);
d5=parseFloat(d5);
d6=parseFloat(d6);
d7=parseFloat(d7);
c2=parseFloat(c2);
c3=parseFloat(c3);
c4=parseFloat(c4);
c5=parseFloat(c5);
c6=parseFloat(c6);
c7=parseFloat(c7);
document.fr1.b2.value=(b1-d2+c2);
document.fr1.b3.value=(b2-d3+c3);
document.fr1.b4.value=(b3-d4+c4);
document.fr1.b5.value=(b4-d5+c5);
document.fr1.b6.value=(b5-d6+c6);
document.fr1.d7.value=(d2+d3+d4+d5+d6);
document.fr1.c7.value=(c2+c3+c4+c5+c6);
}
</script>
</center>
</body>
</html>
So I dont know why it's giving me NaN. Any tips or info I missed?
EDIT: This is what im getting at NaN: http://gyazo.com/73ae7a6d0fbbf4500b7547425c367349
-- Notice that the Blance and Credit give the 2nd balance NaN
There are two errors in the code:
You're falling prey to The Horror of Implicit Globals by not declaring your local variables.
You're parsing fields with blank values and not checking the result. parseFloat("") returns NaN.
If you declare your variables and check that you're not parsing blank fields, you won't have NaN slipping into things.
If you want to treat a blank field as 0, you can use JavaScript's curiously-powerful || operator for that:
b1 = parseFloat(b1) || 0;
Separately from those errors, any time you find yourself writing long lists of variable names like b1, b2, b3, etc., look at using a loop and/or arrays.