CODEWITHSUNDEEP
javascriptjquery
Hamza Zahir
Hamza Zahir

Reputation: 69

check value of element by class and edit value if element exists otherwise add new html

I am adding some elements to the DOM dynamically and and I want to check and edit the value of itemid if it exists before adding new elements by comparing the value of itemid with an id, if the value is equal to the id I want to edit the value of the element by adding 1 to the previous value, if the value is not equal then I want to add a new set of elements. I have the code below but can't get it to work as intended.

    $("#topitems").on("click", ".topitems", function(e) {
    e.preventDefault();

    var     values = JSON.parse(localStorage.getItem("source"));
            var itemid = values[i].value;


if (document.getElementsByClassName("itemid").length) {
$('.itemid').each(function() {
  var enteredValue = $(this).val();
if(enteredValue) {
  if (parseInt(enteredValue) == itemid) {
  var oldQty = $(this).parent().parent().find("input[name=quantity]").val()
  $(this).parent().parent().find("input[name=quantity]").val(parseInt(oldQty)+1)

}

}
else {
  $('#cart_contents').prepend('
<tr>
    <td>
        <a href="'+line+'">
            <span class="glyphicon glyphicon-trash"></span>
        </a>
    </td>
    <td style="align: left !important;">'+label+'&nbsp;&nbsp;(stock:'+inventory+')  </td>
    <td>
        <select name="unit_type" id="unit_type" style="'+isdisplay+'" class="show-menu-arrow" data-style="btn-default btn-sm" data-width="auto">
            <option value="Kg">Kg</option>
            <option value="Gr">Gr</option>
        </select>
    </td>
    <td>
        <input type="number"  name="quantity"  id="quantity"  value="1" class="quantity form-control input-sm" tabindex="2" autocomplete="off">
        </td>
        <td>
            <input  type="hidden" class="line" name="line"  value="'+line+'">
                <input  type="hidden" name="itemid" class="itemid"  value="'+value+'">
                    <input  type="hidden" name="costpricemarker" id="costpricemarker" value="'+cost_price+'">
                        <input  type="hidden" name="costprice" id="costprice" value="'+cost_price+'">
                            <input type="hidden" name="hprice" id="hprice" value="'+price+'">
                                <input type="number" name="price" id="price" value="'+price+'" class="form-control input-sm" tabindex="3">
                                    <input  type="hidden"  name="tax" id="tax" value="'+tax+'" class="form-control input-sm" tabindex="2">
                                    </td>
                                    <td>
                                        <input type="hidden" name="discounttype" id="discounttype" value="'+discount+'">
                                            <input type="number" name="discount" id="discount" value="0"  class="form-control input-sm" tabindex="4">
                                            </td>
                                            <td>
                                                <span id="currlbltotal">
                                                    <? echo $this->config->item('currency_symbol');?>
                                                </span>
                                                <span id="total">'+price+'</span>
                                            </td>
                                        </tr>');  

}

});
}
 else {

  $('#cart_contents').prepend('
                                        <tr>
                                            <td>
                                                <a href="'+line+'">
                                                    <span class="glyphicon glyphicon-trash"></span>
                                                </a>
                                            </td>
                                            <td style="align: left !important;">'+label+'&nbsp;&nbsp;(stock:'+inventory+')  </td>
                                            <td>
                                                <select name="unit_type" id="unit_type" style="'+isdisplay+'" class="show-menu-arrow" data-style="btn-default btn-sm" data-width="auto">
                                                    <option value="Kg">Kg</option>
                                                    <option value="Gr">Gr</option>
                                                </select>
                                            </td>
                                            <td>
                                                <input type="number"  name="quantity"  id="quantity"  value="1" class="quantity form-control input-sm" tabindex="2" autocomplete="off">
                                                </td>
                                                <td>
                                                    <input  type="hidden" class="line" name="line"  value="'+line+'">
                                                        <input  type="hidden" name="itemid" class="itemid"  value="'+value+'">
                                                            <input  type="hidden" name="costpricemarker" id="costpricemarker" value="'+cost_price+'">
                                                                <input  type="hidden" name="costprice" id="costprice" value="'+cost_price+'">
                                                                    <input type="hidden" name="hprice" id="hprice" value="'+price+'">
                                                                        <input type="number" name="price" id="price" value="'+price+'" class="form-control input-sm" tabindex="3">
                                                                            <input  type="hidden"  name="tax" id="tax" value="'+tax+'" class="form-control input-sm" tabindex="2">
                                                                            </td>
                                                                            <td>
                                                                                <input type="hidden" name="discounttype" id="discounttype" value="'+discount+'">
                                                                                    <input type="number" name="discount" id="discount" value="0"  class="form-control input-sm" tabindex="4">
                                                                                    </td>
                                                                                    <td>
                                                                                        <span id="currlbltotal">
                                                                                            <? echo $this->config->item('currency_symbol');?>
                                                                                        </span>
                                                                                        <span id="total">'+price+'</span>
                                                                                    </td>
                                                                                </tr>');  

}

  });

Upvotes: 1

Views: 239

Answers (1)

Ben Stephens
Ben Stephens

Reputation: 3371

My jQuery is pretty rusty and I'm not sure I haven't lost some important details of what you're trying to do, but hopefully this is helpful:

const cart_row_string = (item_id) =>
  '<tr>' +
    '<td><input type="number" name="quantity" value="1" /></td>' +
    '<td><input type="hidden" name="itemid" class="itemid" value="' + item_id + '">' + item_id + '</td>' +
  '</tr>';

const add_item = (item_id) => {
  if(item_id) {
    const $table_body = $('#cart_table_body');
    const $item = $table_body.find('.itemid[value="' + item_id + '"]');

    if($item.length === 0) {
      $table_body.prepend(cart_row_string(item_id));
    } else {
      const $item_row = $item.closest('tr');
      const $quantity = $item_row.find('input[name="quantity"]');
      $quantity.val(parseInt($quantity.val()) + 1);
    }
  }
};

$('#add_button').click(() => add_item(parseInt($('#id').val())));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="id" name="id" type="number" />
<button id="add_button">Add</button>
<table id="cart_table">
  <thead><tr><th>Quantity</th><th>Item ID</th></tr></thead>
  <tbody id="cart_table_body"></tbody>
</table>

Upvotes: 1

Related Questions