1

我无法动态生成文本字段。我在表单中有一个选择框，我想做的是根据下拉列表中的数字选择创建文本字段。因此，如果用户选择一个，我想在它下面创建一个文本字段。我正在使用 javascript 和 onChange 事件来完成它。但是代码在任何浏览器中都不起作用。

这是我在文档头部使用的 javascript 函数：

function addField() 
 {
 alert("Hello");
 var num=document.forms["myForm"]["timePerDay"].value;
   for(var i=0;i<num;i++)
    {
    var element = document.createElement("input");


    element.setAttribute("type", input);
    element.setAttribute("name", time[] );

    var foo = document.getElementById("fooBar");

    //Append the element in page (in span).
    foo.appendChild(element);
    }
    }

并且选择字段是：

 <select name="timePerDay" onChange="javascript:addField();"> 
<option selected="selected">Select One</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<span id="fooBar">
</span>

似乎 onChange 在任何浏览器中都没有触发，因为我试图将警报消息放入 JS 函数中，甚至它不起作用。所以你能告诉我是什么问题吗？您可以在以下位置查看该页面： http: //motushealth.com/form1.html

PS：我在表单上使用另一个 JS 函数来验证它，它适用于 Onsubmit 。它运行良好。

4

3 回答 3

2

问题是这里的语法错误：element.setAttribute("name", time[] ); time[]在 php 中有效，但在 js 中无效。

编辑：

另一种方法是不使用内联 js ( ...onClick='javascript:addField();'...)。而是在事件上执行以下操作window.onload或更好。onDomReady

JS：

window.onload = function() {  /* or window.addEventListener */
    document.getElementById('timePerDay').onchange = addField;  /* or addEventListener */
};

标记可以是：

<select id="timePerDay" name="timePerDay"> 
    <option selected="selected">Select One</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
于 2012-05-27T06:33:01.963 回答
0

在摆弄代码两个多小时后，我终于找到了问题所在。令我惊讶的是，问题出在 JS 自身的代码中。似乎如果 JS 代码有任何问题，整个函数都不起作用，甚至没有调用 onChange。

  1. 第一个问题出在名字上，所以我改了

    element.setAttribute("name", time[]) 到 element.setAttribute("name", timer[])

  2. 其次，类型有逻辑错误，所以我改变了

    element.setAttribute("type", input) 到 element.setAttribute("type", text); 感谢你的帮助。我爱这个伟大的社区。继续摇摆。问候。

于 2012-05-27T06:48:02.103 回答
0

出现问题的原因是由于发生了意外令牌addField()而根本没有加载该函数。SyntaxErrortime[]]

调试此类问题的一个技巧是始终从查看Web Inspector（如果您使用 Chrome/Safari）或Firebug（如果您使用 Firefox）中的控制台日志开始。

您可能还想考虑将 jQuery 用于这些类型的任务。具体来说，研究使用on()or change()。

于 2012-05-27T07:00:09.490 回答