SCENARIO ONE

Question

我试图获得一个带有输入元素的forloop，以便在表单之间运行并使用javascript动态创建表单

1：在方案一中，脚本中的表单在输入元素填充之前就会关闭。

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

请帮助

SCENARIO ONE

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

SCENARIO TWO

<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，但您没有在函数中包含返回值。如果您希望函数创建一些文本并将其连接成一个字符串，则需要函数返回一个字符串。

第三个例子（高级）

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填充动态表单

SCENARIO ONE

SCENARIO TWO

1 个答案: