根据用户指定的数字动态添加HTML表单字段

Dynamically adding HTML form fields based on a number specified by the user

本文关键字：添加 动态 HTML 表单 字段 数字 用户      更新时间：2023-09-26

我有一个名为Number of messages的表单字段，根据用户指定的数字，我希望在下面动态生成文本字段的确切数量，以允许用户输入指定数量的消息。

我浏览了一些使用JQuery生成动态表单字段的示例，但由于我不熟悉JQuery，这些示例对我来说有点太复杂了。我确实知道JavaScript的基础知识，如果我能找到一个解决方案，我的查询使用JavaScript。

function addinputFields(){
    var number = document.getElementById("member").value;
    for (i=0;i<number;i++){
        var input = document.createElement("input");
        input.type = "text";
        container.appendChild(input);
        container.appendChild(document.createElement("br"));
    }
}

和HTML代码将是

    Number of members:<input type="text" id="member" name="member" value=""><br />
<button id="btn" onclick="addinputFields()">Button</button>
    <div id="container"/>


小提琴在

您可以尝试类似的操作…

var wrapper_div = document.getElementById('input_set');
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  var n = document.getElementById("no_of_fields").value;
  var fieldset = document.createElement('div'),
    newInput;
  for (var k = 0; k < n; k++) {
    newInput = document.createElement('input');
    newInput.value = '';
    newInput.type = 'text';
    newInput.placeholder = "Textfield no. " + k;
    fieldset.appendChild(newInput);
    fieldset.appendChild(document.createElement('br'));
  }
  wrapper_div.insertBefore(fieldset, this);
}, false);
No. of textfields :
<input id="no_of_fields" type="text" />
<div id="input_set">
  <p>
    <label for="my_input"></label>
  </p>
  <button id="btn" href="#">Add</button>
</div>

这是一个简单的任务，使用jQuery使它变得更简单。您需要首先从输入字段获取值，您可以使用.val()或.value。获得值后，检查它是否是整数。现在，只需使用.append()函数来动态添加元素。

HTML 

<form id="myForm">
    Number of Messages: <input id="msgs" type="text"> </input>
    <div id="addmsg">
    </div>
</form>
JAVASCRIPT 

$("#msgs").on('change', function()
{
    var num = this.value;
    if(Math.floor(num) == num && $.isNumeric(num))
    {
         $("#addmsg").text('');
        for(var i = 0; i < num; i++)
        {
            $("#addmsg").append("<input type='text'/><br/>");
        }
    }
});

小提琴

注意，每次输入的值改变时，我首先清除div:

$("#addmsg").text('');

然后循环并继续添加输入字段。我希望这对你有帮助!

相关文章：