Non-responsive button on a form

[austere reef]

This is the view to render the page and form

def audience_view(request, pk):
    audience = get_object_or_404(Audience, pk=pk)
    form = AudienceForm(audience=audience)
    context = {
        'form': form,
    }

    if request.method == 'POST':
        form = AudienceForm(request.POST, audience=audience)
        if form.is_valid():
            for profile in Profile.objects.all().order_by('full_name'):
                field_name = f'profile_{profile.id}'
                subscribed = form.cleaned_data[field_name]
                defaults = {
                    'subscribed': 'No' if not subscribed else 'Yes',
                    'mailing_list_log': f'''Unsubscribed''' if not subscribed else f'''Subscribed '''
                }
                MailingList.objects.update_or_create(audience=audience, user=profile.user, defaults=defaults)
            return redirect('audience', pk=audience.pk)
    return render(request, 'marketing/audience_detail.html', context)

I have stripped commenting so it can all fit...

Here is the stripped down templated form:

            <form method="post" action=“{% url 'audience-entry' pk=audience.pk %}”>
                {% csrf_token %}
                {% crispy form %}
                 <input type="submit" name="update_subscriptions" value="Update Subscriptions">
            </form>

The template displays perfectly. The form shows all profiles with checkboxes showing they're subscribed (or not). There is no active JavaScript on the page (all commented out to remove as potential cause).

However, when I click the button to update subscriptions nothing happens. I've added a print statement for request.POST but nothing prints. The page simply does nothing.

Any ideas on what I'm missing?

[regal patrol]

When you click submit can you see the Post log in your terminal ?

[austere reef]

Nope. nada. Nothing. The button sits active. I added a print statement in the view print(f'{request.POST}') to test for that but nothing happens.

When I click the button it just stays active, where there is a highlight around it. But it doesn't come off that active state.

I'm missing something, but to be clear I've got numerous forms in this project all working great. But some reason this form simply does not want to process submission.

The new thing I'm trying with this form is the use of a class to build the form. I'm wondering if there's a challenge where the form is not being passed through the request correctly.

This is the form (built with the AudienceForm class) with the button before I click...

This is the button when it's clicked...It's like it hits an active state but does not proceed...never seen this before...

In the above screenshot the green button has the expected css output. This project is built using Bootstrap 5, and so the active effect is how that css framework works.

[regal patrol]

If you remove all css and Js the problem persists?

[austere reef]

Already stripped the JS.

Why would css get in the way? I've got css on every page, and am using the regular css classes.

[regal patrol]

Just to clear your base.html

[austere reef]

Not sure how css would prevent the html submission action?

Yeah. I'll remove base inheritance and all css.

Because that is how this looks. For some reason the button submission isn't happening.

The only difference between this and literally dozens of other forms in the same project is the use of the class to build the Audience Form.

[regal patrol]

It doesn't, but it's to make clearer your error

[austere reef]

There are no errors. Nothing happens. Left click does nothing.

[regal patrol]

But if it was a problem with the form class at least you should see the method post in your console

[austere reef]

No post. Stops dead. Button is dead.

I've even added:

    {% if form.errors %}
        <section class="content-section-danger alert-section">
            <div>
            <p class="alert-danger">Please review the following:</p>
                <ul>
                    {% for key, value in form.errors.items %}
                        {% for error in value %}
                            {% if error != '' %}
                                <li class="alert-danger">{{ error }}</li>
                            {% endif %}
                        {% endfor %}
                    {% endfor %}
                </ul>
            </div>
        </section>
    {% endif %}

To show form errors...

nothing.

[regal patrol]

Perhaps a tag that is not properly closed

[austere reef]

Looked for that. IDE is happy. Unclosed tags light up like a christmas tree in PyCharm

[regal patrol]

What if you only add

<Form method="post">
<button type="submit">submit</button>
</Form>

With the action to your url

[austere reef]

Have to go with...

                <form method="post">
                    {% csrf_token %}
                    {% crispy form %}
                    <button type="submit">submit</button>
                </form>

[regal patrol]

Still no post log?

[austere reef]

Removing base inheritance same issue...

no post log

[regal patrol]

😦

Commenting crispy form ?

[austere reef]

Yeah. Will remove crispy form...and just have form

huh...

Interesting...when I just go with form the IDE shows an issue...let me check

Weird...the context dict has
'form': form,

But the IDE doesn't have suggestions...,there's something wrong with the view.

It just highlights orange...but doesn't suggest a quick fix

[regal patrol]

I never trust ides, just for dart haha

But can you send the post method without the {% crispy form %} ?

[timid dragon]

what does the rendered form look like in the browser dev tools?

[regal patrol]

Shouldnt be {{ form }}?

[austere reef]

Yes...Thank you 😄

Moving too quickly apparently

Will check dev tools on next deploy...

Oh progress....button triggered an error...That is actually progress....

let me look into this...I'll post again if I'm stuck...thanks 😄

[regal patrol]

That would be great

Sorry for not helping

(: good luck

[austere reef]

Actually, even the simple advice and listening is helpful 🙂

I converted this view from a Class Base View and had a reference to 'self' in the function. Cleaning up...

[austere reef]

I am sooooo close 🙂 This is the most challenging coding I've done yet. But I've got this so close to what I want. I'll post a screenshot when I'm done. I should be able to hang my hat on this

Massive thanks for the help, even if it was just moral support 🙂

[austere reef]

Good times... 😄

class AudienceForm(forms.Form):
    def __init__(self, *args, **kwargs):
        audience = kwargs.pop('audience', None)
        super().__init__(*args, **kwargs)
        self.fields = {
            f'profile_{profile.id}': forms.BooleanField(label=f'{profile.first_name} {profile.last_name}',
                                                        required=False, initial=MailingList.objects.filter(
                                                            Q(audience=audience) &
                                                            Q(user=profile.user) &
                                                            Q(subscribed='Yes')).exists()
                                                        )
            for profile in Profile.objects.all().order_by('full_name')
        }
        # create a helper object
        self.helper = FormHelper()
        # set the form method and action
        self.helper.form_method = 'post'
        self.helper.form_action = 'submit_audience'
        # add a submit button
        self.helper.add_input(Submit('submit', 'Submit', css_class='btn event-display-cell btn-success col-12'))

So the above code came down to...if you want to use the crispy form tag, you are going to need to use FormHelper to have the Submit button pulled into it. Fascinating stuff. Nearly there with the requirement...it's a doozy