根據用戶在JavaScript函數中的輸入創建文本字段

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 s附加到div 。

小提琴演示

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（我使用了“ txtInput”，但可以是任何東西）。 我相信您還需要更改循環，當我鍵入“ 2”時它會創建3個輸入而不是2個。

根據用戶在JavaScript函數中的輸入創建文本字段

問題描述

4 個解決方案

解決方案1
0 已采納 2014-10-18 09:59:39

解決方案2
0 2014-10-18 10:10:01

小提琴演示

HTML：

JavaScript：

解決方案3
0 2014-10-18 10:54:14

解決方案4
-1 2014-10-18 10:00:21

根據用戶在JavaScript函數中的輸入創建文本字段

問題描述

4 個解決方案

解決方案1 0 已采納 2014-10-18 09:59:39

解決方案2 0 2014-10-18 10:10:01

小提琴演示

HTML：

JavaScript：

解決方案3 0 2014-10-18 10:54:14

解決方案4 -1 2014-10-18 10:00:21

解決方案1
0 已采納 2014-10-18 09:59:39

解決方案2
0 2014-10-18 10:10:01

解決方案3
0 2014-10-18 10:54:14

解決方案4
-1 2014-10-18 10:00:21