HTML & Python - For loops and dynamic forms creation-CodePudding

I am new working with HTML and Python, and I am trying to develop some code for personal use.

The goal is to show the different leagues with a color code: red or green, and if I click on a league, it opens a different tab with more detailes information of that league, that is to say, it would be necessary to send the id of the league to the server to be able to use it for the next tab. I am trying to use a form, but it is not working. The if-else condition is just to choose whether the color is red or green based on a league condition.

The problem I am having is that, creating the form with the for loop as I am doing, the league id that sends is always the same (1st league of the lopp), it is not dynamic, then I would like to know how to program it to be able to see the chosen league. No matter on what league you click, you always access the same league information. I guess there is something wrong with the code because it is not dynamic, it does not display info based on my selection. My idea was to have multiple forms created with the loop, one for each league, but it doesnt work.

I would really appreciate your help, thank you very much!

This is the HTML code:

competicionesAPIDict is a dict where the key is the country and the values the different leagues that exists in it.
competicionesAPI is the value obtained from the dict, that is iterated to get the info from each league.

<div style="width: 80%; height: 70%; background-color: azure; width: max-content">
        {% for paisAPI, competicionesAPI in competicionesAPIDict.items() %}
          <div >
          <h4>{{paisAPI}} </h4> 
          <img src={{dict_banderas_pais[paisAPI]}} alt="No funciona" width="30px" height="30px"/>
            {% for competicionAPI in competicionesAPI %}
              {% if dict_hay_competicion[competicionAPI['id']] %}
                <form name="siCompeticion" {{competicionAPI['id']}} method="POST" action="/RAI/API/competicion">
                  <input type="hidden" name="id_competicion" value={{competicionAPI['id']}} />
                  <a href=/RAI/API/competicion style="font-size: 14px;margin-left: 17px;color: green;"
                      onclick="document.forms[0].submit();return false;">{{competicionAPI['name']}}</a>
                </form>
              {% else %}
                <form name="noCompeticion" {{competicionAPI['id']}} method="POST" action="/RAI/API/competicion">
                  <input type="hidden" name="id_competicion" value={{competicionAPI['id']}} />
                  <a href=/RAI/API/competicion style="font-size: 14px;margin-left: 17px;color: red;"
                      onclick="document.forms[0].submit();return false;">{{competicionAPI['name']}}</a>
                </form>
              {% endif %}
            {% endfor %}
          </div>
        {% endfor %}

CodePudding user response：

OK, I was wrong in a comment about hidden input field value being a problem. I mean, it is still a problem, but it should work as is, except for JS code bug you made.

So first, what gave me wrong impression was that you would usually make one form per request, and then do as I said, set the forms values correctly to provide data of the request upon submit. You made a lot of forms, one per iteration, which is not wrong, but what you did is say in onclick event to activate always the first form on the site. I.e.

document.forms[0]

so, whatever you click, only first form will be submitted with the value of the first hidden input field in it.

As you have if-else clauses, I wouldn't rely on form indexes within the DOM, but use something to create unique IDs per each form, then use document.getElementById() to get that exact form and submit it. But you already gave your forms names, so you can use those with document.getElementsByName() or give the form an ID of same value. Names does not need to be unique, IDs should.

Just a little sample:

<form id="siCompeticion" {{competicionAPI['id']}} ...>
    <input type="hidden" name="something" value={{competicionAPI['id']}}>
    <a href="#" onclick="javascript:document.getElementById("siCompeticion" {{competicionAPI['id']}}).submit();return false;">CLICK ME</a>
</form>

In your place I would most probably write a little JS code to perform AJAX request, most likely using jquery. In any case, I would avoid making a lot of forms.