0

So what I have is some template logic that creates a HTML form for each key from a dictionary I am passing it :

{%if students%}

                    {%for data,student in students.iteritems%}

                        <form  onsubmit = "return false;" id="{{forloop.counter}}">
                            {% csrf_token %}

                            <tr>
                            <td>{{student.name}}</td>
                            {%ifequal student.grade ' '%}
                                <td><input type=text  size="1"  id ='Grade'     name='Grade' maxlength="1" /></td>
                                <td><input type=text  size="50" id = 'Feedback' name='Feedback' /></td>

                            {%else%}
                                <td><input type=text  size="1"  id ='Grade' name='Grade' maxlength="1" value = "{{student.grade}}"/></td>
                                <td><input type=text  size="50" id = 'Feedback' name='Feedback' value = "{{student.feedback}}"/></td>

                            {%endifequal%}
                                <td><button type='submit' class="radius button success medium" onclick=submitGrade("{{forloop.counter}}")>Save</button></td>
                                <td><img src="{% static "img/check.png" %}"></td>
                                <td><input type=hidden id = 'email' name = "email" value = "{{student.email}}"></td>
                            </tr>
                        </form>

                    {%endfor%}
                    </form>
            {%endif%}

this will create n forms with the id of the first form being 1, the second being 2, . . ., the nth one being n. Now when I open up the javascript console in chrome and I try to execute $('#1') for example, what it returns is [<form onsubmit=​"return false;​" id=​"1">​</form>​]. For some reason, the <input> is not being associated with the forms. When I try to run $('#Grade') from the javascript console, it show [<input type=​"text" size=​"1" id=​"Grade" name=​"Grade" maxlength=​"1" value=​"A">​] which is what I expect to be rendered for the Grade input of the first form. Why are the input fields not being associated with their respective form?

ray smith
  • 380
  • 3
  • 14

1 Answers1

0

ID's are supposed to be unique. It looks like you didn't use the forloop.counter in your <input> ids. This means that your for loop is copying the id="Grade" and id="feedback" as every form's input ID. Also, selecting ID's with JQuery only manipulates the first instance of the ID tha is found, unless it is captured via .find() - i.e. $('#form1').find('input[id="1"]')

Example:

<td><input type=text size="1" id ='Grade' name='Grade' maxlength="1" /></td>

should be:

<td><input type=text size="1" id ='Grade{{forloop.counter}}' name='Grade' maxlength="1" /></td>

and the same goes for id="feedback"

////////

Also, it is probably a little better to used named ids, for example:

<form onsubmit = "return false;" id="{{forloop.counter}}">

would be better suited as:

<form onsubmit = "return false;" id="form{{forloop.counter}}">

so the id would be captured by writing $('#form1') or $('#form2') or etc...

Hybrid
  • 6,741
  • 3
  • 25
  • 45