Получение значения нескольких полей ввода отдельно на Keyup: Jquery

У меня есть поле ввода, которое позволяет пользователю вводить цену,

 <div class = "prc-box"><input type="number" class="form-controle" id="oprc" placeholder="$" name="offerPrice" required="required"></div>

Затем у меня есть форма с несколькими полями, как показано ниже,

        <div class ="cash-section" id ="cash-form">
                <div class ="input-group-custom" id = "mon-deposit">
                    <div class = "deposit-input">
                        <label class="control-label">Earnest Money Deposit Amount (0-50%)</label>
                        <input type="number" min="0" max="50" class="form-control1" onkeyup="getPrice(this)" placeholder="0-50%" name="moneyDep" required="required"><span class="input-val moneyDep">$0</span></div>
                </div>
                <div class ="input-group-custom" id = "req-conc">
                    <div class = "req-input">
                        <label class="control-label">Requested Concessions (0-60%)</label>
                        <input type="number" min="0" max="60" class="form-control2" placeholder="0-60%" name="req-conc" required="required"><span class="input-val req-conc">$0</span></div>
                </div>

                <div class ="input-group-custom" id = "sel-credit">
                    <div class = "sel-input">
                        <label class="control-label">Other Seller Credits (0-50%)</label>
                        <input type="number" class="form-control" placeholder="0-50%" name="sel-credit" required="required"><span class="input-val sel-credit">$0</span></div>
                </div>

                <div class ="input-group-custom" id = "insp-period">
                    <div class = "insp-input">
                        <label class="control-label">Inspection Period (0-60)</label>
                        <input type="number" class="form-control" placeholder="0-60" name="insp-period" required="required"><span class="input-val insp-period">days</span></div>
                </div>

                <div class ="input-group-custom" id = "due-section">
                    <div class = "due-input">
                        <label class="control-label">Due Dilligence Review Period (0-60)</label>
                        <input type="number" class="form-control" placeholder="0-60" name="due-section" required="required"><span class="input-val due-section">days</span></div>
                </div>

                <div class ="input-group-custom" id = "days-count">
                    <div class = "days-input">
                        <label class="control-label">Requested # of Days to Closing (0-120)</label>
                        <input type="number" class="form-control" placeholder="0-120" name="days-count" required="required"><span class="input-val days-count">days</span></div>
                </div>
            </div>

Предположим, пользователь вводит значение в первое поле ввода цены, скажем, 50000. Затем пользователь вводит значение в поле ввода #insp-period как 10. Теперь мне нужно рассчитать 10% введенной цены (здесь 50000) в первом поле ввода, и он должен отображаться в классе span.

Я попытался сделать то же самое, что и ниже,

function getPrice(price) {

 var offerPrice = jQuery('.form-controle').val();
 var text1 = price.value;
 var result1 = (text1*offerPrice)/100;
 jQuery('.input-val.moneyDep').html(result1);
}

Это работает нормально, когда onkeyup="getPrice(this)" вызывается из одного поля ввода. Как я могу заставить его работать и для других полей ввода? Мне нужно вводное значение каждого текстового поля отдельно и начальное значение входной цены каждый раз.

Как я могу этого добиться?


javascript jquery onkeyup
person manini    schedule 11.03.2018    source источник
comment
Одинаков ли алгоритм расчета для каждого входа?   -  person Alex Yokisama    schedule 11.03.2018
comment
Где .input-val.moneyDep?   -  person Pedram    schedule 11.03.2018
comment
@AlexYokisama да, расчет будет одинаковым для каждого ввода.   -  person manini    schedule 11.03.2018
comment
@Pedram .form-controle — это класс для моего основного ввода цены. Пожалуйста, посмотрите первую строку html в моем вопросе   -  person manini    schedule 11.03.2018
comment
Почему вы не используете onkeyup="getPrice(this)" для каждого input? вы только что использовали один раз   -  person Pedram    schedule 11.03.2018
comment
Вам действительно нужны такие классы, как form-control1, form-control2 и т. д.? У вас везде разные классы, но вы собираетесь проделать одну и ту же операцию для всех них/   -  person Alex Yokisama    schedule 11.03.2018
comment
@AlexYokisama Мне больше не нужен другой класс. Благодаря вашему решению.   -  person manini    schedule 11.03.2018

Ответы (1)


arrow_upward
1
arrow_downward

Попробуй это:

$(function() {  
  $(".input-group-custom input").keyup(function() {
    var offerPrice = $(this).val();
    var text1 = price.value;
    var result1 = (text1*offerPrice)/100;
    $(this).next().html(result1);
  });
});
person Alex Yokisama    schedule 11.03.2018