카테고리

질문 & 답변
세부 분야

풀스택
해결 여부

미해결

다음 버튼 누르면 MultiValueDictKeyError at /result/ 페이지가 노출됩니다.

21.06.16 23:48 작성 조회수 181

안녕하세요 강사님,

템플릿 적용하기 강의를 따라하다가 중간에 막히는 부분이 있어서 질문 드립니다.

question-1 의 답을 선택하고 다음 버튼을 클릭했는데 하기와 같은 이미지가 노출되는 것을 확인했습니다.

이 부분은 어떤 수강생 분이 올리셔서, 답변 달아주신 것을 확인하며 admin 페이지에서 제가 잘못 넣은 부분이 있는지를 확인하며, 혹시 몰라서 다시 입력한 것들을 삭제하고 재입력했는데도 동일하게 발생을 합니다.

아래는 admin 페이지에서 입력한 질문 및 선택지들이며, 강사님과 동일한 질문지를 하지 않고 인터넷에 돌아다니는 것을 기반으로 작성했습니다. (10개 question에 각각 2개의 선택지로 총 20개 choices)

result view에서 문항수와 디저트 유형 로그를 출력을 했구요.

혹시 몰라서 강사님이 확인해보라는 곳도 스크린샷 첨부드립니다.

혹시 몰라서 코드를 첨부합니다. 강사님과 다른 부분이 있다면 강사님께서는 developer로 쓰신 것을 dessert 로 썼습니다.

form.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>디저트 찾기</title>
    <link rel = "stylesheet" type = "text/css" href="{% static 'css/reset.css' %}">
    <link rel = "stylesheet" type = "text/css" href="{% static 'css/form.css' %}">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
    <section id="survey">
        <div class="wrapper">
            <form id="form" action="/result/" method="post">
                {% csrf_token %}
                {% for question in questions %}
                <div class="test">
                    <div class="question_container">
                        <h3 class="number">{{ question.number }}/{{ questions.count }}</h3>
                        <h3 class="question">{{ question.content }}</h3>
                    </div>  
                    <div class="answer">
                        {% for choice in question.choice_set.all %}
                        <div>
                            <input type="radio" 
                                   name="question-{{ question.number }}" 
                                   id="choice-{{ choice.pk }}" 
                                   value="{{ choice.dessert.pk }}"/>
                  <label for="choice-{{ choice.pk }}">{{ forloop.counter }}. {{ choice.content }}</label>
                        </div>  
                        {% endfor %}
                    </div>
                   {% if not forloop.first %}
                        <div class="btn_wrap btn_sort">
                        {% else %}
                        <div class="btn_wrap">
                        {% endif %}
                        {% if not forloop.first %}
                            <button class="prev_btn">이전</button>
                        {% endif %}
                        {% if not forloop.last %}
                            <button class="next_btn">다음</button>
                        {% else %}
                            <input type="submit" value="제출" class="submit_btn"/>
                        {% endif %}
                        </div>
                </div>
            {% endfor %}
            </form>
        </div>
    </section>    
    <script type="text/javascript" src="{% static 'js/form.js' %}"></script>
</body>
</html>

답변 기다리겠습니다.

<M.B.I.T> 테스트 페이지 만들기! with Django

답변 1

답변을 작성해보세요.

Hojun Lee

지식공유자

2021.06.17

"제출" 버튼이 아니라 "다음" 버튼을 눌렀는데 result 페이지로 넘어갔다는 얘기는 "다음" 버튼의 submit 기능을 막지 못했다는 얘기입니다.

무슨 얘기인가 하면, <form> 태그 안에 있는 <button> 태그들은 기본적으로 submit 기능을 가집니다. 그래서 버튼을 눌렀을 때, submit 되기를 원치 않으면 preventDefault 함수를 사용해야합니다.

이는 form.js에 작성되어 있습니다.

$(function(){
    $('.next_btn').click(function(e){
        let divs = $(this).parent().prev().children();
        let present_top = $(this).parent().parent()[0].offsetTop;
        let inputs = divs.find('input:checked');
        if(inputs.length < 1) {
            alert('문항이 선택되지 않았습니다.');
            return false;
        }
        e.preventDefault();
        scrollDown(present_top);
    });

    $('.prev_btn').click(function(e){
        let present_top = $(this).parent().parent()[0].offsetTop;
        e.preventDefault();
        scrollUp(present_top);
    });

    $("#form").submit(function() {
        let radios = $('input[type=radio]:checked');
        if(radios.length < 10) {
            alert("문항이 선택되지 않았습니다.");
            return false;
        }
        return true;
    });

    $("html, body").animate({
        scrollTop: 0
    }, 500);
});

next_btn과 prev_btn이 click 됐을 때 콜백 함수를 보면 e.preventDefault() 가 그 역할을 수행합니다.

이 부분이 잘 작성되어 있는지 확인 하시고, 이미 잘 작성되어 있는데도 submit이 일어난다면 캐시를 비워주세요.