Question

我有一个简单的HTML表单，要求用户输入他们的姓名，SKU，数量和评论。这是一个简单的库存请求系统。

<html>
<body>
<form id="myForm" method="post"> 
        <input type="submit">
        <br>Name: <input type="text" name="form[name]"> 
        <br>SKU: <input type="text" name="form[SKU1]"> 
        <br>Quantity: <input type="text" name="form[quantity1]">
     <br>Comment: <input type="text" name="form[comment1]"> 
</form> 
<a href="javascript:addOption();">Add item</a> 

<script> 
        var num = 2; //The first option to be added is number 2
        function addOption() { 
                var theForm = document.getElementById("myForm"); 
                var newOption = document.createElement("input"); 
                newOption.name = "form[SKU"+num+"]"; // form[varX]
                newOption.type = "text";
                theForm.appendChild(newOption); //How can I add a newline here?
                optionNumber++;
        } 
</script>
</body>
</html>

目前我只能在它添加单个表单值的地方工作。我想重新创建整个myForm，只需单击一下即可命名域名。

Answer 1

你的帖子很老了，所以大概你现在已经找到了答案。但是，您的代码有些不妥。

在您拥有的JavaScript代码中

var num = 2;

这是增加的数字，用于跟踪您在表单上有多少“行项目”。但是在函数addOption（）中，不是递增num，而是

optionNumber++;

你永远不会在其他任何地方使用optionNumber。当您添加第一个项目时，您的代码只能工作一次，但由于您增加了错误的变量，因此您实际上总是添加选项2.

哦，并添加换行符：您需要附加<br>元素。

使用Javascript扩展HTML表单

1 个答案: