为什么我的表单没有提交我填写的所有字段,如何修复它?

huangapple go评论72阅读模式
英文:

Why is the my form not submitting all the fields i filled and how do i fix it?

问题

在我的房地产Django Web应用程序中,我有一个表单,用户可以填写以列出其属性或获取服务。要填写的表单取决于所涉及属性的类型(单个或多个公寓属性),因此我使用Tailwindcss根据用户的选择来显示这些表单。

这个问题是,当我提交表单时,只有property_type被提交到后端,而在任何表单上填写的内容都没有被提交。

如何修复这个问题?

英文:

On my real estate Django web app, I have a form which users fill to list their property or get services. The form to be filled differs depending on the type of property in question(Single or Multiple apartment properties) so I used Tailwindcss to display these forms depending on the user's choice

<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>

This works(kinda) but the problem is, when i submit the form, only the property_type is submitted to the backend and what ever is filled in on either of the forms isn't.

How do i fix this.

答案1

得分: 2

因为只有 property_type 被提交到后端,这是唯一具有 name 属性的表单元素。表单值以键/值对形式提交,其中键是元素的 name,值是元素的 value。如果没有 name,就没有东西可以包含 value

请为您的输入字段添加名称。例如:

<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">

(注意:被注释掉的标记已经具有 name 属性,您可能只是忘记在更新的标记中包含它们。)

英文:

> only the property_type is submitted to the backend

Because that's the only form element with a name attribute. Form values are submitted as key/value pairs where the key is the element's name and the value is the element's value. Without a name, there's nothing to include a value.

Give your inputs names. For example:

&lt;input type=&quot;text&quot; name=&quot;property_name&quot; class=&quot;w-full p-1 focus:border-1 focus:outline-yellow-300 border border-red-100 shadow-md shadow-red-100 rounded-lg &quot; placeholder=&quot;Property name&quot;&gt;

(Note: The commented out markup has name attributes already, you may have just forgot to include them in the updated markup.)

huangapple
  • 本文由 发表于 2023年6月27日 21:45:15
  • 转载请务必保留本文链接:https://go.coder-hub.com/76565522.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定