JavaScript表单控制：清空输入字段与阻止默认提交行为

<input onclick="confirmAgregar(event)" type="submit" class="btn btn-success" value="Aceptar" name="btnAceptar">

function confirmAgregar(event) {
    // 关键一步：阻止表单的默认提交行为
    event.preventDefault();

    // 在这里执行您的自定义表单处理逻辑，
    // 例如：表单验证、通过AJAX发送数据到服务器等。
    console.log("表单提交已被JavaScript阻止。现在可以执行自定义逻辑。");

    // 如果需要手动提交表单，可以在这里调用 form.submit()
    // 例如：document.querySelector('form').submit();
}

<form method="post" action="ServletPacientes" id="myForm">
    <!-- 表单字段 -->
    <button type="submit">提交</button>
</form>

document.addEventListener('DOMContentLoaded', () => {
    const myForm = document.querySelector('form'); // 获取您的表单元素，如果页面有多个表单，请使用更具体的选择器，如ID
    if (myForm) {
        myForm.addEventListener('submit', function(event) {
            // 阻止表单的默认提交行为
            event.preventDefault();
            console.log("表单通过addEventListener监听的submit事件被阻止。");
            // 在这里执行您的表单验证和数据提交逻辑
        });
    }
});

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

document.addEventListener('DOMContentLoaded', () => {
    const btnClear = document.querySelector('.btnClear');
    const form = document.querySelector('form'); // 获取您的表单元素

    if (btnClear && form) {
        btnClear.addEventListener('click', () => {
            // 选择表单内所有 input、select 和 textarea 元素
            const inputElements = form.querySelectorAll('input, select, textarea');

            inputElements.forEach(element => {
                // 根据元素类型清空其值
                if (element.type === 'text' || element.type === 'email' || element.type === 'password' ||
                    element.type === 'number' || element.type === 'date' || element.tagName === 'TEXTAREA') {
                    element.value = '';
                } else if (element.tagName === 'SELECT') {
                    // 对于 <select> 元素，将其重置为第一个选项（通常是提示语，如 "--Seleccione--"）
                    element.selectedIndex = 0;
                }
                // 对于 checkbox 或 radio，可以设置 element.checked = false;
                // 根据需要处理其他输入类型
            });
            console.log("所有表单字段已清空。");
        });
    }
});

// 假设这是您的动态下拉列表元素
let $departemento = document.getElementById('departamento');
let $provincia = document.getElementById('provincia');
let $distrito = document.getElementById('distrito');

// ... (省略 mostrarLugares 和 recortar 函数定义，以及 $departemento 和 $provincia 的 change 事件监听器) ...

// 在清空按钮的点击事件中，除了清空 input，还需要处理 select 元素的重置
document.addEventListener('DOMContentLoaded', () => {
    const btnClear = document.querySelector('.btnClear');
    const form = document.querySelector('form'); 

    if (btnClear && form) {
        btnClear.addEventListener('click', () => {
            // ... (上面清空其他 input 字段的逻辑) ...

            // 重置下拉列表
            if ($departemento) {
                $departemento.selectedIndex = 0;
                // 触发change事件以级联重置下级下拉列表，如果它们的逻辑依赖于change事件
                $departemento.dispatchEvent(new Event('change')); 
            }
            // 如果下级下拉列表没有自动联动重置，则需要手动清空
            if ($provincia) {
                $provincia.innerHTML = '<option selected disabled>--Seleccione--</option>';
            }
            if ($distrito) {
                $distrito.innerHTML = '<option selected disabled>--Seleccione--</option>';
            }

            console.log("所有表单字段和动态下拉列表已清空。");
        });
    }
});