CODEWITHSUNDEEP
javascriptjquery
Abdullah Bhatti
Abdullah Bhatti

Reputation: 1

Select next input type field Jquery

<div class="form-row itemrow">
    <div class="col-md-4">
        <label for="item">Item <span style="color:#ef172c;"> *</span></label>
        <input name="item" type="text" data-parsley-trigger="blur" required  class="form-control item" />
    </div>

    <div class="col-md-2">
        <label for="price">Price <span style="color:#ef172c;"> *</span></label>
        <input  name="price" type="number" data-parsley-trigger="blur" required  class="form-control price" />
    </div>

    <div class="col-md-2">
        <label for="qty">Qty <span style="color:#ef172c;"> *</span></label>
        <input  value="1" name="qty" type="number" data-parsley-trigger="blur" required  class="form-control qty" />
    </div>

    <div class="col-md-2">
        <label for="totalforone">Total</label>
        <input name="totalforone" value="100" type="number" data-parsley-trigger="blur"  class="form-control totalforone" />
    </div>

    <div class="col-md-2">
        <button id="addmore" style="height: 34px; margin-top: 2em;" class="btn btn-sm btn-success add-more btn-block" type="button"><i class="glyphicon glyphicon-plus"></i> Add Item</button>
    </div>
</div>

function calculation(){
    var price = $(".price").val();  
    var qty = $(".qty").val();  
    var aa = $(this).next().find('div > .totalforone').val();
    console.log(aa);
};

$(".price").bind('keyup mouseup', calculation);
$(".qty").bind('keyup mouseup', calculation);

I have these rows for multiply price and quantity eah row enter price and qty manually and total in input type total. Want to set price x qty = total each row. i have an option to add more rowsenter image description here

Upvotes: 0

Views: 81

Answers (1)

Mamun
Mamun

Reputation: 68943

You have to pass this to the function so that you can refer that inside the function. Then you can target the closest row with .itemrow to find the relevant .totalforone to set the calculated value. Also, it is better to use input event instead of keyup and mouseup:

function calculation(el){
  var price = $(".price").val();  
  var qty = $(".qty").val();  
  $(el).closest('.itemrow').find('.totalforone').val(price * qty);
};

$('body').on('input', '.price', function(){calculation(this)});
$('body').on('input','.qty', function(){calculation(this)});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row itemrow">
    <div class="col-md-4">
    <label for="item">Item <span style="color:#ef172c;"> *</span></label>
    <input name="item" type="text" data-parsley-trigger="blur" required  class="form-control item" />
</div>

<div class="col-md-2">
    <label for="price">Price <span style="color:#ef172c;"> *</span></label>
    <input  name="price" type="number" data-parsley-trigger="blur" required  class="form-control price" />
</div>

<div class="col-md-2">
    <label for="qty">Qty <span style="color:#ef172c;"> *</span></label>
    <input  value="1" name="qty" type="number" data-parsley-trigger="blur" required  class="form-control qty" />
</div>

<div class="col-md-2">
<label for="totalforone">Total</label>
<input name="totalforone" value="100" type="number" data-parsley-trigger="blur"  class="form-control totalforone" />
</div>

<div class="col-md-2">
<button id="addmore" style="height: 34px; margin-top: 2em;" class="btn btn-sm btn-success add-more btn-block" type="button"><i class="glyphicon glyphicon-plus"></i> Add Item</button>
</div>
</div>

Upvotes: 2

Related Questions