CODEWITHSUNDEEP
javascriptjquerytextbox
Mahmood Rehman
Mahmood Rehman

Reputation: 4331

Calculation on text fields against each other using js

I am trying to calculate results on textfields. I have two textfields and when someone enter value like 3 or 4 on first textfield it generate result on second textfield.I am also trying that if someone try to enter values on second one then it will show result on first one.It works fine for first condition but not for second.My code is below .My second textfield not allowing me to change value.

<script type="text/javascript">
jQuery(function(jQuery) {
    jQuery('.product-custom-option').on('keyup', function() {
        var total = jQuery('.product-custom-option').val();
       var perunit = 3;     
       var newprice = total/perunit;
       jQuery('#no_packs').val(Math.ceil(newprice));

    });
});
jQuery(function(jQuery) {
  jQuery('#no_packs').on('keyup', function() {
        var total = jQuery('#no_packs').val();
       var perunit = 3;      
       var newprice = total * perunit;
       jQuery('.product-custom-option').val(newprice);
    });
});
</script>

HTML :

<dl class="last">          
<dt>
</dt><dt><label class="required"><em>*</em>Square meters required</label>
    </dt>
<dd class="last">
    <div class="input-box">
            <input type="text" onchange="opConfig.reloadPrice()" id="options_134_text" class="input-text required-entry  product-custom-option" name="options[134]" value="">
            </div>
</dd>
        </dl>
<div class="">
<label class="required">Number of Packs</label>
<div class="input-box">
            <input type="text" id="no_packs" class="input-text product-custom-option" name="qty" value="">
            </div>
</div>

Upvotes: 0

Views: 89

Answers (1)

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

This is happening because you are defining same class on both the input fields so when you enter value on second input both functions works because second input field have a same class.

Add different class in first field and then use the same class in function

    jQuery(function(jQuery) {
      jQuery('.first').on('keyup', function() {
        var total = jQuery('.product-custom-option').val();
        var perunit = 3;
        var newprice = total / perunit;
        jQuery('#no_packs').val(Math.ceil(newprice));

      });
    });
    jQuery(function(jQuery) {
      jQuery('#no_packs').on('keyup', function() {
        var total = jQuery('#no_packs').val();
        var perunit = 3;
        var newprice = total * perunit;
        jQuery('.first').val(newprice);
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<dl class="last">
  <dt>
</dt><dt><label class="required"><em>*</em>Square meters required</label>
    </dt>
  <dd class="last">
    <div class="input-box">
      <input type="text" onchange="opConfig.reloadPrice()" id="options_134_text" class="input-text required-entry product-custom-option first" name="options[134]" value="">
    </div>
  </dd>
</dl>
<div class="">
  <label class="required">Number of Packs</label>
  <div class="input-box">
    <input type="text" id="no_packs" class="input-text product-custom-option" name="qty" value="">
  </div>
</div>

Well i am ignoring onchange="opConfig.reloadPrice()" as may be you are using it in some way but it's showing console errors check about it

Upvotes: 1

Related Questions