[jQuery] Problem concerning form with jquery
Hi,
I have a problem i can't find a solution to, and as you can guess it's
annoying me :)
Here is my code :
#################### index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Formulaire de commande dynamique</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://www.google.com/jsapi" type="text/javascript"></
script>
<script type="text/javascript">google.load("jquery", "1.2.6");</
script>
<script type="text/javascript" src="js/order.js"></script>
</head>
<body>
<h1>Formulaire d'exemple</h1>
<table id="order-table">
<tr>
<th>Nom du produit</th>
<th>Quantité</th>
<th></th>
<th>Prix unitaire</th>
<th></th>
<th style="text-align: right;">Total</th>
</tr>
</table>
<div style="text-align: right;">
<span><strong>TOTAL : </strong></span>
<input type="text" class="total-box" id="order-total"
disabled="disabled"></input>
<br />
<form action="#" method="post">
<input type="submit" value="Submit Order" class="submit" />
</form>
</div>
<script type="text/javascript" src="js/lineadd.js"></script>
<img src='test.jpg' onclick="ajouterligne();">
</body>
</html>
#################### lineadd.js
var nbligne = 0;
function nouvelleligne(nbligne)
{
if(nbligne % 2 == 0)
{
return '<tr class="odd">\n' +
'<td class="product-title">Exemple de produit dont le nom est
<em>Produit ' + nbligne + '</em></td>\n' +
'<td class="num-pallets"><input type="text" class="num-pallets-
input" id=""></input></td>\n' +
'<td class="times">X</td>\n' +
'<td class="price-per-pallet">$<span>540</span></td>\n' +
'<td class="equals">=</td>\n' +
'<td class="row-total"><input type="text" class="row-total-
input" id="" disabled="disabled"></input></td>\n' +
'</tr>\n';
}
else
{
return '<tr class="even">\n' +
'<td class="product-title">Exemple de produit dont le nom est
<em>Produit ' + nbligne + '</td>\n' +
'<td class="num-pallets"><input type="text" class="num-pallets-
input" id=""></input></td>\n' +
'<td class="times">X</td>\n' +
'<td class="price-per-pallet">$<span>540</span></td>\n' +
'<td class="equals">=</td>\n' +
'<td class="row-total"><input type="text" class="row-total-
input" id="" disabled="disabled"></input></td>\n' +
'</tr>\n';
}
}
ajouterligne();
function ajouterligne()
{
nbligne ++;
var nouvelle_ligne = nouvelleligne(nbligne);
$(nouvelle_ligne).appendTo("#order-table");
}
############### order.js
function IsNumeric(sText)
{
var ValidChars = "0123456789.";
var IsNumber=true;
var Char;
for (i = 0; i < sText.length && IsNumber == true; i++)
{
Char = sText.charAt(i);
if (ValidChars.indexOf(Char) == -1)
{
IsNumber = false;
}
}
return IsNumber;
};
function calcOrderTotal()
{
var prodSubTotal = 0;
$(".row-total-input").each(function()
{
var valString = $(this).val() || 0;
prodSubTotal += parseInt(valString);
});
var orderTotal = 0;
var orderTotalNice = prodSubTotal + " €";
$("#order-total").val(orderTotalNice);
};
$(function()
{
$('.num-pallets-input').blur(function()
{
var $this = $(this);
var numPallets = $this.val();
var multiplier = $this
.parent().parent()
.find("td.price-per-pallet span")
.text();
if ( (IsNumeric(numPallets)) && (numPallets != '') )
{
var rowTotal = numPallets * multiplier;
$this
.css("background-color", "white")
.parent().parent()
.find("td.row-total input")
.val(rowTotal);
}
else
{
$this
.css("background-color", "#ffdcdc")
.parent().parent()
.find("td.row-total input")
.val("0");
};
calcOrderTotal();
});
});
My problem is that the line firstly added when page loads works great,
inputs are updated when they have to, but all the lines i add using
the image with the onclick statement don't at all. Both way use the
same function... Did i miss something ?
Thanks