Django房产应用动态表单仅提交property_type字段问题及修复

核心问题分析 #

你的表单提交时只有property_type能传值到后端，主要有两个关键原因：

• 表单输入字段缺少name属性：浏览器只会将带有name属性的表单元素数据发送到服务器，你代码里的所有文本输入、单选框都没有设置name，自然不会被提交。
• 缺少Django CSRF令牌：Django默认启用CSRF保护，POST请求必须包含CSRF令牌，否则请求会被拦截，即使字段正确也无法正常提交。

另外还有一个小问题：Multiple D. Unit的label标签for属性指向了不存在的draft，应该改为multiple，这会影响单选框的点击交互，但不影响提交，建议一并修复。

修复步骤 #

1. 为所有需要提交的输入字段添加name属性：根据字段用途定义合适的name，比如单户和多户的房产名称可以用同一个name（如property_name），多户的服务器房间单选框需要设置name和value，户数输入设置name。
2. 添加Django CSRF令牌：在表单开头加入{% csrf_token %}。
3. 修复label的for属性错误：将Multiple D. Unit的label的for="draft"改为for="multiple"。

修改后的完整表单代码 #

<form class="border-3 border-red-400 p-11 block space-y-4 justify-center w-screen h-screen items-center" action="{% url 'requestservice:req_service' %}" method="POST">
    {% csrf_token %} <!-- 必须添加CSRF令牌 -->
    
    <input type="radio" id="single" value="SINGLE" class="peer/single" name="property_type" checked />
    <label for="single" class="peer-checked/single:text-sky-500">Single Unit</label>

    <input type="radio" id="multiple" value="MULTIPLE" class="peer/multiple" name="property_type" />
    <label for="multiple" class="peer-checked/multiple:text-sky-500">Multiple D. Unit</label> <!-- 修复for属性 -->
            
    <div class="hidden peer-checked/multiple:block bg-white px-2 py-1 w-full space-y-2 md:space-y-3 rounded-xl">
        <div class="block">
            <p class="font-medium text-gray-950 text-sm"> Name of property: </p>
            <input type='text' name="property_name" class="w-full p-1 focus:border-1 focus:outline-yellow-300 border border-red-100 shadow-md shadow-red-100 rounded-lg " placeholder="Property name">
        </div>

        <div class="font-medium flex space-x-5">
            <p class="font-medium text-sm"> Central Server Room Avaliable: </p>
            <input type="radio" name="has_server_room" value="YES" class="mr-1"> Yes
            <input type="radio" name="has_server_room" value="NO" class="mr-1 ml-4"> No
        </div>
        
        <div class="block ">
            <p class="font-medium text-sm"> Number of houses in MDU </p>
            <input name="house_count" placeholder="Number of houses" class="w-full p-1 focus:border-1 focus:outline-yellow-300 border border-red-100 shadow-md shadow-red-100 rounded-lg" type="number">
        </div>
    </div>
    
    <div class="hidden peer-checked/single:block bg-white px-2 py-1 space-y-2 w-full rounded-xl">
        <div class="block space-y-1">
            <p class="font-medium"> Name of property: </p>
            <input type='text' name="property_name" class="w-full p-1 focus:border-1 focus:outline-yellow-300 border border-red-100 shadow-md shadow-red-100 rounded-lg " placeholder="Property name">
        </div> 
    </div>

    <div class="flex justify-center">
        <input type="submit" class="bg-red-500 font-medium p-1 text-white text-center rounded-lg" value="Request Service">
    </div>
</form>

后端接收数据示例 #

在你的req_service视图函数中，可以这样获取提交的数据：

def req_service(request):
    if request.method == 'POST':
        property_type = request.POST.get('property_type')
        property_name = request.POST.get('property_name')
        # 多户类型的字段判断后获取
        if property_type == 'MULTIPLE':
            has_server_room = request.POST.get('has_server_room')
            house_count = request.POST.get('house_count')
        # 后续处理逻辑...
    # 其他代码...

内容的提问来源于stack exchange，提问作者O.G Bellz