1

我正在尝试制作一个表单，向用户询问一些单位，然后询问他们是否希望提供这些单位，并根据答案生成与输入的单位数量相对应的文本字段，以及要求提供帐号的文本字段。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">

</script>


<script type="text/javascript">

function Getunits(value) {
var units = document.getElementById('units');
for(count=0; count<=units; count++) {
$("<input type='text'>").appendTo("inpane");
 }
document.getElementByTag('futureacc').InnerHTML='What is your account number? <input type="text" value="accountnum">';

}
</script>
</head>
<body>
<div id="container">
<form method="post" action="sendcontact.php">
<div id="unitammount" class="inpane">
Number of units ordered: <input type="text" name="units" id="units"/><br />
</div>

<div id="futureacc" class="inpane">
Are these units to be provisioned? <input type="radio" name="select" value="yes" onClick="Getunits('units.value')"/> Yes <input type="radio" name="select" value="no"/> No
</div>

显然，我希望新的文本字段分别出现在 futureacc div 和 inpane div 中。

我不知道是循环没有做任何事情还是我没有正确附加，但正如我目前拥有的那样，这什么都不做......

任何帮助将不胜感激。

4

4 回答 4

2

您的代码有许多错误。这很令人困惑，因为您将 jQuery 和纯 Javascript 混合在一起。如果您决定使用它，通常最好只使用 jQuery。您的循环应该在小于 时进行迭代，而units.val()不是在小于或等于时进行迭代units。 innerHTML拼写为小写“i”，并且您的appendTo选择器需要在类名前加一个句点。我继续清理了你的代码，所以它现在应该可以工作了！

HTML：

<div id="container">
    <form method="post" action="sendcontact.php">
        <div id="unitammount" class="inpane">
              Number of units ordered: <input type="text" name="units" id="units"/>
        </div><br>

        <div id="futureacc" class="inpane">
            Are these units to be provisioned? <input type="radio" name="select" value="yes" onClick="getUnits()"/> Yes <input type="radio" name="select" value="no"/> No <br>
        </div>
    </form>
</div>​

Javascript：

function getUnits() {
    var units = $("#units").val();
    for (var count = 0; count < units; count++) {
        $("<input type='text' /><br>").appendTo("#futureacc");
    }
    $("#futureacc").append('<br>What is your account number? <input type="text" placeholder="accountnum">');
}​

工作演示

于 2012-08-17T06:19:11.423 回答
0 
var units = document.getElementById('units');

需要是

var units = document.getElementById('units').value;

您正在将值传递给 onclick，但它是一个字符串，无论如何您都没有在函数中使用它，因此它不会给您确切的值，因此它没有任何副作用。

您还需要进行一些错误检查以确保用户输入了一个数字

和

for(count=0; count<=units; count++)

您添加的文本框比用户输入的值多 1 个。所以如果用户输入了 4 你正在创建 5 <= 应该更改为 <

于 2012-08-17T06:01:34.560 回答
0

这是错误的

onClick="Getunits('units.value')"

而是使用这个：

onClick="Getunits(units.value)"
于 2012-08-17T06:02:24.410 回答
0

尝试这个

$(document).ready(function(){
  $('input[name=select]').click(function(){
    if($(this).val() ==='yes'){
        var numberOfTextboxes = $('#units').val();
        for(var i =0; i<numberOfTextboxes; i++){
            $('#unitammount').append('<input type="text" />');
        }
    }
  });
});

看小提琴

于 2012-08-17T06:09:36.507 回答