与表单中所有元素相对应的克隆元素的事件 [英] Cloned elements' events corresponding to all elements in the form

问题描述

我成功克隆了我的表行，该表行具有从数据库中检索到的值.但是我没有什么问题.我对所有元素都使用了类，因为clone会重复ID.不会出现任何问题，因为它无法唯一地定位每个元素.哪一种方法可以使每个元素/行在此处唯一?

I successfully cloned my table rows, which has values retrieved from database. However I have few issues with it.I used class for all the elements as clone will duplicate IDs.No the problem raises because it unable to target each element uniquely. WHat's the way to do make each element / row unique here?

功能如何工作:

• 选中第一个选择框后，该选定ID的项目将出现在下一列中，然后是价格文本框和数量文本框.如果两者都填满，则会自动显示最后一个总金额的文本框.

与克隆有关的问题是: *从第一行/原始行中选择选择框，所有克隆的项目都将更新为值.金额文本框也是如此，反之亦然.

Issues with the cloning are: * WHen select box selected from the first/original row, all cloned items are updated with the value.Same goes for amount textbox and vise-versa.

我的脚本:

<script>
  var harga;
  var qty;

  $("input[name^=harga]").on("keyup", function () {
    alert($(this).attr("id"));
    console.log($(this).val());
    harga = $(this).val();
  });

  $(".qty").on("keyup", function () {
    console.log($(this).val());
    qty = $(this).val();
    var amount = harga * qty;
    $(".amount").val(amount);
  });

  $(document).ready(function () {
    $(".sub_item").hide();
    $('.gr').change(function () {
      var gr_id = $(this).find('option:selected').val();
      console.log(gr_id);
      var agency_id = '<?php echo $_SESSION['
      agency_id
      '];?>';
      /*show branch for selected department starts*/
      var data;
      $.ajax({
        type: "POST",
        dataType: "json",
        url: s_path + "get-item.php?group=" + gr_id + "&agency=" + agency_id, //Relative or absolute path to response.php file
        data: data,
        success: function (data) {
          $(".sub_item").show();
          $(".it_id").empty();
          for (i = 0; i < data.length; i++) {
            $(".it_id").append("<option value='" + data[i].item_id + "'>" + data[i].item_name + "</option>");
          }
          if (data.length == "") {
            $(".it_id").append("<option>No items found</option>");
          }
          console.log(data);
        }});//end success
      /*show branch ends*/
    });
  });

  $("#more_items").on("click", function () {
    alert("Hi");
    $(".clone_this").clone(true, true).insertBefore("#last_e");
  });

  $(function () {
    $("#hide1").hide();
    $("#hide2").hide();
    $("#hide3").hide();
    $('#faktor').change(function () {
      var val = $(this).val();
      //alert($(this).val());
      if ($.trim(val) == 1) {
        $("#hide1").show();
      } else {
        $("#hide1").hide();
      }
    });

    $('#insurance').change(function () {
      $("#hide2").show();
      var val = $(this).val();
      //alert($(this).val());
      if ($.trim(val) == 1) {
        $("#hide2").show();
      } else {
        $("#hide2").hide();
      }
    });

    $('#bon').change(function () {
      $("#hide3").show();
      var val = $(this).val();
      //alert($(this).val());
      if ($.trim(val) == 1) {
        $("#hide3").show();
      } else {
        $("#hide3").hide();
      }
    });
  });
</script>

表格

<form action="#" method="POST" id="submit_item">
    <input type="text" name="contract_id" value="" id="contract_id2"/>
    <table>
        <tr>
            <th>Group Item</th>
            <th>Nama Item</th>
            <th>Harga</th>
            <th>Kuantiti</th>
            <th>Amount</th>
        </tr>
        <tr class="clone_this">
            <td>
                <select name='group' style="width:80px;" class="gr">
                    <option>Choose group</option>
                    <?php
                        $group = $agency->show_all_group();
                        foreach ($group as $k => $v) {
                            $i = 0;
                            $i++;
                    ?>
                        <option value="<?php echo $v['group_id'] ?>"><?php echo $v['group_name'] ?></option>
                    <?php
                        }
                    ?>
                </select>
            </td>
            <td class="sub_item">
                <select name='item' style="width:100px;" class="it_id">

                </select>
            </td>
            <td><input type="text" name="harga_<?php echo $i; ?>[]" id="<?php echo $i; ?>" value="" class="harga"/></td>
            <td>
                <input type='text' size='2' value="" name='qty[]' class='qty'/>
            </td>
            <td><input type="text" name="amount[]" class="amount" value=""/></td>
        </tr>
        <tr id="last_e">
            <td colspan="3"><input type="submit" name="submit" value="Next" id="item_s"/></td>
            <td><input type="button" value="Add more items" id="more_items"/></td>
        </tr>
    </table>
</form>

推荐答案

您需要找到相关元素才能进行更新

You need find the relative elements to update so

$(document).ready(function () {

    $('#submit_item').on('keyup', '.qty, .harga', function () {
        var $tr= $(this).closest('tr');

        $tr.find('.amount').val($tr.find('.harga').val() * $tr.find('.qty').val() || 0)
    })

    $(".sub_item").hide();
    $('#submit_item').on('change', '.gr', function () {

        var $this = $(this),
            $tr = $this.closest('tr'),
            gr_id = $this.find('option:selected').val(),
            $subitem = $tr.find('.sub_item'),
            $it_id = $tr.find('.it_id');

        var agency_id = '<?php echo $_SESSION['agency_id'];?>';

        /*show branch for selected department starts*/
        var data;
        $.ajax({
            type: "POST",
            dataType: "json",
            url: s_path+"get-item.php?group="+gr_id+"&agency="+agency_id, //Relative or absolute path to response.php file
            data: data,
            success: function (data) {
                $subitem.show();
                $it_id.empty();
                for (i = 0; i < data.length; i++) {
                    $it_id.append("<option value='" + data[i].item_id + "'>" + data[i].item_name + "</option>");
                }
                if (data.length == "") {
                    $it_id.append("<option>No items found</option>");
                }

                console.log(data);
            }
        }); //end success

        /*show branch ends*/
    });
});

演示:小提琴

这篇关于与表单中所有元素相对应的克隆元素的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！