Looking for advice with AJAX and js - node.js

Question

I want to add a new user to mysql database and I know how to make querys with one unique search row but now I got four of them.
4 inputs
<div id="data">
User:
<input type="text" name="UserName" id="name_u"></textarea>
<br>
Password:
<input type="password" name="contraseña" id="pass_u">
<br>
Email:
<input type="email" name="email" id="email_u">
<br>
BirthDate:
<input type="date" name="BirthDate" id="bday_u">
<br>
<input value="Registrar" type="button" onclick="add_u()">
</div>
My problem is that I don't know how to make the AJAX and write the js to make them work.
app.get ('/useradd',(req, res)=>{
var name_u = req.query.name_u;
var pass_u = req.query.pass_u;
var email_u = req.query.email_u;
var bday_u = req.query.bday_u;
mysqlConnection.query('INSERT INTO user (UserName, Password, email, BirthDate, level, U_rank) VALUES ()', [search], (err, rows, fields)=>{
if (!err){
console.log(rows);
res.end(rows);
}
else
console.log(err);
})
});
This is the code I'm ussing on my js.
If someone can help me I'll really appreciate it.

Answer 1

Wrap your inputs in < form > not a < div >
<form method="POST" enctype="multipart/form-data" id="myform">
<input type="text" name="title"/><br/><br/>
<input type="file" name="files"/><br/><br/>
<input type="submit" value="Submit" id="btnSubmit"/>
</form>
<h1>jQuery Ajax Post Form Result</h1>
<span id="output"></span>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
Use next javascript to collect and send form data
$(document).ready(function () {
$("#btnSubmit").click(function (event) {
//stop submit the form, we will post it manually.
event.preventDefault();
// Get form
var form = $('#myform')[0];
// Create an FormData object
var data = new FormData(form);
// If you want to add an extra field for the FormData
data.append("CustomField", "This is some extra data, testing");
// disabled the submit button
$("#btnSubmit").prop("disabled", true);
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: "/upload.php",
data: data,
processData: false,
contentType: false,
cache: false,
timeout: 800000,
success: function (data) {
$("#output").text(data);
console.log("SUCCESS : ", data);
$("#btnSubmit").prop("disabled", false);
},
error: function (e) {
$("#output").text(e.responseText);
console.log("ERROR : ", e);
$("#btnSubmit").prop("disabled", false);
}
});
});
});