[jQuery] Problem concerning form with jquery

Mon, 23 Mar 2009 12:41:26 -0700 

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

Reply via email to