How to use TextField from Django in JavaScript?

Question

I have a Django model:

class MyModel(models.Model):
    charField = models.CharField(maxLength=200)
    textField = models.TextField()

and an HTML template with a JS function that displays charField and textField like this:

document.getElementById("someElement").innerHTML = "{{ myObject.charField }}";
document.getElementById("someOtherElement").innerHTML = "{{ myObject.textField }}";

The former works fine, but the latter doesn't. I assume the problem is the fact that it is a TextField because there is no other difference between the two. How can I fix this?

willeM_ Van Onsem · Accepted Answer · 2020-05-31 23:18:02Z

2

For a <textarea> you should use .value, so:

document.getElementById("someOtherElement").value = "{{ myObject.textField }}";

for <div>, you should ineed use .innerHTML.

Note that both are not a good idea since Django will HTML encode the values, and thus thus can result in ", &, etc. in the values. You should use the |escapejs template filter [Django-doc]:

document.getElementById("someElement").innerHTML = "{{ myObject.charField|escapejs }}";
document.getElementById("someOtherElement").innerHTML = "{{ myObject.textField|escapejs }}";

edited May 31, 2020 at 23:18

answered May 31, 2020 at 22:39

willeM_ Van Onsem

482k33 gold badges483 silver badges624 bronze badges

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

16 Comments

Kristína Over a year ago

I did that but it still doesn't show anything. Any idea what could be the problem? It works when I put {{ myObject.textField }} directly in the element.

willeM_ Van Onsem Over a year ago

@Kristína: can you see anything on the browser console? Exactly what is the content that you render as output?

willeM_ Van Onsem Over a year ago

@Kristína: note that if you do this directly, the encoding is different, since for a html argument, it uses ampersand encoding, whereas for Javascript, you should JSON-encode it.

Kristína Over a year ago

Sorry for a stupid question, I'm completely new to this. Should I type the javascript line into the console?

willeM_ Van Onsem Over a year ago

@Kristína: yes, I was initially under the impression that it was a <textarea>, not a <div>. For a <div> it is indeed innerHTML.

|

Collectives™ on Stack Overflow

How to use TextField from Django in JavaScript?

1 Answer 1

16 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Related