1

基本上我需要根据选择（也许是单选按钮）更改表单中的元素。因此，一个页面上可能有 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)"/>

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

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

4

6 回答 6

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>

于 2012-04-25T17:55:13.397 回答
1 
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;
    }
}

演示。

于 2012-04-25T17:56:14.353 回答
0

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

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

我认为它更容易并且更具可读性。（不要忘记导入 Jquery 库）

于 2012-04-25T17:54:24.243 回答
0

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

于 2012-04-25T17:48:35.910 回答
0

你忘记关闭了{！

使固定：

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!
}
于 2012-04-25T17:48:46.087 回答
0

我做了一些调整，仅在文本"Firstname:"如此重复调用不会不必要地干扰 DOM 时进行更改（请参阅此处的性能点 9 ）

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

演示

进一步说明：

  • <li> 应包含在：<ol>,<ul>或<menu>
  • 您需要正确转义变量中的引号
于 2012-04-25T18:03:48.170 回答