Question

基本上我需要根据选择（单选按钮）更改表单中的元素。这样就可以在页面上找到2个表单。

到目前为止，我已经提出了这个问题，但它似乎没有用......

//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)"/>

我的意图是删除名字字段并将其替换为companyname字段。

非常感谢任何帮助，谢谢。

Answer 1

将两个当前答案放在一起，并添加一些错误处理：

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>

Answer 2

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

DEMO.

Answer 3

尝试转义innerHTML文本中的内部双引号。

Answer 4

您忘了关闭{！

修正：

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

Answer 5

为什么不使用jquery ???，做这样的事情：

$("#li1").change(function(){
alert("it changed");//here do whatever you want to
});

我觉得它更容易，而且阅读性更强。（不要忘记导入Jquery库）

Answer 6

我做了一些调整，仅在文本为"Firstname:"时才进行更改，因此重复调用不会不必要地混淆DOM（参见性能点9 here）

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：

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

<强> Demo

进一步说明：

<li> should be contained位于：<ol>，<ul>或<menu>
您需要escape quotes正确变量

使用javascript动态更改HTML表单

6 个答案: