0

我尝试编写一个函数，该函数接收用户关于在表单中创建多少字段的输入。然后该函数创建一个包含文本框数量（相当于用户输入）和一个提交按钮的表单。我写了这个函数，但它似乎没有在我出错的地方工作。如果有人可以帮助我，我将不胜感激。我的代码：

function createTextBox()
    {   
        var box=document.getElementById('pop');                             //getting the ID of the containner
        var val=document.getElementById('uValue').value;                    //getting the Input value from the user

        var candidateForm=document.createElement('form');                   //Creating a form and giving the attributes
        candidateForm.name="candidateForm";
        candidateForm.method="post";
        candidateFomr.action="process.php";

        for(var i=0; i<val;i++)
        {
            var newTextbox = document.createElement('input');               //creating the textboxes according to the users input
            newTextbox.type="textbox";
            newTextbox.name="candidate[]";
            newTextbox.id="candidateId";

            candidateForm.appendChild(newTextbox);                          //putting the created textboxes in the form

        }

        var saveButton=document.createElement('input');                     //creating the submit button which when clicked will save the value written in the textboxes
        saveButton.type="submit";
        saveButton.name="submitButton";
        saveButton.value="Enter";
        candidateForm.appendChild(saveButton);                              //putting the submit button in the form

        box.appendChild(candiateForm);                                      //And putting the form in the containner.

        //alert (val);
    }

这是HTML部分

<body>
<input type="textbox" name="value_box" id="uValue" ></input>
<input type="button" onclick="javascript:createTextBox()" value="Click"></input>
<div id="pop"></div>
</body>

提前致谢

4

3 回答 3

2

首先input类型是独立标签。

将您的 HTML 更改为

<input type="textbox" name="value_box" id="uValue" />
<input type="button" onclick="javascript:createTextBox()" value="Click"/>
<div id="pop"></div>

还对js进行了更改

function createTextBox()
    {   
        var box=document.getElementById('pop');                             //getting the ID of the containner
        var val=document.getElementById('uValue').value;                    //getting the Input value from the user

        var candidateForm=document.createElement('form');                   //Creating a form and giving the attributes
        candidateForm.name="candidateForm";
        candidateForm.method="post";
        candidateFomr.action="process.php";

        for(var i=0; i<val;i++)
        {
            var newTextbox = document.createElement('input');               //creating the textboxes according to the users input
            newTextbox.type="textbox";
            newTextbox.name="candidate[]";
            newTextbox.id="candidateId";

            candidateForm.appendChild(newTextbox);                          //putting the created textboxes in the form

        }

        var saveButton=document.createElement('input');                     //creating the submit button which when clicked will save the value written in the textboxes
        saveButton.type="submit";
        saveButton.name="submitButton";
        saveButton.value="Enter";
        candidateForm.appendChild(saveButton);                              //putting the submit button in the form

        box.appendChild(candiateForm);                                      //And putting the form in the containner.

        //alert (val);
    }
于 2012-07-22T17:57:58.000 回答
1

您的另一种方法：

    <script>
      function generateForm()
      {
        $FormHTML = "";
        $fieldCount = document.getElementById("fieldsCount").value;
        console.log($fieldCount);
        for ($i = 1; $i <= $fieldCount; $i++)
        {
          $FormHTML += "<div><b>Form input " + $i + ":</b><br><input type='text' id='element" + $i + "' name='element" + $i + "' style='width:200px;'/></div>\n";
        }
        document.getElementById("FieldsContainer").innerHTML = $FormHTML;
      }
    </script>

    <form>
      <select id="fieldsCount" name="fieldsCount" onChange="generateForm()">
        <option value="0">Please choose</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="5">5</option>
        <option value="10">10</option>
      </select>
      <div id="FieldsContainer"></div>
    </form>
于 2012-07-22T17:48:19.137 回答
0

您的代码中有两个拼写错误。这：

candidateFomr.action="process.php";

应该是这样的：

candidateForm.action="process.php";

还有这个：

box.appendChild(candiateForm);

应该是这样的：

box.appendChild(candidateForm);

我测试了纠正错别字的代码，它工作正常。
要使文本框垂直显示，您可以br在每个文本框之后添加一个元素：

for(var i=0; i<val;i++)
{
    var newTextbox = document.createElement('input');               //creating the textboxes according to the users input
    newTextbox.type="textbox";
    newTextbox.name="candidate[]";
    newTextbox.id="candidateId";

    candidateForm.appendChild(newTextbox);                          //putting the created textboxes in the form
    var brElement = document.createElement("br");
    candidateForm.appendChild(brElement);

}

编辑：你的意思是这样？

for(var i=0; i<val;i++)
{
    var lblElement = document.createElement("label");
    lblElement.innerHTML = "Label " + (i+1) + " ";
    candidateForm.appendChild(lblElement);
    var newTextbox = document.createElement('input');               //creating the textboxes according to the users input
    newTextbox.type="textbox";
    newTextbox.name="candidate[]";
    newTextbox.id="candidateId";

    candidateForm.appendChild(newTextbox);                          //putting the created textboxes in the form
    var brElement = document.createElement("br");
    candidateForm.appendChild(brElement);

}
于 2012-07-22T17:45:51.997 回答