HTML Form with Javascript function is not submitted

I have the following code in HTML, where the variable opciones_visualizaciones (visualization options) is a list with 4 strings which are iterated there. This works perfectly since these are displayed in the HTML, but when I press one of them, since it is an "a", it should be submitted due to the javascript function, but it does not send any data to the server. Why is it not being submitted?

Thanks in advance

<div class="bloque_izquierda_medio">
    <ul>
    {% for opcion in opciones_visualizacion %}
        <form id="{{opcion}}" name={{opcion}} action="/RAI/Analisis/InfoCompeticion" method="POST">
            <input type="hidden" name="competicion_elegida" value={{competicion_elegida['id_competicion']}}/>
            <input type="hidden" name="temporada" value={{temporada_elegida}}/>
            <input type="hidden" name="opcion_visualizacion" value={{opcion}}/>
        </form>
        {% if opcion != opcion_visualizacion_elegida %}
            <li><a onclick="javascript:document.getElementById({{opcion}}).submit();return false;">{{opcion}}</a></li>
        {% else %}
            <li class="active"><a onclick="javascript:document.getElementById({{opcion}}).submit();return false;">{{opcion}}</a></li>
        {% endif %}
    {% endfor %}
    </ul>
</div>

I think the problem is that javascript does not find the ID, so I tried to change my function, the ID, the name...