js简单实现表单中点击按钮动态增加输入框数量的方法

下面是“js简单实现表单中点击按钮动态增加输入框数量的方法”的攻略：

前言

在表单中，我们经常会遇到需要动态调整表单项数量的情况，例如填写多个收货地址，多个电话号码等等。使用JavaScript可以轻松实现这一功能，接下来详细讲解如何实现。

解决方案

我们可以通过添加事件监听器来实现按钮点击后增加表单项的功能，具体步骤如下：

选中按钮元素，添加事件监听器；
在事件监听器函数中，创建新的表单项元素，并将其插入到表单中；
给新的表单项元素设置合适的属性和样式。

下面分别介绍具体实现的两个示例。

示例一：增加输入框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态增加输入框</title>
    <style>
        input {
            margin: 10px 0;
            padding: 5px;
        }
    </style>
</head>
<body>
    <form>
        <button id="add-btn">增加输入框</button>
    </form>
    <script>
        const addButton = document.querySelector('#add-btn');
        const form = document.querySelector('form');
        let count = 1;
        addButton.addEventListener('click', function() {
            const input = document.createElement('input');
            input.type = 'text';
            input.name = 'inputCount' + count;
            form.appendChild(input);
            count++;
        });
    </script>
</body>
</html>

在这个例子中，我们创建了一个按钮，点击按钮后会动态增加一个输入框。首先，使用document.querySelector方法获取到按钮元素和表单元素，这里我们把按钮的id设置为add-btn。然后，定义了一个计数器count，用来记录增加的输入框数量。接下来，我们给按钮添加了一个事件监听器，监听器函数会创建一个新的输入框元素，并将其添加到表单中。为了保证每个输入框的名称唯一，我们在创建输入框元素时，将count作为后缀添加到名称中。这个例子中，我们同时也给输入框设置了一些基本的样式，让其看起来更美观。

示例二：增加多个表单项

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态增加表单项</title>
    <style>
        input, select {
            margin: 10px 0;
            padding: 5px;
        }
    </style>
</head>
<body>
    <form>
        <button id="add-btn">增加表单项</button>
    </form>
    <script>
        const addButton = document.querySelector('#add-btn');
        const form = document.querySelector('form');
        const inputs = [
            {
                type: 'text',
                name: 'username',
                labelText: '用户名'
            },
            {
                type: 'password',
                name: 'password',
                labelText: '密码'
            },
            {
                type: 'email',
                name: 'email',
                labelText: '邮箱'
            }
        ];
        let count = 0;
        addButton.addEventListener('click', function() {
            const inputGroup = document.createElement('div');
            inputGroup.classList.add('input-group');
            inputs.forEach(input => {
                const label = document.createElement('label');
                label.innerText = input.labelText;
                const inputElement = document.createElement('input');
                inputElement.type = input.type;
                inputElement.name = input.name + count;
                inputElement.required = true;
                inputGroup.appendChild(label);
                inputGroup.appendChild(inputElement);
            });
            form.appendChild(inputGroup);
            count++;
        });
    </script>
</body>
</html>

这个示例跟第一个例子类似，不过我们增加了一些额外的HTML和CSS代码，以便动态增加多个表单项。我们首先定义了一个计数器count，用来记录增加的表单项数量。然后，我们定义了一些输入项的数据，包括表单项的类型、名称和标签文本。我们把这些数据放在一个数组中。接下来，我们给按钮添加了一个事件监听器，监听器函数会根据定义好的表单项数据，动态生成一个表单项组。这个表单项组包括一个div元素，以及内部的所有表单项。我们在循环中遍历了所有表单项的数据，根据数据生成一个label元素和一个input元素，并把它们都加到div元素中。为了保证每个输入框的名称唯一，我们在创建输入框元素时，将count作为后缀添加到名称中。最后，我们将这个表单项组的div元素添加到表单中。这个例子中，我们也同时对表单项进行了一些基本的样式设置。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js简单实现表单中点击按钮动态增加输入框数量的方法 - Python技术站