使用 javascript 动态更改 HTML 表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10320970/
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
Dynamically changing HTML form using javascript
提问by user1353742
Basically I need to change the elements in a form based on a choice (radio button perhaps). So that 2 forms are potentially available on a page.
基本上我需要根据选择（可能是单选按钮）更改表单中的元素。因此，页面上可能有 2 个表单可用。
So far I've come up with this but it doesn't seem to work...
到目前为止，我已经想出了这个，但它似乎不起作用......
//javascript
function FormChange(toChange){
if (toChange){
var oldHTML = document.getElementById('li1').innerHTML;
var newHTML = "Company Name: " + "<input type="text" name="companyname" />";
document.getElementById('li1').innerHTML = newHTML;
}
//HTML
<form action="insert.php" method="post">
<li id="li1">Firstname: <input type="text" name="firstname" />
</form>
<input type = "button" value="Change that bad boy" onclick="FormChange(true)"/>
My Intention was to remove the firstname field and replace it with the companyname field.
我的意图是删除 firstname 字段并将其替换为 companyname 字段。
Any help is greatly appreciated, thanks.
非常感谢任何帮助，谢谢。
回答by David Gorsline
Putting the two current answers together, and adding a little error handling:
将两个当前的答案放在一起，并添加一些错误处理：
function FormChange(toChange) {
if (toChange) {
var elt = document.getElementById('li1');
if (elt) {
var newHTML = "Company Name: " + "<input type='text' name='companyname' />";
elt.innerHTML = newHTML;
}
}
}
<form action="insert.php" method="post">
<ul>
<li id="li1">Firstname: <input type="text" name="firstname" /></li>
</ul>
回答by The Alpha
回答by ajax333221
I did some tweaks to make changes ONLY when the text is "Firstname:"so repeated calls don't mess with the DOM unnecessarily (see the performance point 9 here)
我做了一些调整，仅当文本"Firstname:"重复调用时才进行更改，以免不必要地与 DOM 混淆（请参阅此处的性能点 9 ）
JS:
JS：
function FormChange() {
var obj = document.getElementById('li1');
var oldHTML = obj.innerHTML.substring(0,10);
if (oldHTML=="Firstname:") {
var newHTML = "Company Name: <input type=\"text\" name=\"companyname\" />";
obj.innerHTML = newHTML;
}
}
HTML:
HTML：
<form name="myForm" action="insert.php" method="post">
<ul>
<li id="li1">Firstname: <input name="firstname" type="text" /></li>
</ul>
</form>
<input type="button" onclick="FormChange();" value="Change that bad boy" />
Further Notes:
补充说明：
<li>should be containedin either:<ol>,<ul>or<menu>- you need to escape quotesin variables properly
回答by akonsu
try escaping the inner double quotes in your innerHTML text.
尝试在您的innerHTML 文本中转义内部双引号。
回答by powtac
You forgot to close the {!
你忘记关闭了{！
Fix:
使固定：
function FormChange(toChange) {
if (toChange) {
var oldHTML = document.getElementById('li1').innerHTML;
var newHTML = "Company Name: " + "<input type="text" name="companyname" />";
document.getElementById('li1').innerHTML = newHTML;
} // <-- this was missing!
}
回答by jcho360
why don't use jquery???, do something like this:
为什么不使用jquery？？？，做这样的事情：
$("#li1").change(function(){
alert("it changed");//here do whatever you want to
});
I think it's easier and it's more read readable.(don't forget to import the Jquery library)
我认为它更容易并且更具可读性。（不要忘记导入Jquery库）
