CODEWITHSUNDEEP
pythonhtmldjangoforms
turtlemcnuggets
turtlemcnuggets

Reputation: 45

Django forms interacting with each other

I have a django (2.0) application with a page that contains two separate forms that are not meant to interact with each other at all. However, I am getting some weird behavior. Pictured here, when I click on one of the labels on the bottom form, it triggers the checkbox for the corresponding (based on row, not name) element in the upper form (clicking "members" on the group form selected "Email" on the person form). This only goes one way--clicking anywhere on the top form never effects the bottom form. Checking the actual boxes of the bottom form do trigger the expected boxes that their labels correspond to.

The html for this page is: 

<head>
    {% load static %}
    <title>LDAP - Search</title>
    <link rel="shortcut icon" href="{% static 'djangoWrapper/favicon.ico' %}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="{% static 'ldap/style.css' %}">
</head>
<body>
    <h1>Search</h1>
    <div class="search-form">
        <h2>Search for Person</h2>
        <form action="{% url 'ldap:person_results' %}" method='post'>
            {% csrf_token %}
            <table>
                {{ personForm }}
            </table>
            <input type="submit" value="Search">
        </form>
    </div>
    <div class="search-form">
        <h2>Search for Group</h2>
        <form action="{% url 'ldap:group_results' %}" method='post'>
            {% csrf_token %}
            <table>
                {{ groupForm }}
            </table>
            <input type="submit" value="Search" />
        </form>
    </div>
    <div class="url">
        <a href="{% url 'ldap:index' %}">or go back to login</a>
    </div>
</body>

And the forms are 

class PersonSearchForm(forms.Form):
    uniqname = forms.CharField(label="uniqname", max_length=10)
    options = personFieldsDict.items()
    attributes = forms.MultipleChoiceField(
            widget=forms.CheckboxSelectMultiple, choices = options, label='',
            required=False)

class GroupSearchForm(forms.Form):
    groupName = forms.CharField(label='Group Name')
    options = groupFieldsDict.items()
    attributes = forms.MultipleChoiceField(
            widget=forms.CheckboxSelectMultiple, choices = options, label='', 
            required=False)

And the view that renders this page is simply:

def search(request):
    personForm = PersonSearchForm()
    groupForm = GroupSearchForm()
    context = {'personForm': personForm, 'groupForm': groupForm}
    return render(request, 'ldap/search.html', context)

I am guessing that this has something to do with the fact that both forms use a MultipleChoiceField widget, but I can't see how they are interacting with each other if their attributes are different and they are in different div's. Any idea on why there is this interaction? Thanks.

Upvotes: 0

Views: 128

Answers (1)

Daniel Roseman
Daniel Roseman

Reputation: 599778

You should use the prefix argument to one or both forms to prevent the fields from interferin with each other.

personForm = PersonSearchForm(prefix="person")
groupForm = GroupSearchForm(prefix="group")

Don't forget to also use the prefixes when instantiating the form on post.

Upvotes: 1

Related Questions