Estoy tratando de enviar datos de formulario llamando a una función en el botón de formulario que envía un XMLHttpRquest a través de ajax. El problema es que cuando se envían los datos por primera vez la función funciona bien, pero cada vez que vuelvo a llenar el formulario para enviar nuevos datos sin recargar la página, no se reconoce la función en el botón, arroja TypeError y la consola dice que "myFunction" no es una función. Ya intenté reordenar javascript pero no funciona. Tal vez me estoy perdiendo algo. ¿Pueden ayudarme chicos?

Este es el HTML:

 <form autocomplete="off" id="insert_user"> <input type="text" name="name" placeholder="Name"> <input type="text" name="lname" placeholder="Surname"> <input type="text" name="document" placeholder="Document"> <input type="tel" name="mobile" placeholder="Phone"> <input type="email" name="email" placeholder="Email"> <button type="button" onclick="insertUser()">Send</button> </form> <div class="row" id="users_row"> <!-- List of users loaded with Ajax --> </div>

Este es el JavaScript:

 function loadUsers() { //Allows to show a list of users via ajax. xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("users_row").innerHTML = this.responseText; } }; xhttp.open("GET", "views/users_view.php", true) //This file runs the query that shows the data. xhttp.send() } function insertUser() { // Allows to insert user data via ajax xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("saved_user").innerHTML = "<b class='text-primary'>User Added<b>"; loadUsers() // Refresh the list setTimeout(function() { document.getElementById("saved_user").innerHTML = "" }, 3000) } } xhttp.open("POST", "controller/insert_user.php", true) //This file runs the query that inserts data from the form. insertUser = document.getElementById("insert_user") formData = new FormData(insertUser) xhttp.send(formData) }

Los guiones se colocan al final de la etiqueta del cuerpo. Esta es la respuesta en la consola cuando intento enviar nueva información a través del formulario:

TypeError no detectado: insertUser no es una función en HTMLButtonElement.onclick