使用jquery獲取表單值

Question

請幫我。我想在多個輸入值上使用這個腳本。請幫幫我。

<script type="text/javascript"> 
$(document).ready(function() { 
     $('#pack').blur(function() { 
    var amount = parseInt($("#rate").val() * $("#pack").val()); 
    var totalamount = parseInt($("#weight").val() * $("#pack").val()); 
    $('.amount').html(amount); 
    $('.totalamount').html(totalamount); 
    return false; 
}); 
    }); 
    </script> 

    <p>amount = (rate * pack)</p> 
<p>totalamount = (weight * pack)</p> 

    <form action="/" class="calculator"> 
<label for="rate">rate: </label><input name="rate" id="rate" type="text" size="5" /> 
<label for="pack">pack: </label><input name="pack" id="pack" type="text" size="5" /> 
<label for="bag">bag: </label><input name="bag" id="bag" type="text" size="5" /> 
<label for="weight">weight: </label><input name="weight" id="weight" type="text" size="5" /> 
<input type="submit" value="calculate" /> 
</form> 

<p>Amount: <span class="amount"></span></p> 
<p>Total Amount: <span class="totalamount"></span></p> 

例如：

<label for="rate">rate: </label><input name="rate" id="rate" type="text" size="5" /> 
<label for="pack">pack: </label><input name="pack" id="pack" type="text" size="5" /> 
<label for="bag">bag: </label><input name="bag" id="bag" type="text" size="5" /> 
<label for="weight">weight: </label><input name="weight" id="weight" type="text" size="5" /> 

<label for="rate">rate: </label><input name="rate" id="rate" type="text" size="5" /> 
<label for="pack">pack: </label><input name="pack" id="pack" type="text" size="5" /> 
<label for="bag">bag: </label><input name="bag" id="bag" type="text" size="5" /> 
<label for="weight">weight: </label><input name="weight" id="weight" type="text" size="5" /> 

感謝

Answer 1

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#pack').blur(function() { 
     var amount = 0; 
     var totalamount = 0; 
     $('.rate').each(function() { 
      amount+= parseInt($(this).val() * $(this).next().val(), 10); 
      totalamount+= parseInt($(this).next().next().val() * $(this).next().next().next().val(), 10); 
      // their should be a better solution to do the next().next().etc part :P, please tell me 
     }); 

     $('.amount').html(amount); 
     $('.totalamount').html(totalamount); 
     return false; 
    }); 
}); 
</script> 

<p>amount = (rate * pack)</p> 
<p>totalamount = (weight * pack)</p> 

    <form action="/" class="calculator"> 
<label for="rate">rate: </label><input name="rate[]" class="rate" type="text" size="5" /> 
<label for="pack">pack: </label><input name="pack[]" class="pack" type="text" size="5" /> 
<label for="bag">bag: </label><input name="bag[]" class="bag" type="text" size="5" /> 
<label for="weight">weight: </label><input name="weight[]" class="weight" type="text" size="5" /> 
<input type="submit" value="calculate" /> 
</form> 

<p>Amount: <span class="amount"></span></p> 
<p>Total Amount: <span class="totalamount"></span></p> 

ID必須是唯一的，所以我把它改成類。我已經創建了輸入名稱的數組。

Answer 2

這個怎麼樣？

$('form.calculator input:text').blur(function() { 
    var rate = parseInt($("#rate").val()); 
    var pack = parseInt($("#pack").val()); 
    var weight = parseInt($("#weight").val()); 

    if (rate > 0 && pack > 0) { 
     $('.amount').html(rate * pack); 
    } 

    if (pack > 0 && weight > 0) { 
     $('.totalamount').html(weight * pack); 
    } 
    return false; 
}); 

工作示例：http://jsfiddle.net/vEBzs/