使用 javascript 填充动态表单

Question

我正在尝试让带有输入元素的 forloop 在表单之间运行并使用 javascript

动态创建表单

1：在场景一中，脚本中的表单在输入元素填充之前关闭。

2: 在场景二中，当我将 for 循环变量放在表单之间时，出现的错误是未定义的。

请帮忙

场景一

<form>
No of Feilds <input type="text" id= "numberoffeilds">
<input type="button" value = "Create Feilds" onclick= "addfeilds1();"> 
</form>

<div id= "div4" style= "color:gray"></div> 


<script>

function addfeilds1()
{
   var totalfeilds = document.getElementById("numberoffeilds").value;
   var i;

   document.getElementById("div4").innerHTML += '<form action= "issue.html" method = "POST">';

   for(i=0;i<totalfeilds;i++)
   {
       document.getElementById("div4").innerHTML += '<input type = "text">';
   }

   document.getElementById("div4").innerHTML += '<input type = "submit" value="submit" name="submit">';

}
</script>

情景二

<form>
No of Feilds <input type="text" id= "numberoffeilds">
<input type="button" value = "Create Feilds" onclick= "addfeilds2();"> 
</form>

<div id= "div4" style= "color:gray"></div> 

<script>
   function addfeilds2()
   {
      var totalfeilds = document.getElementById("numberoffeilds").value;
      var i;

      function forloop()
      {
          for(i=1 ;i<totalfeilds;i++)
          {
               document.getElementById("div4").innerHTML += '<input type = "text">';
          }
      }

      var loopvar = forloop();

      document.getElementById("div4").innerHTML += '<form action= "issue.html" method = "POST">'+
      '<input type = "text">'+
      loopvar + // it shows the loop as undefined
     '<input type = "text">'+
     '<input type = "text">'+
     '<input type = "submit" value="submit" name="submit">';

   }
</script>

Answer 1

您需要先在字符串中构建 HTML 个元素，最后将它们添加到 div。

固定场景 1：

function addfeilds1()
{
   var totalfeilds = document.getElementById("numberoffeilds").value;
   var i;

   var htmlString = "";
   htmlString += '<form action= "issue.html" method = "POST">';

   for(i=0;i<totalfeilds;i++)
   {
       htmlString += '<input type = "text">';
   }

   htmlString += '<input type = "submit" value="submit" name="submit">';
   document.getElementById("div4").innerHTML = htmlString;
}

这可以防止表单标签在填充输入之前被关闭。

修复方案 2：

  function forloop()
  {
      var htmlString = "";
      for(i=1 ;i<totalfeilds;i++)
      {
           htmlString  += '<input type = "text">';
      }
      return htmlString; // now forloop returns a string that can be added to the element. It no longers returns undefined.
  }

实际上方案 2 正在修复方案 1，但您没有在函数中包含 return。如果您希望一个函数创建一些文本并将其连接成一个字符串，您需要您的函数 return 一个字符串。

第三个例子（进阶）

function addfeilds1()
{
    var totalFields = parseInt(document.getElementById("numberoffeilds").value); //parse integer from value
    if (isNaN(totalFields) || totalFields < 1)
    {
        //check if the input is valid, if not alert.
        alert("Value is not a valid number or lower than 1.");
    }

    var container = document.getElementById("div4");
    //create the form     
    var form = document.createElement("form");
    form.setAttribute("action", "issue.html");
    form.setAttribute("method", "POST");

    for(var i=0; i<totalFields; ++i)
    {
       var node = document.createElement("input");
       node.setAttribute("name", "field[]"); //this sends a array to the request page containing all input field values.
       form.appendChild(node); //add the fields to the form.
    }

    //create the submit button.
    var button = document.createElement("input");
    button.setAttribute("type", "submit");
    button.setAttribute("value", "submit");
    button.setAttribute("name", "submit");
    form.appendChild(button);

    container.appendChild(form); //append the form to the div.
}

使用 javascript 填充动态表单

populating a dynamic form with javascript

javascript

forms

dynamic

场景一

情景二