Ссылка из формы HTML/JS [дубликат]

Question 1

В настоящее время я пытаюсь создать программу, в которой вы вводите ссылку в HTML-форму, и когда вы нажимаете кнопку, она отправляет вас на эту ссылку. Однако, когда я нажимаю кнопку, страница просто очищает форму. Я уроженец Python и новичок в HTML/JS, поэтому то, как я структурирую свой код, может быть причиной:

<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

Поскольку вы используете форму. Ваша Кнопка

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

действует как кнопка отправки формы и, следовательно, обновляет страницу перед выполнением location.assign() метод. Есть много способов исправить это.

Один простой способ-сообщить браузеру, что эта кнопка не является кнопкой отправки, мы можем сделать это с помощью type="button" атрибут в нашей кнопке.

Создать ворота
Вы можете использовать e.preventDefault() в своей форме отправьте, чтобы остановить обновление страницы.

Попробуйте выполнить приведенный ниже код:

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

Ваш код, точно такой, как указано, вставленный в минимальный шаблон шаблона HTML5, работает в редакторе кода Textastic и в Safari, работающем на локальном хосте.

Возможно, какой-то другой JavaScript в непосредственной близости от вашего прослушивателя событий нарушает функцию стрелки. Может быть, заключение в скобки одного оператора функции могло бы помочь?

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

Поскольку вы используете форму. Ваша Кнопка

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

действует как кнопка отправки формы и, следовательно, обновляет страницу перед выполнением location.assign() метод. Есть много способов исправить это.

Один простой способ-сообщить браузеру, что эта кнопка не является кнопкой отправки, мы можем сделать это с помощью type="button" атрибут в нашей кнопке.

Создать ворота
Вы можете использовать e.preventDefault() в своей форме отправьте, чтобы остановить обновление страницы.

Попробуйте выполнить приведенный ниже код:

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

Ваш код, точно такой, как указано, вставленный в минимальный шаблон шаблона HTML5, работает в редакторе кода Textastic и в Safari, работающем на локальном хосте.

Возможно, какой-то другой JavaScript в непосредственной близости от вашего прослушивателя событий нарушает функцию стрелки. Может быть, заключение в скобки одного оператора функции могло бы помочь?

Ссылка из формы HTML/JS [дубликат]

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории