-2

Seguinte, tô querendo pegar os dados de um input e colocar dentro de um array, mas toda vez que eu envio o formulario fica aparecendo esse erro: 'Failed to load resource: the server responded with a status of 405 crbug/1173575, non-JS module files deprecated.'

Então eu fui criei uma nova pasta em outro lugar, novos arquivos e rodei. O problema anterior passou, mas agora ao enviar acontece isso : Resultado do ao clicar em submit

Gostaria que pudessem me explicar o motivo do primeiro erro e comor resolver com esse agora!

Código a seguir:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes">
    <link rel="stylesheet" href="../style/main.css">
    <title>Document</title>
</head>
<body>
    <section>
        <h1>Insira seus dados</h1>
        <form class="form" action="/" id="formulario" method="POST">
        <label for="nome">Nome:</label>
        <input type="text"  checked  id="nome" name="Nome">
        <label for="sexo">Sexo:</label>
        <input type="text"  checked  id="sexo" name="Sexo"> 
        <label for="idade" aria-autocomplete="inline">Idade</label>
        <input type="number" step=".01"  checked id="idade" name="Idade"> 
        <label for="altura">Altura</label>
        <input type="number" step=".01"  checked id="altura" name="Altura"> 
        <label for="job">Profissão</label>
        <input type="text" step=".01"  checked id="job" name="Job"> 
        <button id="submit" type="submit">Enviar</button>
    </form>
    </section>

    <script src="../javascript/main.js"></script>
</body>
</html>
     @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
        :root {
          --primary-color: rgb(17, 86, 102);
          --primary-color-darker: rgb(9, 48, 56);
        }
        
        * {
          box-sizing: border-box;
          outline: 0;
        }
        
        body {
          margin: 0;
          padding: 0;
          background: var(--primary-color);
          font-family: 'Open sans', sans-serif;
          font-size: 1.3em;
          line-height: 1.5em;
        }
        
        section {
          max-width: 640px;
          margin: 50px auto;
          background: #fff;
          padding: 20px;
          border-radius: 10px;
        }
        
        h1,h2 {
          text-align: center;
        }
        
        
        form input, form label, form button {
          display: block;
          width: 100%;
          margin-bottom: 10px;
        }
        
        form input {
          font-size: 24px;
          height: 50px;
          padding: 0 20px;
          border: 1px solid gray;
          color: var(--primary-color);
        }
        
        form input:focus {
          outline: 1px solid var(--primary-color);
        }
        
        form button {
          border: none;
          background: var(--primary-color);
          color: #fff;
          font-size: 18px;
          font-weight: 700;
          height: 50px;
          cursor: pointer;
          margin-top: 30px;
        }
        
        input[type='number'] {
          -moz-appearance: textfield;
           appearance: textfield;
        }
        
        input[type='number']::-webkit-inner-spin-button {
          -webkit-appearance: none;
        }
        
        label {
          font-size: 18px;
          font-weight: 700;
        }
const form = document.querySelector("form");
form.addEventListener("submit", function (e) {
  e.preventDefault;
});

function capturarDados() {
  nome = document.querySelector("#nome");
  sexo = document.querySelector("#sexo");
  idade = document.querySelector("#idade");
  altura = document.querySelector("#altura");
  profissao = document.querySelector("#job");

  const dados = [];

  dados.push({
    nome: nome.value,
    sexo: sexo.value,
    idade: idade.value,
    altura: altura.value,
    profissao: profissao.value,
  });
}

capturarDados();

1

1 Resposta 1

-4

o segundo erro deve ser pq o formulário foi enviado sem tratar a rota dele. o seu preventDefault() faltou os parênteses ou seja o formulario foi enviado

dica- no html n precisa por o type no botao e no js coloque 'click' no addEventListener

2
  • O querrysSelector aceita o nome padrão das tags. Mas você acertou em questão aos parênteses, percebi isso algumas horas depois, no mais obrigado Commented 19/09/2023 às 15:40
  • verdade , eu vi a class e me esqueci da tag
    – Mikael
    Commented 19/09/2023 às 21:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .