CODEWITHSUNDEEP
jqueryajax
user514310
user514310

Reputation:

Get form values using jquery

Please help me. i want to use this script on multiple input values. please help me.

<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>

for example:

<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" />

thanks

Upvotes: 0

Views: 1545

Answers (2)

PeeHaa
PeeHaa

Reputation: 72652

<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's must be unique so I changed it to classes. And I've created arrays of your input names.

Upvotes: 1

hunter
hunter

Reputation: 63512

How about this?

$('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;
});

working example: http://jsfiddle.net/vEBzs/

Upvotes: 0

Related Questions