How to add amount in duplicated input type text and display added amount

user_16414240 0
Viewed 157

I am trying to add duplicate amount value and display output in input text(get_amount) which is when one clicks addmilistone button. For example; When a user click add button, the field duplicates, and when the user enters the amount on both inputs its add and displays in input type text.

Html The code below is being duplicate when the user clicks +addmilistone

<div id="fieldset"  class="row">
 <div class="modal-body">
    <input type="button" class="btn btn-primary" id="addmilistone" value="+addmilistone"/>

      <div id="fieldset"  class="row">
      <div class="col-sm-4">
        <div class="form-group">
          <label for="m_description">Description</label>
          <input type="text" name="m_description" id="m_description" placeholder="milestone Description" class="form-control">
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <label for="ddate">Due Date</label>
          <input type="date" name="ddate" id="ddate" class="form-control">
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <label for="amount">Amount</label>
          <input type="text"  id="i_amount"  class="form-control">
        </div>
      </div>
    </div>
  </div>
</div>

Display Input type The code is where the calculation is being displayed when one input amount in input type id="i_amount", that wether in a single row of inputs or duplicates.

  <input type="number" id="get_amount" class="form-control" name="">

Scripts

This script is duplicating the row of inputs

<script type="text/javascript">
  (function(){
    
    var button = document.getElementById("addmilistone");
    
    button.addEventListener("click", function() {
        var sourceNode = document.getElementById("fieldset");
        var node = duplicateNode(sourceNode, ["id", "name", "placeholder"]);
        
        sourceNode.parentNode.appendChild(node);
    }, false);

    
    var counter = 0;
    function duplicateNode(/*DOMNode*/sourceNode, /*Array*/attributesToBump) {
        counter++;
        var out = sourceNode.cloneNode(true);
        if (out.hasAttribute("id")) { out["id"] = bump(out["id"]); }
        var nodes = out.getElementsByTagName("*");
        
        for (var i = 0, len1 = nodes.length; i < len1; i++) {
            var node = nodes[i];
            for (var j = 0, len2 = attributesToBump.length; j < len2; j++) {
                var attribute = attributesToBump[j];
                if (node.hasAttribute(attribute)) {
                    node[attribute] = bump(node[attribute]);
                }
            }
        }
        
        function bump(/*String*/str) {
            return str + "_" + counter;
        }
      
        return out;
    }

})();

</script>
<script>
$('#i_amount').keyup(function(){
    $('#get_amount').val(this.value);
});
</script>

enter image description here

html jquery javascript
1 Answers

Do the calculation after the input is outof focus.. In your code u was just selecting the first input

Code

(function () {

        var button = document.getElementById("addmilistone");

        button.addEventListener("click", function () {
            var sourceNode = document.getElementById("fieldset");
            var node = duplicateNode(sourceNode, ["id", "name", "placeholder"]);

            sourceNode.parentNode.appendChild(node);
        }, false);


        var counter = 0;

        function duplicateNode( /*DOMNode*/ sourceNode, /*Array*/ attributesToBump) {
            counter++;
            var out = sourceNode.cloneNode(true);
            if (out.hasAttribute("id")) {
                out["id"] = bump(out["id"]);
            }
            var nodes = out.getElementsByTagName("*");

            for (var i = 0, len1 = nodes.length; i < len1; i++) {
                var node = nodes[i];
                for (var j = 0, len2 = attributesToBump.length; j < len2; j++) {
                    var attribute = attributesToBump[j];
                    if (node.hasAttribute(attribute)) {
                        node[attribute] = bump(node[attribute]);
                    }
                }
            }

            function bump( /*String*/ str) {
                return str + "_" + counter;
            }

            return out;
        }

    })();
    $('#get_amount').val(0)
    $('body').on('focusout','[id^="i_amount"]',function () {
        
        var sum = Number($('#get_amount').val());
        sum += Number($(this).val());
        $('#get_amount').val(sum);
    });
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

    <div class="container">
        
   
    <div class="row">
        <div class="row col-12">

            <input type="button" class="btn btn-primary" id="addmilistone" value="+addmilistone" />
        </div>

            <div id="fieldset" class="row">
                <div class=" col-sm-4 ">
                    <div class="form-group">
                        <label for="m_description">Description</label>
                        <input type="text" name="m_description" id="m_description" placeholder="milestone Description"
                            class="form-control">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="ddate">Due Date</label>
                        <input type="date" name="ddate" id="ddate" class="form-control">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="amount">Amount</label>
                        <input type="text" id="i_amount" class="form-control amount">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">

            <input type="number" id="get_amount" class="form-control" name="">
        </div>
    </div>
</div>

user_107063950
Related