Adding more values from another field with JavaScript

Question

Need help to solve a JavaScript problem. i am working on an invoice in which i want to add more values to quantity field. i am trying with script given in JSFiddle.

The problem is when i click on edit , it should popup a dialog box and by entering data in add field it should be added to current quantity of a specific item.

https://jsfiddle.net/programmer/LLmrp94y/16/

JS script

$(document).on('change', '.addQty', function () {
  id_arr = $(this).attr('id');
id = id_arr.split("_");
add = $('#add_'+id[1]).val();
qty = $('#quantity_'+id[1]).val();
if (add != '' && typeof (add) != "undefined") {
  $('#add_'+id[1]).val();
  added = parseFloat(qty) + parseFloat(add);
  $('#qtY_'+id[1]).val(added);
  priceAfter = $('#price_'+id[1]).val();
  $('#Total_'+id[1]).val((parseFloat(priceAfter) * parseFloat(added)).toFixed(2));

} else {
  $('#quantity_'+id[1]).val(qty);
  $('#Total_'+id[1]).val((parseFloat(price) * parseFloat(qty)).toFixed(2));
}

});

Guillaume Georges · Accepted Answer · 2018-05-11 12:25:59Z

1

I made it work by doing the following :

adding an id to your edit buttons, so we can retrieve the id of the line currently being edited
replacing your 'onchange' function by a addQuantity function that takes a parameter : the id of the line being edited.
fixing a couple issues with the ids used in the code written to calculate the new quantity and the new price

Also, I replaced your php code by hard coded ids. You're going to have to replace them.

EDIT : Since you don't want to show the current quantity in the dialog, I had to change the logic and update the table after close has been clicked. Otherwise it caused too many issues. Hope you like it.

$(document).ready(function() {
    calculateEachItemSubCost();
});

function calculateEachItemSubCost() {
    var qtys = document.getElementsByClassName('quantity');
    var price = document.getElementsByClassName('price');
    var item_costs = document.getElementsByClassName('totalLinePrice');

    for (var i = 0; i < item_costs.length; ++i) {
        item_costs[i].value = parseFloat(qtys[i].value) * parseFloat(price[i].value).toFixed(2);
    }
}
/* new function that replaces your 'onchange' listener. It handles the adding of a quantity on a given line, identified by the id parameter */
function addQuantity(id) {
    var add, added, priceAfter;
    add = $('#addedQuantity').val();

    console.log("Adding " + add + " on line " + id);
    if (add != '' && typeof add != "undefined") {
        ;
        
        added = parseInt($('.add').val()) + parseInt($('#quantity_' + id).val())
        $('#quantity_' + id).val(added);
        priceAfter = $('#price_' + id).val();
        $('#total_' + id).val((parseFloat(priceAfter) * parseFloat(added)).toFixed(2));

    } else {
        $('#quantity_' + id).val(qty);
        $('#Total_' + id).val((parseFloat(price) * parseFloat(qty)).toFixed(2));
    }
}

$(document).on('click', '.editnow', function(event) {
    var lineId, quantityField;
    // retrieving the id of the line that was clicked on 
    lineId = event.target.id.split("_")[1];
    quantityField = $("#quantity_" + lineId);
    $(".add").val("");
    $("#edit").dialog({
        show: "fold",
        hide: "fold",
        modal: true,
        title: "Edit",
        zIndex: 10000,
        close: function(event, ui) {
            addQuantity(lineId);
            $(this).hide();
        }
    });
});

#edit{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css"/>
<!DOCTYPE html>
<!-- Begin page content -->
<h1 class="text-center title">Invoice</h1>
<table>
   <thead>
      <tr>
         <th width="38%">Item Name</th>
         <th width="15%">Price</th>
         <th width="15%">Quantity</th>
         <th width="15%">Total</th>
         <th width="15%">Edit</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><input type="text" value="samsung galaxy s6" id="itemName_1" ></td>
         <td><input type="number" value="500" id="price_1" class="price"></td>
         <td><input type="number" value="1" id="quantity_1" class="quantity"></td>
         <td><input type="number" value="" id="total_1" class="totalLinePrice"></td>
         <td><button type="button" class="editnow" id="edit_1"> Edit </button></td>
      </tr>
      <tr>
         <td><input type="text" value="samsung galaxy s7" id="itemName_2" ></td>
         <td><input type="number" value="700" id="price_2" class="price"></td>
         <td><input type="number" value="1" id="quantity_2" class="quantity"></td>
         <td><input type="number" value="" id="total_2" class="totalLinePrice"></td>
         <td><button type="button" class="editnow" id="edit_2"> Edit </button></td>
      </tr>
   </tbody>
</table>
<div id="edit">
   <table>
      <tr>
         <th>Add</th>
      </tr>
      <tr>
         <td><input type="number" class="add" id="addedQuantity"></td>
      </tr>
   </table>
</div>

Your updated JSFiddle

edited May 11, 2018 at 12:25

answered May 11, 2018 at 10:13

Guillaume Georges

4,0204 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

mishor Over a year ago

its working fine but i don't want it on yes button because i am adding 1 another field also for subtracting. And when i click edit another item it should only show added qty from this item.

Guillaume Georges Over a year ago

I don't understand. What should the 'Yes' and 'No' button do. If your question, they only close the dialog. When do you want the quantity to be added and the price calculated? Please answer by editing your question.

mishor Over a year ago

i have updated JSFiddle i have removed yes and no button by replacing close.because i just want to close the dialog with this.and when i click on edit button it should only show previously added values if it is not edited it should display empty text field , instead of showing another edited item's value. because i am inserting edited value to a separate column of database.

Guillaume Georges Over a year ago

@mishor I can't see your replaced JSFiddle. Anyway I think I get it. See my edit. Is that what you want?

mishor Over a year ago

sorry, now it is updated ,your updated fiddle shows only current qtys.

|

pietroSV · Accepted Answer · 2018-05-11 10:05:54Z

0

I have edited it, but it does not work because of the php values not working, of course. I've added id to Edit buttons, and getting value from dialog. Based on the button id, you can enter value to corresponding quantity field

<button type="button" id="edit_<?php $i; ?>" class="editnow"> Edit </button>

Yes: function () {
        var id = $(this).attr('id');
        id = id.substring(id.indexOf('_')+1);
        alert($('#quantityVal').val()); // just check the value
        $('#quantity_'+id).val($('#quantityVal').val());
        $(this).dialog("close");    
    },

Edit dialog number field

<td><input type="number" class="add" id="quantityVal"></td>

https://jsfiddle.net/LLmrp94y/12/

answered May 11, 2018 at 10:05

pietroSV

375 bronze badges

1 Comment

mishor Over a year ago

thanks for your answer. but its still not working.alerts undefined.

Collectives™ on Stack Overflow

Adding more values from another field with JavaScript

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related