Question

我有一个输入字段：

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

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

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

Answer 1

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

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

Answer 2

假设你使用脚本来创建表单，我建议使用<input type="hidden" />，它将使用表单提交变量，但也使用常规<input type="text" readonly="readonly" />来显示变量给用户。显然，这不会提交值，但会使其可见（而hidden输入将提交值，但不会显示值）。

您也可以使用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

Answer 3

或者您可以使用javascript进行一些操作，在表单提交之前删除已禁用的属性

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

Answer 4

使用Windows 10上的Chrome浏览器只需输入名称=＆＃34; your_name＆＃34; readonly属性工作正常：客户端无法更改值，但会将其发送到服务器。

Answer 5

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

<input onkeydown="myFn(event)" >

Answer 6

提交只读字段时，应考虑使用输入 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" />

Answer 7

您可以在输入元素中添加'readonly'='true'。用户无法使用此功能进行编辑，也无法将值发送回服务器。

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

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

7 个答案: