django: get HTML form value in view.py failed with empty <QueryDict: {}> and None value

Question

I am new to django and follow the djangogirls tutorial. With a few modifications, I am trying to get the value from the form text field and print it in view.py and then display this value again in another "result" field in the html page.

html:

<!DOCTYPE html>
<html>
  <body>
    <form>
        <div>
            <label>num_1:</label>
            <input type = "text" name="num_1" value = "1" placeholder="Enter value">
        </div>
        <div>
           <label>num_2:</label>
            <input type = "text" name="num_2" value = "2" placeholder="Enter value">
        </div>
    </form>

        <div>
            <label>result:</label>
            {{ result }}
        </div>
    <br>
    </body>
</html>

view.py:

def post_list(request):
    # posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date')
    num1 = request.POST.get('num_1')
    num2 = request.POST.get('num_2')
    result = int(num1)+int(num2)
    print(request.POST)
    print("num1 ", num1)
    # return render(request, 'blog/post_list.html', {'posts': posts})
    return render(request, 'blog/post_list.html', {'result': result})

when I activate the local server, I got:

Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
<QueryDict: {}>
num1  None

How are you getting into post_list i don't see any call. Can you you add code for it — Ahtisham
– Ahtisham, Commented Dec 28, 2021 at 7:38
This looks like somewhere in your code you call post_list(...) upon starting runserver. That means it is not called by a POST request but internally and therefore request contains no POST data. Did you setup a urlpatten? Another hint: your html form has no submit button. — Razenstein
– Razenstein, Commented Dec 28, 2021 at 7:38

Nguyễn Vũ Thiên · Accepted Answer · 2021-12-28 08:09:54Z

1

You need add method="post" and {% csrf_token %} for your form. For example:

<form method="POST">
    {% csrf_token %}
    <div>
      <label>num_1:</label>
      <input type="text" name="num_1" value="1" placeholder="Enter value" />
    </div>
    <div>
      <label>num_2:</label>
      <input type="text" name="num_2" value="2" placeholder="Enter value" />
    </div>
    <br />
    <div>{{ result }}</div>
    <button type="submit">Submit</button>
</form>

In your views.py:

def post_list(request):
    result = 0
    if request.method == "POST":
        num1 = request.POST.get('num_1')
        num2 = request.POST.get('num_2')
        result = int(num1) + int(num2)
        print(request.POST)
        print(result)

    context = {
        'result': result
    }
    return render(request, 'blog/post_list.html', context)

Here is frontend:

And terminal:

edited Dec 28, 2021 at 8:09

answered Dec 28, 2021 at 7:42

Nguyễn Vũ Thiên

8791 gold badge10 silver badges21 bronze badges

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

12 Comments

Jack Over a year ago

thank you it works. I am wondering how to prevent the page reloading after clicking submit. I want the page directly show the result without refresh. I tried adding "<iframe id="iframe" name="iframe" style="display:none;"></iframe>" and the page did not refresh but also the result also did not refresh with the actual result value only terminal shows it.

Jack Over a year ago

BTW, what's {% csrf_token %} used for?

Nguyễn Vũ Thiên Over a year ago

@Jack: Hi Jack, the value need load to update new value. But if you don't want load entire page, you can use AJAX or websocket to update realtime data. {% csrf_token %} use for defense against CSRF attacks. You can see more at here: docs.djangoproject.com/en/4.0/ref/csrf

Jack Over a year ago

can u provide an example? does it mean i have to give up using django framwork?

Nguyễn Vũ Thiên Over a year ago

@Jack: You can follow this video youtube.com/watch?v=6TXtsTutoQQ or search google keyword AJAX in Django. It's complicated to explain in only this comment.

|

Collectives™ on Stack Overflow

django: get HTML form value in view.py failed with empty <QueryDict: {}> and None value

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related