Los detalles dependen exclusivamente de la implementación de tu backend, sin embargo generalmente se hace un request al mismo por medio de fetch
con los datos que quieres enviar.
De la documentación, para subir contenido JSON (en el ejemplo la variable data
) a un backend por medio de la ruta /profile
y utilizando un pedido HTTP
de tipo post
:
const data = { username: 'example' };
fetch('https://example.com/profile', {
method: 'POST', // or 'PUT'
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
Combinando tu implementación con el ejemplo que viene en la documentación, una posible solución se vería cómo así:
const name = document.getElementById('name')
const last = document.getElementById('lastname')
const email = document.getElementById('email')
const quest = document.getElementById('quest')
const form = document.getElementById('form')
const text = document.getElementById('warnings')
function enviarDatos(datos) {
fetch(url, {
method: 'POST',
body: JSON.stringify(datos),
headers: {
'Content-Type': 'application/json'
}
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
};
form.addEventListener("submit", e => {
e.preventDefault()
let warnings = ''
let send = false
text.innerHTML = 'enviado'
if (name.value.length < 3) {
warnings += 'El nombre no es valido <br>'
send = true
}
if (last.value.length < 3) {
warnings += 'El apellido no es valido <br>'
send = true
}
if (quest.value.length < 10) {
warnings += 'Lo que sabes hacer es muy poco <br>'
send = true
}
if (send) {
text.innerHTML = warnings
}
!send && enviarDatos({
quest: quest.value,
last: last.value,
name: name.value
});
return false
})
UPDATE:
Con respecto a esta línea:
send && enviarDatos()
Este tipo de operación se llama evaluación de corto circuito, la manera en la que JS verifica una evaluación utilizando el operador AND
es evaluando de izquierda a derecha y si todos los valores dan true
se devuelve este valor final para la comparación. Sin embargo, si algún valor es false
(o se resuelve en false
) termina la ejecución de la evaluación.
Ejemplo:
function holaMundo() {
return "Hola mundo!";
}
console.log(false && holaMundo());
console.log(true && holaMundo());