Link do Formulário em HTML/JS [duplicado]

Question 1

Atualmente estou tentando fazer um programa em que você inserir um link para um formulário HTML e quando você clica em um botão, ele envia você para esse link. No entanto, quando eu clicar no botão, a página apenas limpa o formulário. Eu sou um Python nativo e um novato em HTML/JS então a maneira que eu estou estruturando meu código pode ser por:

<form>
    <input type="url" id="link" placeholder="Enter link of website:" required>
    <br>
    <button class="outline" id="open">Create gate</button>
    </form>
    <script type="text/javascript">
        document.getElementById("open").onclick = () => 
        location.assign(String(document.getElementById("link").value));
    </script> </form>

Question 2

Desde que, você está usando um formulário. Seu Botão

<button class="outline" id="open">Create gate</button>

está atuando como o formulário de botão de submeter e, portanto, ele atualiza a página antes de executar o location.assign() o método. Há muitas maneiras de corrigir isso.

Uma forma simples é exclusivamente para dizer ao navegador que este botão não é o botão enviar, nós podemos fazer isso usando type="button" atributo em nosso botão.

Criar portão
Você pode usar e.preventDefault() na sua forma de apresentar para parar a atualização de página.

Tente o código abaixo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Location Object</title>
</head>
<body>
    <form>
        <input type="url" id="link" placeholder="Enter link of website:" required>
        <br>
        <button class="outline" id="open">Create gate</button>
    </form>
    <script type="text/javascript">
        document.getElementById("open").addEventListener('click', (e) => {
             e.preventDefault();
            location.assign(String(document.getElementById("link").value));
        });
       
    </script>
    </form>
</body>
</html>

Question 3

O seu código, exatamente como previsto, colado em um mínimo de HTML5 boilerplate, modelo, trabalha na Textastic editor de código e no Safari rodando em localhost.

Talvez em algum outro JavaScript na proximidade de seu ouvinte de evento é quebrar a seta para a função. Talvez bracketing a uma instrução de função poderia ajudar?

Imran Rafiq Rather · Answer 1 · 2021-11-24T05:52:15

Desde que, você está usando um formulário. Seu Botão

<button class="outline" id="open">Create gate</button>

está atuando como o formulário de botão de submeter e, portanto, ele atualiza a página antes de executar o location.assign() o método. Há muitas maneiras de corrigir isso.

Uma forma simples é exclusivamente para dizer ao navegador que este botão não é o botão enviar, nós podemos fazer isso usando type="button" atributo em nosso botão.

Criar portão
Você pode usar e.preventDefault() na sua forma de apresentar para parar a atualização de página.

Tente o código abaixo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Location Object</title>
</head>
<body>
    <form>
        <input type="url" id="link" placeholder="Enter link of website:" required>
        <br>
        <button class="outline" id="open">Create gate</button>
    </form>
    <script type="text/javascript">
        document.getElementById("open").addEventListener('click', (e) => {
             e.preventDefault();
            location.assign(String(document.getElementById("link").value));
        });
       
    </script>
    </form>
</body>
</html>

Scott Wright · Answer 2 · 2021-11-24T05:48:39

O seu código, exatamente como previsto, colado em um mínimo de HTML5 boilerplate, modelo, trabalha na Textastic editor de código e no Safari rodando em localhost.

Talvez em algum outro JavaScript na proximidade de seu ouvinte de evento é quebrar a seta para a função. Talvez bracketing a uma instrução de função poderia ajudar?

Link do Formulário em HTML/JS [duplicado]

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria