0

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

const form = document.forms[0];
const validSymbols =
  "абвгдеёжзиклмнопрстуфхцчшщъыьэюяАБВГДЕЁЖЗИКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ- ";
const inputs = form.querySelectorAll("input");

form.addEventListener("keypress", (e) => {
  if (!validSymbols.includes(e.key)) {
    e.preventDefault();
  }
});

inputs.forEach((input) =>
  input.addEventListener("blur", (e) => {
    let str = e.target.value
      .trim()
      .split("")
      .filter((char) => validSymbols.includes(char))
      .join("");
    while (str.startsWith("-")) {
      str = str.slice(1);
    }
    while (str.endsWith("-")) {
      str = str.slice(0, -1);
    }

    str = str[0].toUpperCase() + str.slice(1);

    e.target.value = str;
  })
);

Так же имеется кнопка "submit", при нажатии которой происходит отправка формы которая должна добавлять абзац с введёнными фамилией, именем и отчеством под форму без перезагрузки страницы. Каждая отправка формы добавляет новый абзац на страницу. После отправки поля на форме должны очищаться. Вот и у меня возникли проблемы с данной кнопкой, у меня не получается ее реализовать

form.addEventListener('submit', e => {
  e.preventDefault()
  let p = document.createElement("p")
  let newStr = document.createTextNode("new text")
  p.appendChild(newStr)

  document.documentElement.lastChild.appendChild(p)
})

Пробовал сделать что-то такое, но не понимаю как вместо "new text" передать введенные данные из полей ввода

Используется такая HTML разметка

<!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">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  <title>Document</title>
</head>

<body>
  <form>
    <div class="mb-3">
      <label for="name" class="form-label">Name</label>
      <input type="text" class="form-control" id="name">
    </div>
    <div class="mb-3">
      <label for="surname" class="form-label">Surname</label>
      <input type="text" class="form-control" id="surname">
    </div>
    <div class="mb-3">
      <label for="middlename" class="form-label">Middle name</label>
      <input type="text" class="form-control" id="middlename">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</body>
<script defer src="./main.js"></script>
</html>
2
  • Что бы передать данные из полей формы, вам сначала нужно получить содержимое полей формы, например так — ru.stackoverflow.com/a/946581/258426 Для очистки полей после отправки вам надо будет забить поля пустыми значениями .value('')
    – stylok
    1 дек 2022 в 12:00
  • Хотелось, чтобы данные выводились в "ul" или в "li", я не понимаю как это реализовать
    – Greeder
    2 дек 2022 в 8:18

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.