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

Метод 1: использование event.preventDefault()
Пример кода:

<form>
  <input type="text" name="username" required>
  <button id="submitButton">Submit</button>
</form>
<script>
  const submitButton = document.getElementById('submitButton');
  submitButton.addEventListener('click', function(event) {
    event.preventDefault();
    // Additional logic or validation can be performed here
  });
</script>

Метод 2: отключение кнопки
Пример кода:

<form>
  <input type="text" name="username" required>
  <button id="submitButton" disabled>Submit</button>
</form>
<script>
  const submitButton = document.getElementById('submitButton');
  submitButton.addEventListener('click', function(event) {
    event.preventDefault();
    // Additional logic or validation can be performed here
  });
</script>

Метод 3. Изменение типа кнопки
Пример кода:

<form>
  <input type="text" name="username" required>
  <input type="button" value="Submit" id="submitButton">
</form>
<script>
  const submitButton = document.getElementById('submitButton');
  submitButton.addEventListener('click', function(event) {
    event.preventDefault();
    // Additional logic or validation can be performed here
  });
</script>

Метод 4: использование return false;
Пример кода:

<form onsubmit="return false;">
  <input type="text" name="username" required>
  <button type="submit" id="submitButton">Submit</button>
</form>

Запретить кнопку отправить форму можно различными способами. Используя обработку событий, отключение кнопок или изменение типов кнопок, вы можете настроить поведение в соответствии со своими требованиями. Не забудьте включить любую дополнительную логику или проверку перед отправкой формы.