How can i multiply or add the values of a dynamic javascript input field

Question

The input field are been generated by javascript. I want to pick each value no matter how many input field I generate...so I can use the values for some calculations.

<form action="{{ route('addmorePost') }}" method="POST">
<div class="table-responsive">
                   <span id="result"></span>

                   <table class="table table-bordered">
                   <thead>
                  <tr>
                      <th width="55%">Sales Representative</th>
                      <th width="15%">Target per day</th>
                      <th width="15%">Monthly day</th>
                      <th width="10%"> <a href="#" class="btn btn-info addRow">+ </a> </th>
                  </tr>
                 </thead>
                 <tbody>
                    <tr> 
                        <td> 
              <input type="text" name="target[]" class="form-control target" id="target" oninput="calc()">
                       </td>

                       <td><span id="sum1" onchange="add()">0</span> </td>

                       <td> <a href="#" class="btn btn-danger remove">- </a> </td>
                      </tr>
                 </tbody>
                 <tfoot>


                    <tr>
                       <th>  
                       </th>
                       <th> Total</th>
                       <th><span id="sumx">0</span> </th> 
                     </tr>

                   </tfoot>


                   <script>                
                      function add() {

                      var ven1 = document.getElementById('sum1').innerHTML;
                      var valuey = document.getElementById('result1').innerHTML || 0; 
                      console.log(ven1);
                      console.log(valuey);
                      document.getElementById('sumx').innerHTML = parseInt(ven1) + parseInt(valuey);

                    }
                   </script>




             </table>

              </button>

            </form>

BELOW IS THE JAVASCRIPT FOR GENERATED INPUT FIELDS

<script type="text/javascript">

  $(document).ready(function(){      
  var postURL = "http://localhost/bcwater/public/addmore";
  var i=1; 

  $('.addRow').on('click', function(){
    i++;
    addRow();
  });

  function addRow(){
     var tr = '<tr class="dynamic-added">'+
                '<td>'+
                '</td>'+
                '<td><input type="text" name="target[]" id="target2" class="form-control" oninput="calc()" /> </td>'+
                '<td><span id="result1">0</span> </td>'+
                '<td> <a href="#" class="btn btn-danger remove">- </a> </td>'+

              '</tr>';
          $('tbody').append(tr);
  }; 

  $('tbody').on('click','.remove', function(){
    $(this).parent().parent().remove();
  });



});

THIS IS THE CODEI HAVE TRIED TO GET THE VALUES , MULTIPLY THEM BY 26 AND DISPLAY THE ANSWER ON sum1

    <script>


    function calc(){       
    var value1 = document.getElementById('target').value || 0;
    document.getElementById('sum1').innerHTML = parseInt(value1 * 26);

    var value2 = document.getElementById('target2').value; 
    document.getElementById('result1').innerHTML = parseInt(value2 * 26);


    var ven1 = document.getElementById('sum1').innerHTML;
    var valuey = document.getElementById('result1').innerHTML || 0; 
    console.log(ven1);
    console.log(valuey);
    document.getElementById("products").disabled = false;
    document.getElementById('sumx').innerHTML = parseInt(ven1) + parseInt(valuey);

    }

    </script>

PLEASE HELP!!!...WHAT AM I DOING WRONG

I need a way to auto change the ID (target2)..so that as i am adding more input field, the value changes and i can pick each value and multiply them as i want — Emmanuel Iyen
– Emmanuel Iyen, Commented Oct 7, 2019 at 9:10
I think you should create a jsfiddle to properly describe the current behaviour so people can know how to help out. Edit your question with the link once completed — phainix
– phainix, Commented Oct 7, 2019 at 12:24

phainix · Accepted Answer · 2019-10-07 14:31:51Z

1

From your code every time you call addRow() the ID is always target2. To auto change the ID, have a variable that holds the current ID and concatenate the string, you can make use of the var i.

$(document).ready(function(){      
  var postURL = "http://localhost/bcwater/public/addmore";
  var i=1; 

  $('.addRow').on('click', function(){
    i++;
    addRow(i);
  });

  function addRow(i){
     var tr = '<tr class="dynamic-added">'+
            '<td>'+
            '</td>'+
            '<td><input type="text" name="target[]" id="target' + i + '" class="form-control" oninput="calc()" /> </td>'+
            '<td><span id="result' + i + '">0</span> </td>'+ //This is modified to attach the current index to result
            '<td> <a href="#" class="btn btn-danger remove">- </a> </td>'+

          '</tr>';
      $('tbody').append(tr);
  }; 

  $('tbody').on('click','.remove', function(){
     $(this).parent().parent().remove();
  });
});

The i variable should always hold the index for the last row added

To multiply the values you have to make use of the same i variable, the function calc() should look like this, i suggest you rename i to something descriptive:

function calc(){       
    var value1 = document.getElementById('target').value || 0;
    document.getElementById('sum1').innerHTML = parseInt(value1 * 26);

    for(var j = 1; j <= i; j++) {
        var value2 = document.getElementById('target' + j).value; 
        document.getElementById('result' + j).innerHTML = parseInt(value2 * 26); // This is to target the result span that corresponds to the input value
    }


    var ven1 = document.getElementById('sum1').innerHTML;
    var valuey = document.getElementById('result1').innerHTML || 0; 
    console.log(ven1);
    console.log(valuey);
    document.getElementById("products").disabled = false;
    document.getElementById('sumx').innerHTML = parseInt(ven1) + parseInt(valuey);

}

edited Oct 7, 2019 at 14:31

answered Oct 7, 2019 at 13:40

phainix

1792 silver badges9 bronze badges

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

2 Comments

Emmanuel Iyen Over a year ago

Thank u..i am able to get dynamic ID now by this code...id="target' + i + '"....can u please tell me or share a code for me to multiply the values of each ID?

phainix Over a year ago

Please see the edit above, note the change to <span id="result">

Emmanuel Iyen · Accepted Answer · 2019-10-07 14:57:32Z

Thank u..i was able to do it this way...after i increate the value of the id like this id="target' + i + '" and also span

so i use the below code to get the values manually...not the best option, but it solved my problem cos i dont need more than three input fields

        function calc(){     

        var value1 = document.getElementById('target').value || 0;
        document.getElementById('sum1').innerHTML = parseInt(value1 * 26);

        var value2 = document.getElementById('target2').value; 
        document.getElementById('result2').innerHTML = parseInt(value2 * 26);

        document.getElementById("products").disabled = false;


        var value2 = document.getElementById('target3').value; 
        document.getElementById('result3').innerHTML = parseInt(value2 * 26);




        var ven1 = document.getElementById('sum1').innerHTML || 0;
        var valuey = document.getElementById('result2').innerHTML || 0; 

        var valuenew = document.getElementById('result3').innerHTML || 0; 



        document.getElementById('sumx').innerHTML = parseInt(ven1) + parseInt(valuey) + parseInt(valuenew);

        }

        </script>

Collectives™ on Stack Overflow

How can i multiply or add the values of a dynamic javascript input field

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related