@Cyberjs

Как сделать отправку формы в телеграмм бота но и чтобы форма делала запрос?

Недавно научился делать бота телеграмм который получает данные формы html, для того чтобы в телеграмм бота приходили сообщения нужно чтобы форма не обновляла страницу для этого я использую PreventDefault, но при этом мне нужно осуществлять отправку формы, но с preventDefault форма не будет отправляться, а если убрать preventDefault то в телеграмм бота не будут приходить сообщения.

Вот код

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<form action="" id="tg">
    <input type="text" name="name">
    <input type="email" name="email">
    <button type="submit">Отправить</button>

</form>

<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script>
    const TOKEN = "SECRET";
    const CHAT_ID = "SECRET";
    const URI_API = `https://api.telegram.org/bot${ TOKEN }/sendMessage`;

    document.getElementById('tg').addEventListener('submit',function(e){
       // e.preventDefault(); ( если комментировать то форма делает запрос но не отправляется в телеграмм,
 //но мне нужно чтобы форма делала запрос и в телеграмм отправлялась)

       let message = `<b> Отправитель:</b> ${this.name.value}`;

       axios.post(URI_API,{
           chat_id: CHAT_ID,
           parse_mode: 'html',
           text: message
       })
    });
</script>
</body>
</html>
  • Вопрос задан
  • 402 просмотра
Решения вопроса 1
@alexalexes
document.getElementById('tg').addEventListener('submit',function(e){

Вместо события submit подпишитесь на событие click не на тег формы, а на кнопку.
На эту кнопку.
<button type="submit">Отправить</button>
У кнопки уберите тип submit - вы же не хотите дергать классическую отправку формы через submit.
Все отправки делайте через axios (внутри этой библиотеки используется ajax - что вам и требуется, что и так используется).
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы