AJAX PHP HTML формы вопросы

Question

Я работаю над формой заказа для бутербродов. Четыре поля ввода указывают количество продукта. (Коричневый, белый хлеб и т. Д.)

Я ищу предложения о том, как «жить» отображать продукты с количеством и ценой в нижней части этой страницы. Также я хочу рассчитать итоговые значения. По моему мнению, AJAX выглядит наилучшим образом; но с чего начать?

В данный момент продукты являются статическими внутри html, разумно ли использовать xml для этого? (mysql на данный момент не является опцией)

Надеюсь, этот вопрос будет иметь какой-то смысл и даст мне некоторые возможности.

Answer 1

Как вы думаете, так что вы получите, чтобы иметь какие-либо идеи?
Простой пример? :)
Live: http://jsfiddle.net/WPxgF/

Html:

<table> 
    <tr> 
     <td>Product<td> 
     <td>Price<td> 
     <td>Qtd<td> 
    </tr> 
    <tr class="item"> 
     <td>Sandwich<td> 
     <td class="price">3.00<td> 
     <td class="quant"><input type="text" size="4" value=""/><td> 
    </tr> 
    <tr class="item"> 
     <td>Juice<td> 
     <td class="price">1.50<td> 
     <td class="quant"><input type="text" size="4" value=""/><td> 
    </tr> 
    <tr> 
     <td>Total<td> 
     <td><input type="text" size="4" id="amount" value=""/><td> 
     <td><input type="text" size="4" id="quant" value=""/><td> 
    </tr> 
    </table> 

Javascript:

$(document).ready(function(){ 

     $(".quant input").blur(function(){ 

      var amount = 0; 

      var quant = 0; 
      $(".quant input").each(function() { 
       var thisQ = this.value; 
       quant += Number(thisQ); 
       var price = $(this).closest("tr").find(".price").html(); 
       amount += calcTot(thisQ, price); 
      }); 
      $("#quant").val(quant); 
      $("#amount").val(amount); 

      $(".price").each(function() { 
       price += Number($(this).html()); 
      }); 

     }); 

    }); 

    function calcTot(quant, price){ 

     var tot = quant * price; 
     return tot; 

    }