JavaScript如何清空表单输入字段并阻止表单默认提交

你的代码存在4个直接导致故障的问题：

1. 按钮类型设置错误：表单内的<button>如果不显式指定type="button"，默认type值为submit，点击后会自动触发表单提交，跳转到ServletPacientes路径，你之前写type=""等于没有指定类型，自然会触发默认提交行为。
2. 元素选择器完全错误：
   • document.querySelector('button')会选中页面上第一个button元素，不是你要的清空按钮
   • document.querySelector('inputs')匹配的是不存在的<inputs>标签，根本拿不到任何表单字段，而且querySelector本身只会返回第一个匹配元素，就算标签写对了也拿不到所有输入框
3. 清空逻辑错误：你给字段赋值的是' '（带空格的字符串），不是真正的空值，同时没有处理下拉选择框（select）的重置逻辑。
4. 拼写错误：你写的三级联动默认选项属性disables是错的，正确写法是disabled，会导致默认选项的禁用效果失效。

1. 先修改HTML里的清空按钮，显式指定按钮类型：

<button type="button" class="btn btn-outline-primary btnClear">Limpiar campos</button>

2. 替换原来的清空按钮相关JS代码，修正选择器和清空逻辑，同时增加事件阻止默认提交的逻辑，修复拼写错误：

// 精准匹配清空按钮
let btnClear = document.querySelector('.btnClear');
// 获取当前表单，选中表单下所有输入框、下拉框
const patientForm = document.querySelector('form[action="ServletPacientes"]');
const formFields = patientForm.querySelectorAll('input, select');

btnClear.addEventListener('click', (e) => {
    // 阻止默认事件，彻底避免触发表单提交
    e.preventDefault();
    // 遍历所有字段重置
    formFields.forEach(field => {
        if (field.tagName === 'SELECT') {
            // 下拉框重置到第一个默认选项
            field.selectedIndex = 0;
        } else {
            // 普通输入框设为真正的空值
            field.value = '';
        }
    });
    // 重置三级联动下拉状态，和页面初始加载状态一致
    $provincia.innerHTML = '<option selected disabled>--Seleccione--</option>';
    $distrito.innerHTML = '';
});

// 原有三级联动代码，修正disabled拼写错误即可
let $departemento = document.getElementById('departamento')
let $provincia = document.getElementById('provincia')
let $distrito = document.getElementById('distrito')

let departamentos = ['Argentina', 'Brasil']
let provincias = ['Bs As', 'Cordoba', 'San Pablo']
let distritos = ['San Miguel', 'San Nicolas', 'Tigre', 'Belgrano', 'Calamuchita', 'La falda', 'Gral Belgrano', 'Santa Marta', 'Loa Loa']

function mostrarLugares(arreglo, lugar) {
    let elementos = '<option selected disabled>--Seleccione--</option>'
    for(let i = 0; i < arreglo.length; i++) {
        elementos += '<option value="' + arreglo[i] +'">' + arreglo[i] +'</option>'
    }
    lugar.innerHTML = elementos
}

mostrarLugares(departamentos, $departemento)

function recortar(array, inicio, fin, lugar) {
    let recortar = array.slice(inicio, fin)
    mostrarLugares(recortar, lugar)
}

$departemento.addEventListener('change', function() {
    let valor = $departemento.value
    switch(valor) {
        case 'Argentina':
            recortar(provincias, 0, 2, $provincia)
        break
        case 'Brasil':
            recortar(provincias, 2, 3, $provincia)
        break
    }
    $distrito.innerHTML = ''
})

$provincia.addEventListener('change', function() {
    let valor = $provincia.value
    if(valor == 'Bs As') {
        recortar(distritos, 0, 4, $distrito)
    } else if(valor == 'Cordoba') {
        recortar(distritos, 4, 7, $distrito)
    } else {
        recortar(distritos, 7, 9, $distrito)
    }
})

改完后点击清空按钮不会再跳转到Servlet路径，所有输入框会被清空，三个级联下拉框会回到初始未选择状态。

内容的提问来源于stack exchange，提问作者mateo ghidini