分别获取多个输入字段的值onKeyup:Jquery

时间:2018-03-11 12:57:39

标签: javascript jquery onkeyup

我有一个允许用户输入价格的输入框

 <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.然后用户输入#inscu-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 =&#34; getPrice(this)&#34;从单个输入字段调用。 如何使其适用于其他输入字段?我需要每个文本字段的输入值和每次的初始价格输入值。

我怎样才能做到这一点?

1 个答案:

答案 0 :(得分:1)

试试这个:

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