0

I am creating the multiple inputs dynamically on the click of the add button. And want to calculate the value of inputs on change of value dynamically. but only the first inputs value is calculating dynamically on change of value. after clicking the add button not working onchange event.

My HTML form are as below

<body>
  <div class="form-group" style="overflow-x:auto;">
    <form id="frm" name="frm" method="POST" action="{% url 'account' %}">
      {% csrf_token %}
      <table class="form-table">
        <tr valign="top">
          <th>Party Name</th>
          <th>Item Name</th>
          <th>Quantity</th>
          <th>Rate</th>
          <th>Amount</th>
          <th>Date</th>
        </tr>
        <tr valign="top">
          <td id="container_partyname">
            <input type="text" name="partyname" style="margin:5px;" />
          </td>

          <td id="container_itemname">
            <input type="text" name="itemname" style="margin:5px;" />
          </td>
          <td id="container_quantity">
            <input
              type="text"
              name="quantity"
              style="margin:5px;"
              onchange="add()"
            />
          </td>
          <td id="container_rate">
            <input
              type="text"
              name="rate"
              style="margin:5px;"
              onchange="add()"
            />
          </td>
          <td id="container_amount">
            <input
              type="text"
              name="amount"
              style="margin:5px;"
              readonly="readonly"
              value=""
            />
          </td>
          <td id="container_date">
            <input type="date" name="date" style="margin:5px;" />
          </td>
        </tr>
      </table>

      <input
        type="submit"
        value="Save"
        style="padding-right: 20px; padding-left: 20px; float: right;"
        class="btn btn-success"
      />
    </form>
  </div>
</body>

javascript code is as follow

<html>
  <head>
    <script type="text/javascript">
      $(document).ready(function () {
      $('#increment').click(function(){
        var partyname = $("#container_partyname");
        var input;
        var input = $("
      <input>").attr("type","text").attr("name","partyname").attr("style","margin:5px;");
        var br = $("<br>");
        partyname.append(br);
        partyname.append(input);

        var itemname = $("#container_itemname");
        var input = $("
        <input>").attr("type","text").attr("name","itemname").attr("style","margin:5px;");
        var br = $("<br>");
        itemname.append(br);
        itemname.append(input);
        var quantity = $("#container_quantity");
        var qinput = $(" <input>").attr("type","text").attr("name","quantity").attr("style","margin:5px;").attr("onchange","add()");
        var br = $("<br>");
        quantity.append(br);
        quantity.append(qinput);
        var rate = $("#container_rate");
        var rinput = $("<input>").attr("type","text").attr("name","rate").attr("style","margin:5px;").attr("onchange","add()");
        var br = $("<br>");
        rate.append(br);
        rate.append(rinput);
        var amount = $("#container_amount");
        var ainput = $("<input>").attr("type","text").attr("name","amount").attr("style","margin:5px;");
        var br = $("<br>");
        amount.append(br);
        amount.append(ainput);
        var date = $("#container_date");
        var input = $("<input>").attr("type","date").attr("name","date").attr("style","margin:5px;");
        var br = $("<br>");
        date.append(br);
        date.append(input);
        });

        });
    </script>
    <script type="text/javascript">
      function add() {
        var quantity = document.frm.quantity.value;
        var rate = document.frm.rate.value;
        var amnt = Number(quantity) * Number(rate);
        document.frm.amount.value = amnt;
      }
    </script>
  </head>
</html>
Raghul SK
  • 1,256
  • 5
  • 22
  • 30
saurav kumar
  • 11
  • 2
  • I suggest you read more about [event Delegation](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) on dynamically created element in jQuery - **Also** instead of adding multiple append functions to add another row of inputs. Read more about [.clone()](https://api.jquery.com/clone/) to clone all the elements from your existing elements on page with same css and stuff. – Always Helping Jul 12 '20 at 06:53
  • You can't repeat ID's in a page. Use classes instead then loop over each row and do the calculations based on the elements contained within a row instance by querying those elements only – charlietfl Jul 12 '20 at 07:36

0 Answers0