欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

禁用的表单输入未出现在请求中

程序员文章站 2022-05-24 18:22:22
...

本文翻译自:Disabled form inputs do not appear in the request

I have some disabled inputs in a form and I want to send them to a server, but Chrome excludes them from the request. 我在表单中有一些禁用的输入,我想将它们发送到服务器,但是Chrome将其从请求中排除。

Is there any workaround for this without adding a hidden field? 是否有任何解决方法而不添加隐藏字段?

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />

    <!-- this does not appear in request -->
    <input type="textbox" name="Percentage" value="100" disabled="disabled" /> 

</form>

#1楼

参考:https://stackoom.com/question/UrxQ/禁用的表单输入未出现在请求中


#2楼

If you absolutely have to have the field disabled and pass the data you could use a javascript to input the same data into a hidden field (or just set the hidden field too). 如果您绝对必须禁用该字段并传递数据,则可以使用javascript将相同的数据输入到隐藏字段中(或者也可以设置隐藏字段)。 This would allow you to have it disabled but still post the data even though you'd be posting to another page. 这将允许您禁用它,但是即使您要发布到另一个页面,也仍然可以发布数据。


#3楼

Using Jquery and sending the data with ajax, you can solve your problem: 使用Jquery并使用ajax发送数据,可以解决您的问题:

<script>

$('#form_id').submit(function() {
    $("#input_disabled_id").prop('disabled', false);

    //Rest of code
    })
</script>

#4楼

I'm updating this answer since is very useful. 我正在更新此答案,因为它非常有用。 Just add readonly to the input. 只需将readonly添加到输入中即可。

So the form will be: 因此,形式为:

<form action="/Media/Add">
    <input type="hidden" name="Id" value="123" />
    <input type="textbox" name="Percentage" value="100" readonly/>
</form>

#5楼

You can totally avoid disabling, it is painful since html form format won't send anything related to <p> or some other label. 您可以完全避免禁用它,这很痛苦,因为html表单格式不会发送与<p>或其他标签有关的任何内容。

So you can instead put regular 所以你可以放常规

<input text tag just before you have `/>

add this readonly="readonly" 添加此readonly="readonly"

It wouldn't disable your text but wouldn't change by user so it work like <p> and will send value through form. 它不会禁用您的文本,但不会被用户更改,因此它像<p>一样工作,并将通过表单发送值。 Just remove border if you would like to make it more like <p> tag 如果您想使边框更像<p>标记,请删除边框


#6楼

To post values from disabled inputs in addition to enabled inputs, you can simply re-enable all of the form's inputs as it is being submitted. 要发布来自启用的输入之外的来自禁用输入的值,您可以在提交表单时简单地重新启用所有表单输入。

<form onsubmit="this.querySelectorAll('input').forEach(i => i.disabled = false)">
    <!-- Re-enable all input elements on submit so they are all posted, 
         even if currently disabled. -->

    <!-- form content with input elements -->
</form>

If you prefer jQuery: 如果您更喜欢jQuery:

<form onsubmit="$(this).find('input').prop('disabled', false)">
    <!-- Re-enable all input elements on submit so they are all posted, 
         even if currently disabled. -->

    <!-- form content with input elements -->
</form>

For ASP.NET MVC C# Razor, you add the submit handler like this: 对于ASP.NET MVC C#Razor,您可以如下添加提交处理程序:

using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post,
    // Re-enable all input elements on submit so they are all posted, even if currently disabled.
    new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" } ))
{
    <!-- form content with input elements -->
}