Question

我有一个从yii2生成的表，我想做一个表格输入，但在发送提交之前，有一个客户端验证输入字段。考虑我不知道输入id，因为它是由yii2生成的。这是第一行的代码片段

<tr class="kv-tabform-row" data-key="4">
    <td class="kv-align-center kv-align-middle">1</td>
    <td class="kv-grid-hide kv-align-top">
        <div class="form-group field-kegbulan-4-id">
            <input type="hidden" id="kegbulan-4-id" class="form-control" name="KegBulan[4][id]" value="4">
            <div class="help-block"></div>
        </div>
    </td>
    <td class="kv-grid-hide kv-align-top">
        <div class="form-group field-kegbulan-4-id_keg_ta_uk required">
            <input type="hidden" id="kegbulan-4-id_keg_ta_uk" class="form-control" name="KegBulan[4][id_keg_ta_uk]" value="6">
            <div class="help-block"></div>
        </div>
    </td>
    <td class="kv-align-middle" style="width:300px;">Pengadaan Barang Kuasi, Buku Uji, Plat Uji dan Stiker Uji</td>
    <td class="kv-align-middle">
        <input type="text" id="kegbulan-4-anggaran" class="anggaran" name="KegBulan-[4][anggaran]" value="300,000,000" disabled="disabled" style="width:100px;"></td>
    <td class="kv-align-top">
        <div class="form-group field-kegbulan-4-sp2d required">
            <input type="text" id="kegbulan-4-sp2d" class="form-control sp2d" name="KegBulan[4][sp2d]" value="680000" onchange="tesbos()">
            <div class="help-block"></div>
        </div>
    </td>
    <td class="kv-align-top" style="width:70px;">
        <div class="form-group field-kegbulan-4-persen_sp2d required">
            <input type="text" id="kegbulan-4-persen_sp2d" class="form-control" name="KegBulan[4][persen_sp2d]" value="2">
            <div class="help-block"></div>
        </div>
    </td>
    <td class="kv-align-top">
        <div class="form-group field-kegbulan-4-spj required">
            <input type="text" id="kegbulan-4-spj" class="form-control" name="KegBulan[4][spj]" value="680000">
            <div class="help-block"></div>
        </div>
    </td>
    <td class="kv-align-top" style="width:70px;">
        <div class="form-group field-kegbulan-4-persen_spj required">
            <input type="text" id="kegbulan-4-persen_spj" class="form-control" name="KegBulan[4][persen_spj]" value="2">
            <div class="help-block"></div>
        </div>
    </td>
    <td class="kv-align-top" style="width:70px;">
        <div class="form-group field-kegbulan-4-target required">
            <input type="text" id="kegbulan-4-target" class="form-control" name="KegBulan[4][target]" value="0">
            <div class="help-block"></div>
        </div>
    </td>
    <td class="kv-align-top" style="width:70px;">
        <div class="form-group field-kegbulan-4-pfisik required">
            <input type="text" id="kegbulan-4-pfisik" class="form-control" name="KegBulan[4][pfisik]" value="10">
            <div class="help-block"></div>
        </div>
    </td>
    <td class="skip-export kv-align-center kv-align-middle" style="width:60px;"><a href="/yii2/yii-application/frontend/web/keg-bulan/view?id=4" title="View" data-pjax="0">
    <span class="glyphicon glyphicon-eye-open"></span></a> <a href="/yii2/yii-application/frontend/web/keg-bulan/update?id=4" title="Update" data-pjax="0" style="display:none;">
    <span class="glyphicon glyphicon-pencil"></span></a> <a href="/yii2/yii-application/frontend/web/keg-bulan/delete?id=4" title="Delete" data-confirm="Are you sure to delete this item?" data-method="post" data-pjax="0">
    <span class="glyphicon glyphicon-trash"></span></a></td>
    <td class="skip-export kv-align-center kv-align-middle kv-row-select" style="width:50px;">
    <input type="checkbox" name="selection[]" value="4"></td>
</tr>

screenshoot：http://www.imagebam.com/image/569de2398154258

输入sp2d将检查输入anggaran并做一些验证如果（sp2d＆gt; anggaran）然后“sp2d超过anggaran限制”

这里是初始的javascript函数，用于检查该函数是否通过onchange

触发

function tesbos(){

   var sp2d = $(".sp2d").attr("id");
    console.log(sp2d);

}

当我在sp2d输入中输入第二行时，仍然在我检查我的控制台日志时，它仍然打印第一行的sp2d输入id，当我去任何一行时如何自动/动态地获取我的输入id？任何帮助将不胜感激

Answer 1

假设您可以更改标记，则需要将元素引用传递给单击处理程序

<input type="text" id="kegbulan-4-sp2d" class="form-control sp2d" name="KegBulan[4][sp2d]" value="680000" onchange="tesbos(this)">

然后

function tesbos(el) {
    alert(el.id)
}

但是我建议使用jQuery事件处理程序而不是内联处理器，所以从标记中删除onchange=""

<input type="text" id="kegbulan-4-sp2d" class="form-control sp2d" name="KegBulan[4][sp2d]" value="680000">

然后

jQuery(function($){
    $(".sp2d").change(function(){
        alert(this.id)
    })
})

Answer 2

如果我理解正确，表格的每一行都包括：

anggaran（预算）字段[固定值]
sp2d（花费至今）字段[用户输入]。

您希望在每个sp2d（支出到目前为止）值与其对应的anggaran（预算）值相比更改时执行检查。

为此，您不需要知道任何一个字段＆＃39;标识。只需找到相对于的anggaran字段，无论sp2d字段触发更改事件。

首先，从HTML中删除onchange="tesbos()"。

然后将此代码粘贴到文档的HEAD中的<script></script>标记之间（如果您的代码以这种方式组织，则粘贴在.js文件中）。

jQuery(function($) { $("#containerID").on('change', ".sp2d", tesbos); // where containerID is the ID of eg. a DIV in which the YII table sits function tesbos() { var sp2d_value = $(this).val(); var anggaran_value = $(this).closest("tr").find(".anggaran").val();//find the anggaran field in the same row, and grab its value. console.log(anggaran_value, sp2d_value); if(sp2d_value > anggaran_value) { //anggaran is exceeded ... } else { //anggaran is not exceeded ... } } });

jquery如何检测当前输入id

2 个答案: