Skip to main content
1 de 3
FranAcuna
  • 4.1k
  • 1
  • 8
  • 20

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
})

FranAcuna
  • 4.1k
  • 1
  • 8
  • 20