javascript 通过javascript编辑html输入表单的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5763055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Edit value of a html input form by javascript
提问by Xitrum
my HTML code:
我的 HTML 代码：
<form action="Generator.klx" method="post" onsubmit="genarate('hiddenField')">
<input type="hidden" id="hiddenField" name="hidden" value=""/>
<input type="submit" name="submit"/>
</form>
my JavaScript:
我的 JavaScript：
function genarate(hiddenField){
var field = document.getElementById(hiddenField);
field.value = "new Value";
}
But it just didnot work :(. Can anybody tell me where I was wrong?
Thank you
但它只是不起作用:(。有人能告诉我我错在哪里吗？
谢谢
采纳答案by T.J. Crowder
Your code as quoted should be working, and does in my tests with a variety of browsers. (I've tried it locally, with a POSTed form, but you can also try it here: http://jsbin.com/ehoro4/1I've changed the method to GETso you can see the result in the URL.)
您引用的代码应该可以正常工作，并且可以在我使用各种浏览器的测试中执行。（我已经在本地尝试过，使用 POSTed 表单，但您也可以在此处尝试：http://jsbin.com/ehoro4/1我已将方法更改为GET以便您可以在 URL 中看到结果。）
My guess is that you have something elseon the page with the nameor id"hiddenField", other than just the hidden field you've quoted. If you change the name of the field to "fluglehorn" or something else that's (um) unlikely to be elsewhere on your page, it may well work. That's because the namespace used by getElementByIdis (sadly) quite crowded.
我的猜测是，除了您引用的隐藏字段之外，您在页面上还有其他带有“hiddenField”name或id“hiddenField”的内容。如果您将字段名称更改为“fluglehorn”或其他不太可能出现在页面其他位置的名称，它可能会很好地工作。那是因为 使用的命名空间getElementById（可悲的是）非常拥挤。
Alternately, are you sure that genarateis appearing at global scope? (E.g., it's outside of all other functions.) Because your onsubmitattribute requires that genaratebe global. So this works:
或者，您确定它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>
but for example this would not:
但例如这不会：
<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>
Also recommend using a debugger (there's no excusefor not using client-side debuggers here in 2011) to set a breakpoint on the genaratefunction and walk through, to see what's going wrong.
还建议使用调试器（在 2011 年这里没有理由不使用客户端调试器）在genarate函数上设置断点并遍历，看看出了什么问题。
回答by supratim Neogi
crud.html
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
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();
}
