Reflect total value when Onchange input field after append data : JQUERY

Question

I have an issue where I can't reflect the total amount of value in specific item, I tried putting an ID and call it whenever it will onCHange the input fields and it didn't reflect at all, is there any problem/lacking? , and also I want to remove the specific item in each row if the button clicked the remove item, is there any wrong with the current code?

$("#allcb").change(function () {
  $('tbody tr td input[type="checkbox"]').prop(
    "checked",
    $(this).prop("checked")
  );
});

$(document).on( "keyup",  ".quantity_input",function() {
  var value_input = $(".quantity_input").val();
  var price_value = $(".price_value").html();
  var total_value = parseInt(value_input) * parseInt(price_value);
  $(".total_value_row").text(total_value);
});

$(document).on("click",".remove_data" , function(){
        alert("I've been clicked! remove the row item");
});

$(document).ready(function () {
  $("#add_data").click(function () {
    var grid = document.getElementById("Table1");
    var message = "Values                 Description\n";

    var checkBoxes = grid.getElementsByTagName("INPUT");
    var str = ''

    for (var i = 0; i < checkBoxes.length; i++) {
      if (
        checkBoxes[i].checked &&
        checkBoxes[i].name !== "allcb" &&
        !checkBoxes[i].hasCovered
      ) {
        var row = checkBoxes[i].parentNode.parentNode;
        str +=
          '<div class="row" ><div class="col-md-8"><p class="me-3"> ' +
          '<a href="#" class="text-body">' +
          '<button type="button" class = "remove_data" id="remove_data">Remove item</button></a>&nbsp' +

          '<span>Quantity</span>&nbsp' +
          row.cells[2].innerHTML +
          "</a></p> " +
          '<span class="me-1">Price </span>&nbsp' +
          '<span class="me-1 price_value">' +
          row.cells[1].innerHTML +
          "</span>&nbsp" +
          '<input type="number" id="quantity_input" class="form-control form-control-sm w-px-75 quantity_input" value="1" min="1" max="5"/>&nbsp'+
          '<span class= "total_value_row" >total value is</span> '+
          "</div></div><hr>";
          checkBoxes[i].hasCovered = true;
        }
      }
      $(".whole-div-class").append(str);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="1" id="Table1">
  <thead>
    <tr>
      <th>
        <input type="checkbox" id="allcb" name="allcb" />
      </th>
      <th>Price</th>
      <td>Quantity</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" id="cb1" name="cb1" />
      </td>
      <td>200</td>
      <td> 25</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="cb2" name="cb2" />
      </td>
      <td>300</td>
      <td>30</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="cb3" name="cb3" />
      </td>
      <td>400</td>
      <td>50</td>
    </tr>
  </tbody>
</table>
<br />
<button type="button" id="add_data">Add data</button>
<hr>

<div class="row whole-div-class"></div>

You have no code in the `change` handler. Please post the code you tried that doesn't work, we're not going to write it for you. — Barmar, May 04 '23 at 16:52
IDs must be unique, you shouldn't use the same `id="quantity"` in every row of the table. Use `class="quantity"` — Barmar, May 04 '23 at 16:54
@Barmar The problem is even if I put an alert with my onchange it doesn't appear the alert — marivic valdehueza, May 05 '23 at 01:19
So you changed the ID to a class, and changed your event handler to something like `$(document).on("change", ".quantity_input", function ...)` and it didn't work? — Barmar, May 05 '23 at 15:52
Please post your updated code and I'll reopen so we can help you fix it. — Barmar, May 05 '23 at 15:52
@Barmar I've updated the code above, it works fine but the problem is when I want to get the value of selected onchange input fields, it only alert the the first row always, let say I have 3 selected items and I changed the second row to `5 ` quantity the problem is it will alert the first row not the second row which is value of `5` — marivic valdehueza, May 06 '23 at 07:54
@Barmar Updated snippet : I tried the code above but it appears only the first row values being calculated and it appears all rows being calculated by the first row, how can I calculate it specifically? — marivic valdehueza, May 06 '23 at 09:02
`$(".quantity_input").val()` should be `$(this).val()`. `$(".price_value").html()` should be `$(this).siblings(".price_value").html()`. Otherwise you're referring to the first element in the page with these classes, not the one that was changed. — Barmar, May 06 '23 at 17:50

Reflect total value when Onchange input field after append data : JQUERY

0 Answers0