Expanding HTML forms using Javascript_问答_开发者

开发者 https://www.devze.com 2023-01-04 04:18 出处：网络

I have a simple HTML form that asks a user to input their name, SKU, quantity, and comments. This is for a simple inventory request system.

相关专题：javascript

I have a simple HTML form that asks a user to input their name, SKU, quantity, and comments. This is for a simple inventory request system.

<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
        func开发者_如何学Gotion 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>

Currently I can only get it working where it will add a single form value. I would like to recreate the entire myForm except for the name field with a single click.

Your post is very old, so presumably you've found an answer by now. However, there are some things amiss with your code.

In the JavaScript code you have

var num = 2;

This is the number that is incremented to keep track of how many "line-items" you will have on the form. In the function addOption(), though, instead of incrementing num you have

optionNumber++;

You never use optionNumber anywhere else. Your code works once, when you add the first item, but since you increment the wrong variable, you are effectively always adding option 2.

Oh, and adding the newline: you need to append a <br> element.