如何将输入字段设为只读但仍然将数据发送回表单？

I have an input field:

我有一个输入字段：

<input cid="Topic_Created" name="Topic.Created" size="25" type="text" value="6/5/2011 8:22:45 AM" />

I want the field to display on my form but don't want the user to be able to edit the field. When the user clicks submit I want the form value to be sent back to the server.

我希望该字段显示在我的表单上，但不希望用户能够编辑该字段。当用户单击提交时，我希望将表单值发送回服务器。

Is this possible. I tried different combinations of disabled = "disabled", readonly = "readonly". Seems I always get nothing sent back for the field.

这可能吗。我尝试了disabled =“disabled”，readonly =“readonly”的不同组合。似乎我总是得不到为该领域送回的任何东西。

6 个解决方案

#1

Adding a hidden field with the same name will sends the data when the form is submitted.

添加具有相同名称的隐藏字段将在提交表单时发送数据。

<input type="hidden" name="my_name" value="blablabla" />
<input type="text" name="my_name" value="blablabla" disabled="disabled" />

#2

On the assumption you're using a script to create the form, I'd suggest using <input type="hidden" /> which will submit the variable with the form, but also use a regular <input type="text" readonly="readonly" /> to show the variable to the user. This won't submit the value, obviously, but will make it visible (while the hidden input will submit the value, but not show the value).

假设您正在使用脚本来创建表单，我建议使用，它将使用表单提交变量，但也使用常规的向用户显示变量。显然，这不会提交值，但会使其可见（而隐藏的输入将提交值，但不显示值）。

You could also do this with JavaScript:

您也可以使用JavaScript执行此操作：

var theForm = document.getElementsByTagName('form')[0];
var inputs = document.getElementsByTagName('input');

for (i=0; i<inputs.length; i++){
    if(inputs[i].type == 'hidden'){
        var newInput = document.createElement('input');
        newInput.type = 'text';
        newInput.setAttribute('disabled');
        newInput.value = inputs[i].value;
        theForm.appendChild(newInput);
    }
}

Clumsy JS Fiddle demo.

笨拙的JS小提琴演示。

#3

alternatively u can make a little manipulation with javascript, remove the disabled property before form submitted

或者你可以用javascript做一点操作，在表单提交之前删除disabled属性

<form action="target.php" method="post">
<input type="text" id="anu" name="anu" value="data anu" disabled="disabled" />
<button onclick="document.getElementById('anu').disabled=''">send</button>

#4

With Chrome browser on Windows 10 just having name="your_name" and the readonly attributes works fine: client cannot change a value, but it is sent to the server.

使用Windows 10上的Chrome浏览器只有name =“your_name”并且readonly属性正常工作：客户端无法更改值，但会将其发送到服务器。

#5

<script type="text/javascript"> 
    function myFn(event) { 
        event.stopPropagation(); event.preventDefault(); 
    } 
</script> 

<input onkeydown="myFn(event)" >

#6

You should consider using input type="hidden" when submitting read-only fields. Otherwise, if you still need the value of input field to be visible, you should create another input (type=text) with a different name.

提交只读字段时，应考虑使用input type =“hidden”。否则，如果仍需要输入字段的值可见，则应创建另一个具有不同名称的输入（type = text）。

<input cid="Topic_Created" name="Topic.Created" type="hidden" value="6/5/2011 8:22:45 AM" />
<!--This is visible: -->
<input cid="Topic_Created" name="doesntmatter" size="25" type="text" value="6/5/2011 8:22:45 AM" />

#1