HTML Автоматическая отправка формы - PullRequest
Новая
       20

HTML Автоматическая отправка формы

0 голосов
/ 03 августа 2020

Я новичок в HTML и JavaScript. Я просто сделал простую страницу, чтобы сложить два числа. Вывод, который я получаю, верен, но когда я нажимаю кнопку sum, сумма отображается в течение доли секунды, а затем снова страница перезагружается. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First</title>
    <script>
        function get_sum() {
            let num_a = parseInt(document.getElementById('first').value);
            let num_b = parseInt(document.getElementById('second').value);
            document.getElementById('sum').innerText = (num_a + num_b).toString(10);
        }

    </script>
</head>
<body>
<form id="form" onsubmit="return get_sum()">
    <label>First Number: <input type="text" id="first" placeholder="Enter a number" required></label>
    <br>
    <label>Second Number: <input type="text" id="second" placeholder="Enter a number" required></label>
    <button type="submit">Sum </button>
</form>
<h1 id="sum"></h1>
</body>
</html>

Ответы [ 3 ]

4 голосов
/ 03 августа 2020

Вам необходимо передать event и добавить event.preventDefault(); в начале функции, чтобы предотвратить перезагрузку страницы, поскольку это кнопка submit: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First</title>
    <script>
        function get_sum(event) {
            event.preventDefault();
            let num_a = parseInt(document.getElementById('first').value);
            let num_b = parseInt(document.getElementById('second').value);
            document.getElementById('sum').innerText = (num_a + num_b).toString(10);
        }

    </script>
</head>
<body>
<form id="form" onsubmit="return get_sum(event)">
    <label>First Number: <input type="text" id="first" placeholder="Enter a number" required></label>
    <br>
    <label>Second Number: <input type="text" id="second" placeholder="Enter a number" required></label>
    <button type="submit">Sum </button>
</form>
<h1 id="sum"></h1>
</body>
</html>
1 голос
/ 03 августа 2020

onsubmit должен возвращать false, чтобы браузер не отправил его на сервер.

Вот так 

<form id="form" onsubmit="get_sum(); return false;">
0 голосов
/ 03 августа 2020

Вы можете добавить прослушиватель событий для обработки щелчка после того, как вы измените тип на «кнопка». Или вы можете остановить распространение события на фактическое действие «отправить». ИЛИ, сделайте и то, и другое, чтобы форма не была отправлена.

Почему оба? Форму также можно отправить, нажав «return / enter» или с помощью скрипта.

Возможно, это немного излишне, но показывает, как обрабатывать события. 

function get_sum(event) {
  event.preventDefault();
  let num_a = parseInt(document.getElementById('first').value);
  let num_b = parseInt(document.getElementById('second').value);
  document.getElementById('sum').innerText = (num_a + num_b).toString(10);
}
const sumButton = document.getElementById('sum-click');
sumButton.addEventListener("click", get_sum, false);

const form = document.getElementById('form');
form.addEventListener('submit', get_sum);
<form id="form">
  <label>First Number: <input type="text" id="first" placeholder="Enter a number" required></label>
  <br>
  <label>Second Number: <input type="text" id="second" placeholder="Enter a number" required></label>
  <button id="sum-values" type="submit">Sum </button>
  <button id="sum-click" type="button">Sum (Not submit)</button>
</form>
<h1 id="sum"></h1>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...