Having issues with javascript form and Django

Question

I have looked through and found posts similar to mine but everything I have seems to be in working order so I am stumped.

I have a javascript snippet that will allow the user to select one of two buildings then depending on which building is used a different set of options are given. This is using a post submit button. Everywhere has said it has to do with {% csrf_token %} but I have alread included it in the form and have the middleware in the settings.py. If it makes a difference there is also a get request on the same page.

The Form

<form id="formname" name="formname" method="POST" action="">{% csrf_token %}
    <table width="50%" border="0" cellspacing="0" cellpadding="5">
        <tr>
            <td width="41%" align="right" valign="middle">Category :</td>
            <td width="59%" align="left" valign="middle">
                <select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
                    <option value="">Select Building</option>
                    <option value="Marcus">Marcus</option>
                    <option value="Pettit">Pettit</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right" valign="middle">Location :</td>
            <td align="left" valign="middle">
                <script type="text/javascript" language="JavaScript">
                    document.write('<select name="subcategory"><option value="">Select Location</option>   </select>')
                </script>
                <noscript>
                    <select name="subcategory" id="subcategory">
                        <option value="">Select Location</option>
                    </select>
                </noscript>
            </td>
        </tr>
        <tr>
            <td>
                <td align="left" valign="middle">
                    <input value="Inventory Safety Log" type="submit">
                </td>
        </tr>
    </table>
</form>

The Javascript

<script language="javascript" type="text/javascript">
function dropdownlist(listindex) {

    document.formname.subcategory.options.length = 0;
    switch (listindex) {

        case "Marcus":
            document.formname.subcategory.options[0] = new Option("Select Location", "");
            document.formname.subcategory.options[1] = new Option("Chemical Room", "Chemicals");
            document.formname.subcategory.options[2] = new Option("Supply Room", "Supplies");
            document.formname.subcategory.options[3] = new Option("Gas Storage G205", "G205");
            document.formname.subcategory.options[4] = new Option("In-Organic Sub Fab G230", "G230");
            document.formname.subcategory.options[5] = new Option("Gas Bunker", "Gas Bunker");
            break;
        case "Pettit":
            document.formname.subcategory.options[0] = new Option("Select Location", "");
            document.formname.subcategory.options[1] = new Option("Chemical Room", "Chemicals");
            document.formname.subcategory.options[2] = new Option("Supply Room", "Supplies");
            document.formname.subcategory.options[3] = new Option("Utility Chase #19", "19");
            document.formname.subcategory.options[4] = new Option("Utility Chase #25", "25");
            document.formname.subcategory.options[5] = new Option("Utility Chase #29", "29");
            document.formname.subcategory.options[6] = new Option("Utility Chase #30", "30");
            document.formname.subcategory.options[7] = new Option("Utility Chase #36", "36");
            document.formname.subcategory.options[8] = new Option("Utility Chase #44", "44");
            document.formname.subcategory.options[9] = new Option("Gas Cage", "Gas Cage");
            document.formname.subcategory.options[10] = new Option("Bunker", "Bunker");
            break;
    }
    return true;
}

</script>

Thanks for any input, advice, tips, or insights.

Main issue is that When I try to post the form it brings me to the csrf verification failed page.

Answer 1

You are running into issues because of tampering with the form data on the fly. You need to use django forms to handle it cleanly. For now, you can use the csrf_exempt decorator as a temporary workaround