Skip to main content
se añadieron 822 caracteres en el cuerpo
Origen Enlace
FranAcuna
  • 4.1k
  • 1
  • 8
  • 20

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.

  1. Este tipo de operación se llama evaluación de corto circuito, la manera en la que JS realiza 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 (o se resuelve en) Falsy termina la ejecución de la evaluación.
  1. Como menciona Bryro debería de ser !send, me confundí debido al nombre de la variable, te recomiendo cambiar el nombre de tu variable a notSend para que sea más descriptiva o si quieres mantener send entonces cualquier error le asigne un valor de falso a la variable indicando que no debe de ser enviado el request.

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.

  1. Este tipo de operación se llama evaluación de corto circuito, la manera en la que JS realiza 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 (o se resuelve en) Falsy termina la ejecución de la evaluación.
  1. Como menciona Bryro debería de ser !send, me confundí debido al nombre de la variable, te recomiendo cambiar el nombre de tu variable a notSend para que sea más descriptiva o si quieres mantener send entonces cualquier error le asigne un valor de falso a la variable indicando que no debe de ser enviado el request.
se añadieron 822 caracteres en el cuerpo
Origen Enlace
FranAcuna
  • 4.1k
  • 1
  • 8
  • 20
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());
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
})
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());
Origen Enlace
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
})