CODEWITHSUNDEEP
javascriptjquery
mishor
mishor

Reputation: 25

Adding more values from another field with JavaScript

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));
}

});

Upvotes: 2

Views: 108

Answers (2)

Guillaume Georges
Guillaume Georges

Reputation: 4020

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

Upvotes: 1

pietroSV
pietroSV

Reputation: 27

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/

Upvotes: 0

Related Questions