求助：实现类似Google Forms的学校管理员动态表单创建页面

最近你在开发学校用的表单收发网站，要做类似Google Forms的管理员动态表单创建页面，现有HTML和未完成的JS，我来帮你把功能补全并优化~

现有代码展示 #

HTML代码 #

<HTML>
<HEAD>
<TITLE>Create Form</TITLE>
<link rel="stylesheet" type="text/css" href="login.css" />
<script type="text/javascript" src="createform.js"></script>
</HEAD>
<BODY>
<form method="POST">
<div id="dynamicInput">
<label for="fieldName">Name this field</label>
<input type="text" name="fieldName">
<br><br>
<SELECT name="element">
<OPTION value="text">Textbox</OPTION>
<OPTION value="radio">Radio</OPTION>
<OPTION value= "textarea">Text Area</option>
<OPTION value = "checkbox">Check Box</option>
</SELECT>
<input type="button" value="Add an option" onClick="addAllInputs('dynamicInput', document.forms[0].element.value);">
</div>
<br><br><br>
<input type = "button" value="Add another field" onClick = "addSec();">
<br><br>
<input type="submit" value="Submit Form" /> <!-- 新增提交按钮方便测试 -->
</form>
</BODY>
</HTML>

我给原HTML加了提交按钮，方便你测试整体功能~

未完成的JavaScript代码 #

var counterText = 0;
var counterRadioButton = 0;
var counterCheckBox = 0;
var counterTextArea = 0;
var counter = 0;
function addAllInputs(divName, inputType){
var newdiv = document.createElement('div');
switch(inputType) {
case 'text':
newdiv.innerHTML = "Entry " +(counterText+1)+" <input type='text' name='myInputs[]'><br>";
counterText++;
break;
case 'radio':
newdiv.innerHTML = "Entry " +(counterRadioButton+1)+" <input type='...";
// 此处未完成
break;
// 其他字段类型的逻辑也未实现
}
// 缺少将新元素挂载到页面的逻辑
}
// addSec()函数未定义

完善后的完整JavaScript代码 #

var counterText = 0;
var counterRadioButton = 0;
var counterCheckBox = 0;
var counterTextArea = 0;
var fieldCounter = 0; // 记录新增的字段组编号

// 为选中的字段类型添加对应选项
function addAllInputs(divName, inputType) {
    var container = document.getElementById(divName);
    var newdiv = document.createElement('div');
    newdiv.className = "field-option"; // 添加类名方便后续样式控制

    switch(inputType) {
        case 'text':
            counterText++;
            newdiv.innerHTML = `选项 ${counterText}: <input type='text' name='text_field_${fieldCounter}[]' placeholder='输入文本内容'><br>`;
            break;
        case 'radio':
            counterRadioButton++;
            // 单选按钮设置相同name值保证互斥性
            newdiv.innerHTML = `选项 ${counterRadioButton}: <input type='radio' name='radio_field_${fieldCounter}' value='option_${counterRadioButton}'> <input type='text' placeholder='输入选项内容'><br>`;
            break;
        case 'textarea':
            counterTextArea++;
            newdiv.innerHTML = `选项 ${counterTextArea}: <textarea name='textarea_field_${fieldCounter}[]' rows='3' placeholder='输入多行文本'></textarea><br>`;
            break;
        case 'checkbox':
            counterCheckBox++;
            newdiv.innerHTML = `选项 ${counterCheckBox}: <input type='checkbox' name='checkbox_field_${fieldCounter}[]' value='option_${counterCheckBox}'> <input type='text' placeholder='输入选项内容'><br>`;
            break;
        default:
            alert("不支持的字段类型");
            return;
    }
    container.appendChild(newdiv);
}

// 添加新的字段组（包含字段名称输入、类型选择和选项添加按钮）
function addSec() {
    fieldCounter++;
    var mainForm = document.forms[0];
    var newFieldGroup = document.createElement('div');
    newFieldGroup.className = "field-group";
    newFieldGroup.innerHTML = `
        <hr> <!-- 用分隔线区分不同字段组 -->
        <label for="fieldName_${fieldCounter}">字段名称 ${fieldCounter+1}</label>
        <input type="text" name="fieldName_${fieldCounter}" placeholder="输入字段名称">
        <br><br>
        <SELECT name="element_${fieldCounter}">
            <OPTION value="text">Textbox</OPTION>
            <OPTION value="radio">Radio</OPTION>
            <OPTION value="textarea">Text Area</OPTION>
            <OPTION value="checkbox">Check Box</OPTION>
        </SELECT>
        <input type="button" value="Add an option" onClick="addAllInputs('dynamicInput', document.forms[0].element_${fieldCounter}.value);">
    `;
    mainForm.insertBefore(newFieldGroup, mainForm.lastElementChild.previousElementSibling);
    
    // 重置选项计数器，确保新字段组的选项从1开始计数
    counterText = 0;
    counterRadioButton = 0;
    counterCheckBox = 0;
    counterTextArea = 0;
}

功能说明 #

• 字段组管理：点击Add another field会新增独立字段组，包含字段名称输入框、类型下拉选和添加选项按钮，用分隔线区分不同字段
• 选项逻辑优化：
  • 单选按钮自动设置相同name属性，保证同一组单选按钮互斥
  • 各类字段的name按字段组编号命名，方便后端接收数据时区分不同字段
  • 每个选项添加占位提示，提升管理员操作体验
• 计数器重置：新增字段组时重置对应类型的选项计数器，确保每个字段组的选项从1开始计数

内容的提问来源于stack exchange，提问作者Z J