用Javascript动态创建表单

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

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);
    }

函数createTextBox（）
{   
var box=document.getElementById（'pop'）；//获取容器的ID
var val=document.getElementById（'uValue'）.value；//从用户处获取输入值
var candidateForm=document.createElement（'form'）；//创建表单并给出属性
candidateForm.name=“candidateForm”；
candidateForm.method=“post”；
candidateFomr.action=“process.php”；
对于（var i=0；i您的代码中有两个输入错误。这是：

candidateFomr.action="process.php";

应该是这样的：

candidateForm.action="process.php";

box.appendChild(candidateForm);


这是：

box.appendChild(candiateForm);

应该是这样的：

candidateForm.action="process.php";

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您的代码中有两个输入错误。这是：

candidateFomr.action="process.php";

应该是这样的：

candidateForm.action="process.php";

box.appendChild(candidateForm);


这是：

box.appendChild(candiateForm);

应该是这样的：

candidateForm.action="process.php";

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您的替代方法：

    <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>


函数generateForm（）
{
$FormHTML=“”；
$fieldCount=document.getElementById（“FieldScont”）.value；
console.log（$fieldCount）；
对于（$i=1；$i您的另一种方法：

    <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>


函数generateForm（）
{
$FormHTML=“”；
$fieldCount=document.getElementById（“FieldScont”）.value；
console.log（$fieldCount）；
对于（$i=1；$i以
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);
    }

函数createTextBox（）
{   
var box=document.getElementById（'pop'）；//获取容器的ID
var val=document.getElementById（'uValue'）.value；//从用户处获取输入值
var candidateForm=document.createElement（'form'）；//创建表单并给出属性
candidateForm.name=“candidateForm”；
candidateForm.method=“post”；
candidateFomr.action=“process.php”；
以
输入开始的（var i=0；i类型是独立的标记

将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);
    }

函数createTextBox（）
{   
var box=document.getElementById（'pop'）；//获取容器的ID
var val=document.getElementById（'uValue'）.value；//从用户处获取输入值
var candidateForm=document.createElement（'form'）；//创建表单并给出属性
candidateForm.name=“candidateForm”；
candidateForm.method=“post”；
candidateFomr.action=“process.php”；
对于（var i=0；i当我运行它时，它不工作，我不知道为什么它不工作。）（它怎么不工作？发生了什么？你确定val是一个数字吗？它可能是一个类似“5”的字符串，而不是5。请尝试var val=+document.getElementById（'uValue'））.value一开始，当用户提供输入值时，我只是创建了文本框。它起作用了，之后我尝试创建表单和提交按钮…但它停止了工作。当我在输入文本框字段中输入任何值时，什么都不会发生。另外，请使用console.log（）运行脚本时，您可以了解实际发生的情况，并提供更多信息。当我运行脚本时，它不起作用，我不知道为什么它不起作用。：（它怎么不起作用？发生了什么？您确定val是一个数字吗？可能它是一个类似“5”的字符串，而不是5。请尝试var val=+document.getElementById（'uValue'））.value一开始，当用户提供输入值时，我只是创建了文本框。它起作用了，之后我尝试创建表单和提交按钮…但它停止了工作。当我在输入文本框字段中输入任何值时，什么都不会发生。另外，请使用console.log（）运行脚本时，您可以了解实际发生的情况，并向我们提供更多信息。Jeff..您能帮我一点忙吗？当我的表单中的文本框显示时，它是以水平方式显示的，我们可以垂直显示吗？您也能帮我吗..？？？嘿Jeff，很抱歉再次打扰您。实际上，我正在尝试在表单前面使用LABEL元素每一个被弹出的文本框。我不能这么做。有什么方法可以做到吗？？？是的，兄弟，这就是我的意思。你是救世主…谢谢，伙计：哈哈，没问题…如果你有更多与此相关的问题，请不要犹豫问。杰夫。你能帮我一点忙吗。当我的文本框在我的表格中显示时，它会显示出来在水平方向，我们可以垂直方向。你也可以帮我吗…？？嘿，杰夫，很抱歉再次打扰你。事实上，我正试图在每个弹出的文本框前面使用标签元素。我不能这么做。有没有办法做到这一点？？？是的，兄弟，这就是我的意思。你是救世主…谢谢老兄：哈哈，没问题…a如果你有更多与此相关的问题，请毫不犹豫地提问。