用Javascript扩展表单_Javascript_Dom_Forms_Extend

用Javascript扩展表单

javascript dom forms

用Javascript扩展表单,javascript,dom,forms,extend,Javascript,Dom,Forms,Extend,我正在阅读上面提到的网站，并试图在我的项目中实现它。但当我点击“获取更多字段”按钮时，它就不起作用了。代码如下： <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> &

我正在阅读上面提到的网站，并试图在我的项目中实现它。但当我点击“获取更多字段”按钮时，它就不起作用了。代码如下：

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Test Form</title>
        <script type="text/javascript">

            var counter = 0;

            function moreFields() {
                counter++;
                var newFields = document.getElementById("readroot").cloneNode(true);
                newFields.id = '';
                newFields.style.display = 'block';
                var newField = newFields.childNodes;
                for (var i=0;i<newField.length;i++) {
                    var theName = newField[i].name;
                    if (theName)
                        newField[i].name = theName + counter;
                }
                var insertHere = document.getElementById("writeroot");
                insertHere.parentNode.insertBefore(newFields,insertHere);
            }

            window.onload = moreFields;


        </script>
    </head>
    <body>
        <div id="readroot" style="display: none">

            <input type="button" value="Remove review"
                   onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />

            <input name="cd" value="title" />

            <select name="rankingsel">
                <option>Rating</option>
                <option value="excellent">Excellent</option>
                <option value="good">Good</option>
                <option value="ok">OK</option>
                <option value="poor">Poor</option>
                <option value="bad">Bad</option>
            </select><br /><br />

            <textarea rows="5" cols="20" name="review">Short review</textarea>


        </div>

        <form method="post" action="/cgi-bin/show_params.cgi">

            <span id="writeroot"></span>

            <input type="button" id="moreFields" value="Give me more fields!" />
            <input type="submit" value="Send form" />

        </form>
    </body>
</html>


测试表
var计数器=0；
函数moreFields（）{
计数器++；
var newFields=document.getElementById（“readroot”）.cloneNode（true）；
newFields.id=''；
newFields.style.display='block'；
var newField=newFields.childNodes；
对于（var i=0；i我解决了它。在按钮代码下，我添加了onclick=“moreFields（）”
并删除了id
，瞧！它就像一个符咒。添加onclick=“moreFields（）”并删除了按钮id
它可以正常工作。
很抱歉要问，但是如何从创建的表单中读取变量？最后是vaible1、variable2、variabl3……如何读取它们并将它们传递给SQL？