Question

我想根据用户的输入创建文本字段，并通过JavaScript函数显示文本字段，但此代码无效！

<html>
  <head>
    <title>Create text Fields according to the users choice!</title>

    <script type="script/JavaScript">
        function createTextField(){

            var userInput = parseInt(document.form2.txtInput.view);

            for(var i=0; i<=userInput;i++)
            {
                document.write('<input type="text">');
            }


        }

    </script>
</head>
 <form action="http://localhost.WebProg.php" method="post" name="form2">
    <p>How many text fields you want to create? Enter the number below!</p>
    Input: <input type="text" name="txtInput">
    <input type="button" name="btnInput" value="Create" onclick="createTextField();">
 </form>
</html>

Answer 1

请替换此行：

 var userInput = parseInt(document.form2.txtInput.view);

要

var userInput = parseInt(document.getElementsByName('txtInput')[0].value);

  function createTextField(){
 // alert(document.getElementById('txtInput').value);
            var userInput = parseInt(document.getElementsByName('txtInput')[0].value);

            for(var i=0; i<userInput;i++)
            {
                document.write('<input type="text">');
            }


        }

<html>
  <head>
    <title>Create text Fields according to the users choice!</title>
</head>
 <form action="http://localhost.WebProg.php" method="post" name="form2">
    <p>How many text fields you want to create? Enter the number below!</p>
    Input: <input type="text" name="txtInput" id="txtInput">
    <input type="button" name="btnInput" value="Create" onclick="createTextField();">
 </form>
</html>

Answer 2

你不应该使用document.write。正确的方法是将input附加到div。

Fiddle

上的演示

HTML：

<form action="http://localhost.WebProg.php" method="post" name="form2">
    <p>How many text fields you want to create? Enter the number below!</p>Input:
    <input type="text" name="txtInput" />
    <input type="button" name="btnInput" value="Create" />
    <div></div>
</form>

的JavaScript：

var btn = document.getElementsByTagName("input")[1];

btn.onclick = function () {
    var userInput = parseInt(document.getElementsByTagName("input")[0].value, 10);
    for (var i = 0; i <= userInput - 1; i++) {
        document.getElementsByTagName("div")[0].innerHTML += "<input type='text' />"
    }
};

Answer 3

Jquery是添加动态输入/ div的更好选项，易于操作DOM。请检查以下代码

<div class="box">
    <label> Enter input value </label>
    <input type="number" id="in_num"/>
    <button type="button" id="submit"> submit </button>
    <h3> Append input values</h3>
    <div id="dynamicInput"></div>
</div>

$(document).ready(function(e){
    $('#submit').click(function(){     
     var inputIndex = $('#in_num').val();
        for( var i=0; i<inputIndex; i++)
        {
          $('#dynamicInput').append('<input type=text  id=id_'+ i +'/>');
        }
    });
});

演示URl：http://jsfiddle.net/sathyanaga/75vbgesm/3/

Answer 4

更改：

var userInput = parseInt(document.form2.txtInput.view);

要：

var userInput = parseInt(document.getElementById("txtInput").value);

并为输入文本框提供一个id（我使用＆＃34; txtInput＆＃34;，但它可以是任何东西）。我相信你也需要改变循环，当我输入＆＃34; 2＆＃34;它创建了3个输入而不是2个。

根据JavaScript函数中的用户输入创建文本字段

4 个答案:

Fiddle

HTML：

的JavaScript：