Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] O envio do formulário não funciona

Na hora que envio apenas recarrega a página

conectaApi:

async function listaVideos() {
  const conexao = await fetch("http://localhost:3000/videos");
  const conexaoConvertida = await conexao.json();

  return conexaoConvertida;
}

async function criaVideo(titulo, descricao, url, imagem) {
  const conexao = await fetch("http://localhost:3000/videos", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      titulo: titulo,
      descricao: `${descricao} mil visualizações`,
      url: url,
      imagem: imagem,
    }),
  });

  const conexaoConvertida = await conexao.json();
  return conexaoConvertida;
}

export const conectaApi = {
  listaVideos,
  criaVideo,
};



mostraVideos.js:

import { conectaApi } from "./conectaApi.js";

const lista = document.querySelector("[data-lista]");

function constroiCard(titulo, descricao, url, imagem) {
  const video = document.createElement("li");
  video.className = "videos__item";
  video.innerHTML = `<iframe width="100%" height="72%" src="${url}"
    title="${titulo}" frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
<div class="descricao-video">
    <img src=${imagem}" alt="logo canal alura">
    <h3>${titulo}</h3>
    <p>${descricao}</p>
</div>`;

  return video;
}

async function listaVideos() {
  const listaApi = await conectaApi.listaVideos();
  listaApi.forEach((elemento) =>
    lista.appendChild(
      constroiCard(
        elemento.titulo,
        elemento.descricao,
        elemento.url,
        elemento.imagem
      )
    )
  );
}

listaVideos();



criarVideo.js:

import { conectaApi } from "./conectaApi.js";

const formulario = document.querySelector("[data-formulario]");

async function criarVideo(evento) {
  evento.preventDefault();
  const imagem = document.querySelector("[data-imagem]").value;
  const url = document.querySelector("[data-url]").value;
  const titulo = document.querySelector("[data-titulo]").value;
  const descricao = Math.floor(Math.random() * 10).toString();

  await conectaApi.criaVideo(titulo, descricao, url, imagem);

  window.location.href = "../pages/envio-concluido.html";
}

formulario.addEventListener("submit", (evento) => criarVideo());
3 respostas
solução!

Olá Caio, tudo bem?

Pelo que entendi, você está tentando enviar um formulário, mas a página apenas recarrega e nada acontece, certo? Isso pode estar acontecendo porque você não está tratando o evento de envio do formulário corretamente.

No arquivo "criarVideo.js", você precisa passar o evento para a função "criarVideo" e chamar o método "preventDefault()" para evitar que a página seja recarregada. Ficaria assim:

async function criarVideo(evento) {
  evento.preventDefault();
  // resto do código
}

formulario.addEventListener("submit", (evento) => criarVideo(evento));

Espero que isso ajude! Qualquer dúvida, é só perguntar.

Espero ter ajudado e bons estudos!

Funcionou, muito obrigado!!

Ai sim. Que bom que deu certo! Fico feliz em ajudar :)