I am attempting to have jQuery total form data on an internal form. I have used the current code on jsfiddle.net and it worked on there with jQuery 1.6.4.
I have tried multiple different jQuery versions. But I am new to jQuery/javascript in general so I have no idea where to proceed from here.
Any help would be much appreciated!
<script type="text/javascript" src="jquery-1.6.4.js">
var $form = $('#apple-order'),
$summands = $form.find('.apple'),
$sumDisplay = $('#total');
$form.delegate('.apple', 'change', function ()
{
var sum = 0;
$summands.each(function ()
{
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
});
$sumDisplay.text(sum);
});
</script>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" id="apple-order">
<tr>
<td>
<form name="apple" method="post" action="insert.php">
<tr>
<td colspan="3" align="center"><strong>Caramel Apple Order Form</strong></td>
</tr>
<tr>
<td>Employee Name</td>
<td>: </td>
<td><input name="name" type="text"></td>
</tr>
<tr>
<td>Plain Caramel Apple</td>
<td>: </td>
<td><input name="plain" type="text" class="apple"></td>
</tr>
<tr>
<td>w/ Snickers</td>
<td>: </td>
<td><input name="snickers" type="text" class="apple"></td>
</tr>
<tr>
<td>w/ Butterfinger</td>
<td>: </td>
<td><input name="butter" type="text" class="apple"></td>
</tr>
<tr>
<td>w/ Mini M&Ms</td>
<td>: </td>
<td><input name="mini" type="text" class="apple"></td>
</tr>
<tr>
<td>w/ Pretzels</td>
<td>: </td>
<td><input name="pretzel" type="text" class="apple"></td>
</tr>
<tr>
<td colspan="3" align="center"><strong>Apples w/ Toppings come with Chocolate Drizzle</strong></td>
</tr>
<tr>
<td colspan="3" align="center">Total: <span id="total"></span></td>
</tr>
<tr>
<td colspan="3" align="center"><input type="submit" value="SUBMIT"> </td>
</tr>
</tr>
</table>
Your <script> tags are laid out incorrectly. You need to separate the tags that load external libraries from inline scripts, as I have shown below. You should also load your Javascript at the bottom of the page, after your HTML is declared.
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script>
var $form = $('#apple-order'),
$summands = $form.find('.apple'),
$sumDisplay = $('#total');
$form.delegate('.apple', 'change', function ()
{
var sum = 0;
$summands.each(function ()
{
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
});
$sumDisplay.text(sum);
});
</script>
You are attempting to access elements before they exist. Wrap your code in a DOM ready handler. Additionally, if you have a script element with a src attribute, you can't put code in it. You need two script tags:
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script>
$(function () {
var $form = $('#apple-order'),
// etc
});
</script>
By default, jsfiddle wraps your code in an onLoad handler, which can be confusing.
Declare all your libraries first
<script type="text/javascript" language="javascript" src="jquery-1.6.4.js"></script>
...
then start coding in another place
<script>
// do something
</script>
I think the problem is that you're not actually importing jQuery. Try adding the following before your script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
This will download jQuery from Google's CDN.
Related
I am getting a NaN error. the code was copied from a fiddle which works perfectly. Here is the code.
<tbody>
<tr>
<td><input type="checkbox" name="payment_id[]" id="payment_id_" value="6" class="box" checked="checked" /></td>
<td>2015-08-26 20:43:50 UTC</td>
<td>1000002043</td>
<td class = "amount">25.0</td>
<td>CHK</td>
<td></td>
<td></td>
<td>5</td>
<td>Show</td>
<td>Edit</td>
<td><a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/payments/6">Destroy</a></td>
</tr>
<% end %>
</tbody>
<td>Total</td><td><div id="total"></div></td>
Here is the jquery
$(function() {
$('.box').change(function(){
var total = 0;
$('.box:checked').each(function(){
total+=parseFloat($(this).parent().next('td').find('.amount').text());
});
$('#total').text(total);
});
});
I am getting a NaN in the total element.
Let's break down your jQuery chain:
$(this) // ,box
.parent() // The <td>
.next('td') // The next <td> in the sequence
.find('.amount') // Tries to find an element with class `amount` inside the <td>
.text() // Empty, because the previous element doesn't exist
What you'll need to do is append the .amount onto your selector and use nextAll instead, like so:
$(this).parent().nextAll("td.amount").text()
If you had multiple amount classes, you'd need to make sure you only picked the first one like so:
$(this).parent().nextAll("td.amount:first").text()
Example:
$('.box').change(function(){
var total = 0;
$('.box:checked').each(function(){
total+=parseFloat($(this).parent().nextAll('td.amount').text());
});
$('#total').text(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td><input type="checkbox" name="payment_id[]" id="payment_id_" value="6" class="box" checked="checked" /></td>
<td>2015-08-26 20:43:50 UTC</td>
<td>1000002043</td>
<td class = "amount">25.0</td>
<td>CHK</td>
<td></td>
<td></td>
<td>5</td>
<td>Show</td>
<td>Edit</td>
<td><a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/payments/6">Destroy</a></td>
</tr>
</tbody>
</table>
<div id="total"></div>
Considering the amount is entered once per row I jumped back to row and found the td.amount in the row.
(function($) {
$('.box').change(function(){
var total = 0;
$('.box:checked').each(function(){
total += parseFloat($('td.amount', $(this).closest('tr')).text());
});
$('#total').text(total);
});
})(jQuery);
There is a referencing error. Use:
$(function() {
$('.box').change(function(){
var total = 0;
$('.box:checked').each(function(){
total+=parseFloat($(this).closest('tr').find('td.amount').text());
});
$('#total').text(total);
});
});
About this problem, I saw a some solution here at Stack Overflow and the solution redirects me here: http://jsfiddle.net/9hGym/
On JS fiddle, the code works but when I implement it on my editor and run it, it's not working. By the way, as a library I used Google CDN, I don't know if it is proper way, so help me. Here's my code by the way..
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script language = "javascript">
// Write on keyup event of keyword input element
$("#search").keyup(function(){
_this = this;
// Show only matching TR, hide rest of them
$.each($("#table tbody").find("tr"), function() {
console.log($(this).text());
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
$(this).hide();
else
$(this).show();
});
});
</script>
</head>
<body>
<div class="row large-centered">
<h1>World of Warcraft characters. <small>Mine and my brothers, we share.</small></h1>
</div>
<div class="row large-centered">
<input type="text" id="search" placeholder="Type to search..." />
<table id="table" width="100%">
<thead>
<tr>
<th>Character name</th>
<th>Class</th>
<th>Realm</th>
</tr>
</thead>
<tbody>
<tr>
<td>Benjamin.</td>
<td>Rogue.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Cachoito.</td>
<td>Hunter.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Contemplario.</td>
<td>Paladin.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Elthron.</td>
<td>Death Knight.</td>
<td>Agamaggan ES.</td>
</tr>
<tr>
<td>Giloh.</td>
<td>Priest.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Kitialamok.</td>
<td>Warrior.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Magustroll.</td>
<td>Mage.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Marselus.</td>
<td>Mage.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Mistrala.</td>
<td>Warrior.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Suavemente.</td>
<td>Warrior.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Tittus.</td>
<td>Monk.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Yarlokk.</td>
<td>Warlock.</td>
<td>Uldum ES.</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You should place the javascript code within a $(document).ready, this will ensure the function is run after the DOM is ready.
<script language = "javascript">
$( document ).ready(function(){
// Write on keyup event of keyword input element
$("#search").keyup(function(){
_this = this;
// Show only matching TR, hide rest of them
$.each($("#table tbody").find("tr"), function() {
console.log($(this).text());
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
$(this).hide();
else
$(this).show();
});
});
});
</script>
You can try to use getElementsByTagName, and catch all "TD" elements, like this:
<html>
<body>
<script>
function _Change()
{
var TD = document.getElementsByTagName('td');
i=0;
do {
if ( TD[i].innerHTML.trim().localeCompare("three") == 0 ) TD[i].innerHTML = "3";
i++;
} while(i<TD.length)
}
</script>
<table border=1>
<tr><td> one </td> <td> two </td></tr>
<tr><td> three </td> <td> four </td></tr>
<tr><td> five </td> <td> six </td></tr>
</table>
<button onclick="_Change()"> change </button>
</body>
</html>
I have the following form that is created on the fly using Coldfusion. The different inputs all have different values when loaded, but share the same class.
I will have another input field with a unique identifier - #permup
The form is as follows (form tag stripped):
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="county-table" style="margin-top: 15px;">
<tr>
<TD>Length</TD>
<TD align="center">PerM</TD>
</tr>
<tr bgcolor="#ffffff">
<TD>from 1-10m</TD>
<TD align="center"><input class="perm" type="text" name="PerM1" value="1.60" size="6" /></TD>
</tr>
<tr bgcolor="#efefef">
<TD>from 11-20m</TD>
<TD align="center"><input class="perm" type="text" name="PerM2" value="1.10" size="6" /></TD>
</tr>
<tr bgcolor="#ffffff">
<TD>from 21-50m</TD>
<TD align="center"><input class="perm" type="text" name="PerM3" value="1.50" size="6" /></TD>
</tr>
<tr bgcolor="#efefef">
<TD>from 51-80m</TD>
<TD align="center"><input class="perm" type="text" name="PerM4" value="1.55" size="6" /></TD>
</tr>
<tr bgcolor="#ffffff">
<TD>from 81-150m</TD>
<TD align="center"><input class="perm" type="text" name="PerM5" value="1.10" size="6" /></TD>
</tr>
<tr bgcolor="#efefef">
<TD>from 151-200m</TD>
<TD align="center"><input class="perm" type="text" name="PerM6" value="1.10" size="6" /></TD>
</tr>
<tr>
<td> </td>
<td><input id="permup" type="text" name="permup" value="0" size="6" /></td>
</tr>
</table>
What I need is that when someone types the base rate increase in the #permup field, the fields with the class .perm have all their values increased by that amount, and if someone then sets the #permup field to 0 (zero) the fields with .perm are set back to their original value.
This has to work with JQuery on the class name as the table rows could be any number. I have the following script:
<script language="JavaScript" type="text/javascript">
$('#permup').keyup( function() {
$('.perm').each(function(){
var defaultValue = $(this).val();
$(this).val( $('#permup').val() * defaultValue );
});
});
</script>
It kind of works, but sets every value the same in the .perm fields and also does weird stuff when the field #perm is clicked out of or set to zero.
I hope someone can help!!
Many thanks
JS
As others have said you need to make sure you are doing math with numbers and not the default "value" given by the .value property. Also it is not advisable to store values in your display as you run into issues on how to retrieve an old value once you modify it. Below is code that does what you want and keeps track of the original values.
<script language="JavaScript" type="text/javascript">
// Store default values
var perm_items = document.getElementsByClassName("perm");
var orig_perm_values = new Array(perm_items.length);
for (var i = perm_items.length - 1; i >= 0; i--)
{
orig_perm_values[i] = perm_items[i].value;
document.getElementById('out').innerHTML = orig_perm_values[i];
}
function updateValues(event)
{
for (var i = perm_items.length - 1; i >= 0; i--)
{
perm_items[i].value = (parseFloat(orig_perm_values[i]) + parseFloat(event.target.value)).toFixed(2);
}
}
</script>
Try using parseFloat() and use keyup and focus event as shown :-
$('#permup').on('keyup focus', function() {
$('.perm').each(function(){
var defaultval = $('#permup').val();
var myValue;
if(defaultval == "0"){
myValue = $(this).attr('value')
}
else{
myValue = parseFloat( parseFloat($(this).attr('value')) * parseFloat(defaultval) ) || $(this).attr('value')
}
$(this).val( myValue );
});
});
DEMO
Side Note :- Always try to use parseInt() or parseFloat() while dealing in numbers in javascript/jquery otherwise numbers are also treated as string.
I have an big table I need to create multiple times in the same page, but I'm not sure have to do. I thought the easiest way is to have the table as an partial view hidden on the page, and each time I need it I will clone it from my jQuery code. I know have to clone it, but I'm not sure have to insert the text into the specific span's, before I insert it.
This is a small example of my table. Can somebody help me with this problem
< div id="ToClone">
<table >
<tr>
<td>
<table>
<tr><td><b>MMS_RepairLabel:</b></td><td align="right"><span id="RepairId"></span></td></tr>
<tr><td><b>MMS_MWTLabel:</b></td><td align="right"><span id="MWT"></span></td></tr>
<tr><td><b>MMS_MDTLabel:</b></td><td align="right"><span id="MDT"></span></td></tr>
</table>
</td>
</tr>
</table>
</div>
<script>
var History = (function () {
$(function () {
var tblClone = $("#ToClone").clone();
});
}());
</script>
You will need to resolve the problem of duplicate ids first. I suggest changing them to classes.
I recommend a little trick of using a dummy script block for your template. This is great for maintenance and browsers just ignore the unknown type so you can insert any elements:
<script id="ToClone" type="text/template">
<table>
<tr>
<td>
<table>
<tr>
<td><b>MMS_RepairLabel:</b>
</td>
<td align="right"><span class="RepairId"></span>
</td>
</tr>
<tr>
<td><b>MMS_MWTLabel:</b>
</td>
<td align="right"><span class="MWT"></span>
</td>
</tr>
<tr>
<td><b>MMS_MDTLabel:</b>
</td>
<td align="right"><span class="MDT"></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</script>
Then clone with your inserted values like this:
var $clone = $($('#ToClone').html());
$('.RepairId', $clone).text(repairIdValue);
$('.MDT', $clone).text(mdtValue);
$('.MWT', $clone).text(mwtValue);
// Do something with the clone
JSFiddle: http://jsfiddle.net/TrueBlueAussie/381ugdvr/1/
If i can get what you are looking for, look this solution:
jQuery:
$('.pasteTable').each(function(){
var RepairId = $(this).data('repair-id');
var MWT = $(this).data('mwt');
var MDT = $(this).data('mdt');
$(this).html('<table><tr><td><b>MMS_RepairLabel:</b></td><td align="right"><span class="RepairId">' + RepairId + '</span></td></tr><tr><td><b>MMS_MWTLabel:</b></td><td align="right"><span class="MWT">' + MWT + '</span></td></tr><tr><td><b>MMS_MDTLabel:</b></td><td align="right"><span class="MDT">' + MDT + '</span></td></tr></table>');
});
Anywhere in your code you want the table to be cloned, just insert a with 'data' attributes:
HTML:
<div class="pasteTable" data-repair-id="#1" data-mwt="baby" data-mdt="ball"></div>
Demo:
http://jsfiddle.net/zf09m0at/3/
Edit: I have solved this by myself. See my answer below
I have set up a nice sortable table with jQuery and it is quite nice. But now i want to extend it.
Each table row has a text box, and i want i am after is to, every time a row is dropped, the text boxes update to reflect the order of the text boxes. E.g. The text box up the top always has the value of '1', the second is always '2' and so on.
I am using jQuery and the Table Drag and Drop JQuery plugin
Code
Javascript:
<script type = "text/javascript" >
$(document).ready(function () {
$("#table-2").tableDnD({
onDrop: function (table, row) {
var rows = table.tBodies[0].rows;
var debugStr = "Order: ";
for (var i = 0; i < rows.length; i++) {
debugStr += rows[i].id + ", ";
}
console.log(debugStr)
document.forms['productform'].sort1.value = debugStr;
document.forms['productform'].sort2.value = debugStr;
document.forms['productform'].sort3.value = debugStr;
document.forms['productform'].sort4.value = debugStr;
},
});
});
</script>
HTML Table:
<form name="productform">
<table cellspacing="0" id="table-2" name="productform">
<thead>
<tr>
<td>Product</td>
<td>Order</td>
</tr>
</thead>
<tbody>
<tr class="row1" id="Pol">
<td>Pol</td>
<td><input type="textbox" name="sort1"/></td>
</tr>
<tr class="row2" id="Evo">
<td>Evo</td>
<td><input type="textbox" name="sort2"/></td>
</tr>
<tr class="row3" id="Kal">
<td>Kal</td>
<td><input type="textbox" name="sort3"/></td>
</tr>
<tr class="row4" id="Lok">
<td>Lok</td>
<td><input type="textbox" name="sort4"/></td>
</tr>
</tbody>
</table>
</form>
Hardnrg in #jquery ended up solving it for me.
It involved adding an id="" to each input:
<form name="productform">
<table cellspacing="0" id="table-2" name="productform">
<thead>
<tr><td>Product</td> <td>Order</td></tr>
</thead>
<tbody>
<tr class="row1" id="Pol"> <td>Pol</td> <td><input id="Pol_field" type="textbox" name="sort1"/></td> </tr>
<tr class="row2" id="Evo"> <td>Evo</td> <td><input id="Evo_field" type="textbox" name="sort2"/></td> </tr>
<tr class="row3" id="Kal"> <td>Kal</td> <td><input id="Kal_field" type="textbox" name="sort3"/></td> </tr>
<tr class="row4" id="Lok"> <td>Lok</td> <td><input id="Lok_field" type="textbox" name="sort4"/></td> </tr>
</tbody>
</table>
</form>
And add this js to the OnDrop event:
for (var i=0; i < rows.length; i++) {
$('#' + rows[i].id + "_field").val(i+1);
}
Easy peasy!
Hmmm..
I think you want to do something like this:
$("input:text", "#table-2").each( function(i){ this.value=i+1; });
The $().each() function's info is here: http://docs.jquery.com/Core/each