在我的真实的地产Django Web应用程序中,我有一个表单,用户可以填写表单来列出他们的房产或获得服务。要填写的表单根据所涉及的属性类型(单套或多套公寓属性)而有所不同,因此我使用Tailwindcss根据用户的选择显示这些表单
<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">
<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="draft" class="peer-checked/multiple:text-sky-500">Multiple D. Unit</label>
<div class="hidden peer-checked/multiple:block bg-white px-2 py-1 w-full space-y-2 md:space-y-3 rounded-xl">
<!--
<h3> M.D.U Unit Form </h3>
-->
<div class="block">
<p class="font-medium text-gray-950 text-sm"> Name of property: </p>
<input type='text' 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">
</div>
<div class="block ">
<p class="font-medium text-sm"> Number of houses in MDU </p>
<input 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">
<!--
<h3> Single Unit Form </h3>
-->
<div class="block space-y-1">
<p class="font-medium"> Name of property: </p>
<input type='text' 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>
<!-- <div class="flex justify-between border border-red-500 ">
<div>
<input type="radio" id="single" name="property_type" value="SINGLE" class="peer/single" checked />
<label for="single" class="peer-checked/single:text-sky-500">Single Unit</label>
</div>
<div>
<input type="radio" id="multiple" name="property_type" value="MULTIPLE" class="peer/multiple"/>
<label for="multiple" class="peer-checked/multiple:text-sky-500">Multiple D. Unit</label>
</div>
</div>
<div class="peer-checked/single:border p-3 border-red-500 rounded-lg">
<label> Single Property Location </label>
<input class="p-2" name="your_location" type="text" placeholder="Type in a name">
</div>
<div class="hidden peer-checked/multiple:blockp-3 border border-red-500 rounded-lg">
<label> Multiple Property Name </label>
<input class="p-2" name="property_name" type="text" placeholder="Property Name">
</div>
<input class="p-2 bg-sky-600 rounded-md hover:bg-sky-800" type="submit" value="Submit Form"> -->
</form>
这工作(有点),但问题是,当我提交表单时,只有property_type
被提交到后端,而任何一个表单上填写的内容都没有。
我该怎么弥补。
1条答案
按热度按时间wd2eg0qa1#
只有
property_type
提交到后端因为这是唯一具有
name
属性的form元素。表单值以键/值对的形式提交,其中键是元素的name
,值是元素的value
。如果没有name
,就没有什么可以包含value
。给予你的输入命名。例如:
(Note:* 注解掉 * 标记已经有
name
属性,您可能只是忘记将它们包含在更新的标记中。)