Select 下一个输入类型字段 Jquery

Question

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

Answer 1

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>