CODEWITHSUNDEEP
javascriptdjango
IronMaiden
IronMaiden

Reputation: 564

JavaScript not executed on clicking button in Django

I am new to web programming and currently working on Django.

I have a html page with 3 buttons

            <p style = "color:black;"> <b> Your options: </b></p>
            <p style="padding-bottom: 40px;"><button>A</button></p>
            <p style="padding-bottom: 40px;"><button>B</button></p>
            <p style="padding-bottom: 40px;"><button>C</button></p>

The script that needs to be executed after clicking on any one of this is as follows:

<script>
        document.getElementById('submit_button').onclick = function(e) {
            e.preventDefault();
            $('#submit_form').css('display', 'none');
            $('#loading').css('display', 'block');
            $.ajax({
                beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader('X-CSRFToken', $('[name=csrfmiddlewaretoken]').val());
                },
                url: window.location.pathname,
                type: 'POST',
                processData: false,
                contentType: false,
                success: function () {
                    window.location.reload();
                }
            });
            return false;
        };
    </script>

However, when I click on any one of the buttons, nothing happens.

Upvotes: 0

Views: 50

Answers (1)

Lewis
Lewis

Reputation: 2798

None of your buttons have id submit_button. Which you have stated in the event handler:

document.getElementById('submit_button').onclick {

You need to add it to one of them like so:

<p style="padding-bottom: 40px;"><button id="submit_button">A</button></p>

Upvotes: 1

Related Questions