通过javascript编辑html输入表单的值答案

【问题标题】：Edit value of a html input form by javascript通过javascript编辑html输入表单的值
【发布时间】：2011-04-23 08:02:53
【问题描述】：

我的 HTML 代码：

<form action="Generator.klx" method="post" onsubmit="genarate('hiddenField')">
   <input type="hidden" id="hiddenField" name="hidden" value=""/>
   <input type="submit" name="submit"/>
</form>

我的 JavaScript：

function genarate(hiddenField){
  var field = document.getElementById(hiddenField);
  field.value = "new Value";
 }

但它只是没有工作:(。谁能告诉我我错在哪里？
谢谢

【问题讨论】：

究竟是什么不起作用？赋值？表格提交？煮咖啡？
:)，Generator.klx 无法接收到 hiddenField 的值
@user552279：嗯……你试过field.setAttribute('value', "new Value");而不是field.value吗？（只是在这里猜测；））
感谢 Felix Kling，这非常有效 :)
@user：您是说将field.value = "new Value"; 更改为field.setAttribute('value', "new Value"); 并且不更改其他内容 解决了问题吗？我发现非常很难相信，通过 value 属性设置字段值是沼泽标准，自 1995 年左右以来一直如此。我已经在 IE6、IE9、Firefox 3.6、Chrome 10、Opera 11 和 Safari 5 上尝试了您的代码。它适用于 field.value = "new Value";，句号。您一定同时更改了其他内容。

标签： javascript html

【解决方案1】：

您引用的代码应该可以正常工作，并且在我使用各种浏览器进行的测试中都可以正常工作。（我在本地尝试过，使用 POSTed 表单，但您也可以在这里尝试：http://jsbin.com/ehoro4/1 我已将方法更改为GET，因此您可以在 URL 中看到结果。）

我的猜测是，除了您引用的隐藏字段之外，您在页面上还有带有name 或id“hiddenField”的东西else。如果您将该字段的名称更改为“fluglehorn”或其他（嗯）不太可能出现在您的页面上的其他名称，它可能会起作用。那是因为getElementById 使用的命名空间（很遗憾）非常拥挤。

或者，您确定genarate 出现在全局范围内吗？（例如，它在所有其他函数之外。）因为您的 onsubmit 属性要求 genarate 是全局的。所以这行得通：

<form action="#" method="get" onsubmit="genarate('hiddenField')">
   <input type="hidden" id="hiddenField" name="hidden" value=""/>
   <input type="submit" name="submit"/>
</form>
<script>
function genarate(hiddenField){
  var field = document.getElementById(hiddenField);
  field.value = "new Value";
}
</script>

但例如这不会：

<form action="#" method="get" onsubmit="genarate('hiddenField')">
   <input type="hidden" id="hiddenField" name="hidden" value=""/>
   <input type="submit" name="submit"/>
</form>
<script>
(function() { // Begin scoping function to avoid global symbols (not uncommon)
    function genarate(hiddenField){
      var field = document.getElementById(hiddenField);
      field.value = "new Value";
    }
})();
</script>

还建议使用调试器（这里有 no excuse 表示 2011 年不使用客户端调试器）在 genarate 函数上设置断点并遍历，看看出了什么问题。

【讨论】：

可能的常见陷阱：声明和初始化的顺序。
@Caspar：同意，尽管在他的情况下，由于他使用的是onsubmit 属性，因此在提交表单之前不会对其进行评估，因此只要genarate 在全局范围内范围，即使在表单之后定义，它也会被拾取。
@Michael K：感谢您的编辑，但为了将来的参考，当这种情况发生时，通常是因为一些 jacka$$ 破坏了最新版本的 JSBin。要修复它，可以指向特定版本（在本例中为 jsbin.com/ehoro4/1）。
啊，谢谢。我是 stackoverflow 前端的新手，我被重定向到一个被破坏的页面，所以我试图清理它。感谢您的澄清。

【解决方案2】：

crud.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="JavaScript.js"></script>
</head>
<body>
<input type="text" name="name" id="name"  onfocus="opConfig.reloadPrice()">
<button type="button" onclick="myFun()">submit</button>
<button type="button" onclick="update()">update</button>
<br><br>
<p id="table"></p>
</body>
</html>

JavaScript.js

var arr = [];
var index;
function myFun()
{
var name = document.getElementById('name').value;
arr.push(name);
table();

}
function table(){
var text = "<table border=1><tr><th>username</th><th>action</th></tr>"
for (var i = 0; i < arr.length; i++) {
text+="<tr><td>"+arr[i]+"</td><td><button 
onclick=myDELE("+i+");>delete</button><button 
onclick=myEdit("+i+");>edit</button></td></tr>"
}
text+="</table>";
console.log(text);

document.getElementById('table').innerHTML = text;
tablehidden();
}

function myDELE(i)
{
var name = arr.splice(i,1);

// name.splice(i,1);
console.log(name);
table();
tablehidden();
}
function tablehidden(){
if (!arr.length) { document.getElementById('table').hidden=true; }
else{document.getElementById('table').hidden=false;}
}
function myEdit(i)
{
text = document.getElementById('name').value = arr[i];
         index = i;
}
function update(){
arr[index]=document.getElementById('name').value ;
table();
tablehidden();
}

【讨论】：

欢迎来到 Stack Overflow！虽然此代码 sn-p 可能是解决方案，但including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。