how to get multiple input values in django loop (template) using javascript?

Question

I am trying to get the value of some input field in my django template, the form is in a loop e.g {% for p in prediction %} {% endfor %}.

I have this simple line to grab the id from the input field let odds = document.getElementById("odds").value

Based on the fact that i have all these function in a django loop, am i not supposed to get all the odds when i console.log(odds)

{% for p in prediction.prediction_data.all %}
  <form action="#" method="POST">
     <input type="text" value="{{ p.odds }}" id="odds">
     <input type="number" value="" name="amount" id="amount" onkeyup="CalculateNewBalance()">

    <script>
      function CalculateNewBalance(){
          let odds = document.getElementById("odds").value
          let stake_amount_input = document.getElementById("amount")
                                                 
          console.log(odds);
    </script>
    </form>
{% endfor %}
[![enter image description here][1]][1]

Ankit Tiwari · Accepted Answer · 2022-12-18 18:31:57Z

1

Instead of using id use class or attribute becouse id is used to identify unique element in DOM. Also you don't have to put your script inside loop and instead of adding form inside loop put input fields.

Your final code will look like this

<form action="#" method="POST">
  {% for p in prediction.prediction_data.all %}
     <input type="text" value="{{ p.odds }}" class="odds">
     <input type="number" value="" name="amount" class="amount" onkeyup="CalculateNewBalance(event)">
  {% endfor %}
</form>

<script>
  function CalculateNewBalance(e){
      let t = e.target;
      let odds = t.previousElementSibling.value
      let stake_amount_input = t
      console.log(odds);
  }
</script>

Running code example

function CalculateNewBalance(e){
    let t = e.target;
    let odds = t.previousElementSibling.value
    let stake_amount_input = t
    console.log(odds);
}

<form action="#" method="POST">
    <input type="text" value="1.0" class="odds">
    <input type="number" value="" name="amount" class="amount" onkeyup="CalculateNewBalance(event)">

    <input type="text" value="2.0" class="odds">
    <input type="number" value="" name="amount" class="amount" onkeyup="CalculateNewBalance(event)">
    <input type="text" value="3.0" class="odds">
    <input type="number" value="" name="amount" class="amount" onkeyup="CalculateNewBalance(event)">
  </form>

edited Dec 18, 2022 at 18:31

answered Dec 18, 2022 at 18:25

Ankit Tiwari

4,7654 gold badges20 silver badges49 bronze badges

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

3 Comments

Destiny Franks Over a year ago

You saved ma a**, thanks alot buddy.

Destiny Franks Over a year ago

Hi again, i have a little issue that i have been encountring since that day you helped me. i want to calculate two input fields and add then to the innerHTML, the first one in the loop gets calculated but the other once in the loop does not.

Destiny Franks Over a year ago

I made a diffrent question for that, here it is stackoverflow.com/questions/74873802/…

Collectives™ on Stack Overflow

how to get multiple input values in django loop (template) using javascript?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related