3

I have created form element dynamically in javascript:

var selectform = document.createElement("form")

I have added other input elements and these attributes to selectform:

   submitnselection.setAttribute('type',"submit");
   submitnselection.setAttribute('value',"Submit");
   submitnselection.setAttribute("name","submitnpage");
   selectform.setAttribute("method", "post")
   selectform.setAttribute = ("action", "/test")
   "{% csrf_token %}";

In HTML, adding {% csrf_token %} template tag would work, but in this case of javascript i got 403 forbidden error:

CSRF token missing or incorrect.

I have found some solutions but nothing was working for me, is there any way to add {% csrf_token %} to form with only using Django, Javascript and plain Jquery? Also note that this script is inside html, so i think {% csrf_token %} template tag will work.

Improve this question

3 Answers 3

Reset to default
10

This should work:

var inputElem = document.createElement('input');
inputElem.type = 'hidden';
inputElem.name = 'csrfmiddlewaretoken';
inputElem.value = '{{ csrf_token }}';
selectform.appendChild(inputElem);

You see, the csrf_token is nothing more that a string which is the value of a hidden input element of a form. That's all!

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Hello, thanks for the answer, now submit button would completely disappear but when entering the value i would still get same 403 error.
Yes. Because I'm overriding the submit button. My bad. Update answer is coming...
It gave me syntaxerror for some reason, same on happened @chirilov's solution.
Found out that it was giving me error on value attribute: inputElem.value = '{% csrf_token %}'; But i don't know the exact reason.
Worked finely, I have seen some questions about these mistakes, i think {% csrf_token %} automatically creates element itself, anyways, Thanks!
2

You can try to append an input field to the form:

// declare an input field 
var input = document.createElement('input');
input.type = 'hidden';
input.name = 'csrfmiddlewaretoken';
input.value = '{% csrf_token %}';

// attach field to the form 
selectform.appendChild(input);

// submit
Improve this answer

5 Comments

It gave me syntax error for some reason, Uncaught SyntaxError: Unexpected identifier.
Found out that it was giving me error on value attribute, but i don't know the reason.
Strange, please access suggested code on findle: link , hope this helps
Fiddle would work, but when i tried to change the value to {% csrf_token %} i got that error again.
JavaScript code is not preprocessed by Django. Item {% csrf_token %} is expanded by django before sending the response to the client. You are executing javascript on client side. If you build the form from scrach [ and i see in your code you are ] input.value must be populated with the value of csrfmiddlewaretoken expended by django. Populate the value of input.value = $( "input[name='csrfmiddlewaretoken']" ).val() This should work
2

If I understand everything, you need to send a csrf token but you don't have any to send to the server from javascript.

From the code in a Django template is very easy to generate a csrf token with the usual {% csrf_token %} Django tag, but this is because the template is being processed in the server to create the final HTML which will be sent to the browser.

When you are in Javascript you can't generate a csrf token so, I think the best solution is creating an invisible tag in the template, probably a hidden input.

<input id="token" type="hidden" value="{% csrf_token %}" ></input>

And when in jQuery get the value with $('#token').attr('value'), I have an example with a jQuery POST method:

token = $('#token').attr('value');
$.post(url, { 
             'personId': personId,
             'csrfmiddlewaretoken': token // This is the important thing
            }, function() {}
);

No matter how you do it, you have to send the token with the 'csrfmiddlewaretoken' name and the token value along with the other info you want to send to the server.

I'm editing this with a pure JS solution if you need it. Just say it.

Improve this answer

1 Comment

Thanks for the answer, i think i have found this kind of solution, but i'm trying to find more easier and simple solution similar to HTML one if there is any.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.