How to clear input fields and prevent submission?

Question

Im having a form with several input fields and im trying to do a js script that while i click on a button my inputs become empty and my form does not submit.

This is my form:

let btnClear = document.querySelector('button');
            
            let inputs = document.querySelector('inputs');
            
            btnClear.addEventListener('click', () => {
                inputs.forEach(input => input.value = ' ');
                    
            });
      
      
 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 disables>--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)
             }
         })
         
         

   <div class="container">
          <div class="row">
            <div class="col-12">
             <form  method="post" action="ServletPacientes">
              
                <h1 class="h1 mb-5" >Ingresar nuevo paciente</h1>
                <div class="form-row">
                <div class="form-group  col-md-4">
                  <div> 
                  <label>Nombre:</label> 
                  <input type="text" onkeypress="return checkLetras(event)" class="form-control" name="txtNombre" title="Ingrese su nombre" required /> </div>
                </div>
                <div class="form-group col-md-4">             
                  <div>
                  <label>Apellido:</label> 
                  <input type="text" onkeypress="return checkLetras(event)" class="form-control" name="txtApellido" required="">
                  </div>
                </div>
                
                <div class="form-group col-md-4">
                  <label>DNI: </label>
                  <input type="text" onkeypress="return check(event)" maxlength="8" minlength="7" class="form-control" name="txtDNI" required>
                </div>
                <div class="form-group col-md-4">
                  <label>Correo electrónico: </label>
                  <input type="email" class="form-control" name="txtCorreo" required>
                </div>
                
                
                
                <div class="form-group col-md-4">
                  <label>Teléfono: </label>
                  <input type="text" onkeypress="return check(event)" class="form-control" name="txtTelefono" required>
                </div>
                                                
                <div class="form-group col-md-4">
                  <label>Fecha de nacimiento: </label>
                  <input type="date" class="form-control " name="txtFechaNac" required>
                </div>
             
                
                 <div class="form-group col-md-4">
                        <label for="departamento" > Nacionalidad</label>
                        <select name="comboNacionalidad" id="departamento" class="form-control ">
                            <!-- cargaremos las etiquetas de option con javascript -->
                        </select>
                    </div>
      
                <div class="form-group col-md-4">
                    <label for="provincia"> Provincias</label>
                    <select name="comboProvincia" id="provincia" class="form-control ">
                        <!-- cargaremos las etiquetas de option con javascript -->
                    </select>
                </div>    
    
                    <div class="form-group col-md-4">
                        <label for="distrito" > Localidades</label>
                        <select name="comboLocalidad" id="distrito" class="form-control ">
                            <!-- cargaremos las etiquetas de option con javascript -->
                        </select>
                    </div>                             
                
                <div class="col-12">
                    <input onclick="confirmarAgregar(event)"  type="submit" class="btn btn-success" value="Aceptar" name="btnAceptar">
                    <button  type="" class="btn btn-outline-primary btnClear">Limpiar campos</button>
                </div>
               </div> 
              </form>
              
              
            </div>
          </div>
         </div>

For some reason my form is being submitted and redirecting me to another page and my texts are never emptying. I took the submit type to my but and still does not work.

Answer 1

For preventing form submit you need to call preventDefault() on form submit event:

<form  method="post" action="ServletPacientes" onsubmit="event.preventDefault()">
  ...
</form>

For clearing inputs you need to set correct tag name, select them all and make array to iterate them:

let inputs = [...document.querySelectorAll('input')]; 

Or you can just reset all your form:

const form = document.querySelector("form");
form.reset(); // reset all inputs and form elements inside this form

Answer 2

The confirmAgregar function, wherever it's defined, needs to be updated as so:

function confirmAgregar(event){
  event.preventDefault()
  // ... rest of your code
}

The default behavior of an HTML form submission event is to refresh the page. When you use JavaScript to handle the form submission, you usually want to prevent that behavior, then let your handle submit function perform whatever logic your form needs to do.