javascript not working

Using Django
#1

I came here for this because I’m not sure if it’s the javascript at fault or something in my view or html. What the code is supposed to do is to change the value of the hidden input when the additems button is clicked. That refreshes the page and adds 2 more forms to the page. But for some reason, the additems if statement never triggers, it skips to else.

EDIT: I was able to figure out that the if statement does trigger if I remove the “and request.POST[‘additems’] == ‘true’” portion, so additems is in request.POST, but it’s not evaluating == ‘true’

#views.py
@ensure_csrf_cookie
def gallery_editor(request):
    extra_forms = 2
    ArtFormSet = formset_factory(ArtForm, extra=1, max_num=20)
    if request.method == 'POST':
        if 'additems' in request.POST and request.POST['additems'] == 'true':
            formset_dictionary_copy = request.POST.copy()
            formset_dictionary_copy['form-TOTAL_FORMS'] = int(
                formset_dictionary_copy['form-TOTAL_FORMS']) + extra_forms
            formset = ArtFormSet(formset_dictionary_copy)
            context = {
                'formset': formset,
            }
            return render(request, 'editors/gallery_editor.html', context)
        else:
            formset = ArtFormSet(request.POST)
            if formset.is_valid():
                context = {
                    'uploaded': True,
                    'formset': formset,
                    }
                return render(request, 'editors/gallery_editor.html', context)
    else:
        formset = ArtFormSet()
        context = {
            'formset': formset
            }
        return render(request, 'editors/gallery_editor.html', context)

#addItems.js
$(document).ready(function() {
    $("#additemsbutton").on('click',function(event) {
     $("#additems").val("true");
   });
});

#gallery_editor.html

<body>
        <header>
            {% include 'home/mobile_nav.html' %}
            {% include 'home/desktop_nav.html' %}
            {% include 'editors/admin_nav.html' %}
        </header>
        <main>
        {% if uploaded %}
            <p style="color: green">Successfully uploaded.</p>
        {% endif %}
            <form method="post" action="">
                {% csrf_token %}
                {{ formset.management_form}}
                {% for form in formset %}
                    <div>{{ form }}</div>
                {% endfor %}
                <input type="hidden" value="false" name="additems" id="additems">
                <button class="btn btn-primary" id="additemsbutton">Add items</button>
                <input type="submit" value="Submit order" class="btn btn-primary"> 
            </form>
        </main>
        <footer>
            {% include 'home/footer.html' %}
        </footer>
        <!-- Javascript -->
        <script src="{% static 'editors/js/addItems.js' %}" />
    </body>
#2

Have you verified what the value of additems is that is being submitted?

It’s worth looking at your browser’s developer tools, network tab, to see exactly what’s being submitted from the browser in the request.

You can then print that value in the view to verify that you’re receiving what you’re expecting to receive. (If nothing else, it’ll help determine if the issue is in the view or in the JavaScript.)

Also, you have an onclick attribute on the button tag along with the on click listener being registered in addItems.js I don’t know if there’s any conflict or interference between the two.

You might also want to independently verify that your on click function is working by visually inspecting the html after clicking the button.

1 Like
#3

I think I might be doing this wrong but I couldn’t find what it’s value is after clicking the button in the dev tools, so I tried printing it and got nothing.

if 'additems' in request.POST:
        print(request.POST['additems'])

I removed the onclick event, that was just something I tried that didn’t work so it was referencing a function that didn’t exist anymore.

#4

okay so I got it, the value is returning as false.

#6

Ok, that means that the DOM isn’t being changed on the button event.

Is there any chance that you have more than one element on that page with an id of either additemsbutton or additems? That’s a common cause of issues like this.

1 Like
#7

I double checked because that’s exactly the kind of dumb mistake I would make, but no I don’t.

#8

You could try adding an alert function call in your event handler to verify that you are catching the expected event at that point.

1 Like
#9

okay, as usual I feel really stupid. I didn’t close the script tag smh. Of course the javascript is wrong as well, but I can probably figure that out if I just figure out how it works lol. Thanks for your patience.

#10

and yeah, all I needed to do was import jquery into my html and now it works

#11

[Unsolicited advice] Don’t. You’re climbing a tremendous learning curve. Don’t focus on the mistakes. (Simple mistakes are part of the process - and they’re the ones that will stay with you.)

If anything, focus on what you’ve accomplished, not the missteps taken along the way.

1 Like