Lien de Formulaire HTML/JS [dupliquer]

Question 1

Je suis en train d'essayer de faire un programme dans lequel vous entrez un lien dans un formulaire HTML et lorsque vous cliquez sur un bouton, il vous envoie vers ce lien. Cependant, lorsque je clique sur le bouton de la page efface simplement le formulaire. Je suis un Python natif et un débutant en HTML/JS donc, la façon dont je vais structurer mon code est peut-être pourquoi:

<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

Depuis, vous êtes à l'aide d'un formulaire. Votre Bouton

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

agit en tant que forme le bouton soumettre et par conséquent, il actualise la page avant l'exécution de la location.assign() la méthode. Il existe de nombreuses façons de résoudre ce problème.

Un moyen simple est exclusivement à dire au navigateur que ce bouton n'est pas le bouton soumettre, nous pouvons le faire en utilisant type="button" attribut dans notre bouton.

Créer de la porte
Vous pouvez utiliser e.preventDefault() sur votre formulaire de soumettre à la halte rafraîchissante de la page.

Essayez le code ci-dessous:

<!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

Votre code, exactement comme prévu, collé dans un minimum de HTML5 boilerplate modèle, travaille dans le Textastic de l'éditeur de code et en Safari en cours d'exécution sur l'hôte local.

Peut-être certains autres JavaScript dans le voisinage de votre écouteur d'événement est la rupture de la flèche de la fonction. Peut-être bracketing d'une instruction de fonction pourrait aider?

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

Depuis, vous êtes à l'aide d'un formulaire. Votre Bouton

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

agit en tant que forme le bouton soumettre et par conséquent, il actualise la page avant l'exécution de la location.assign() la méthode. Il existe de nombreuses façons de résoudre ce problème.

Un moyen simple est exclusivement à dire au navigateur que ce bouton n'est pas le bouton soumettre, nous pouvons le faire en utilisant type="button" attribut dans notre bouton.

Créer de la porte
Vous pouvez utiliser e.preventDefault() sur votre formulaire de soumettre à la halte rafraîchissante de la page.

Essayez le code ci-dessous:

<!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

Votre code, exactement comme prévu, collé dans un minimum de HTML5 boilerplate modèle, travaille dans le Textastic de l'éditeur de code et en Safari en cours d'exécution sur l'hôte local.

Peut-être certains autres JavaScript dans le voisinage de votre écouteur d'événement est la rupture de la flèche de la fonction. Peut-être bracketing d'une instruction de fonction pourrait aider?

Lien de Formulaire HTML/JS [dupliquer]

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie