Как добавлять +1 число к сообщению, при нажатии на кнопку "Отправить"?

Question

[Андрей Белов]

Ситуация такова. Есть код, который отправляет сообщение в Телеграм-бот. Нужно, чтобы скрипт считал общее количество отправленных сообщений с сайта в Телеграм-бот. И отправлял полученное число с сообщением телеграм-бот.

<div class="cotainer mt-5 pt-5 pb-5">
        <div class="col-md-6 offset-md-3">
            <form id="tg">
                <div class="form-group">
                    <label class="form-label">Имя</label>
                    <input type="text" name="name" class="form-control">
                </div>
    
                <div class="form-group">
                    <label class="form-label">Email</label>
                    <input type="text" name="email" class="form-control">
                </div>

                <button type="submit" class=" btn btn-primary mt-4">Отправить</button>
            </form>
        </div>
    </div>
    

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    
    <script>
        const TOKEN = "пример";
        const CHAT_ID = "-1001806005464";
        const URI_API = `https://api.telegram.org/bot ${ TOKEN }/sendMessage`;

        document.getElementById('tg').addEventListener('submit', function(e) {
            e.preventDefault();

            let message = `<b>Заявка с сайта!</b>\n`;
            message += `<b>Отправитель:</b> ${ this.name.value }\n`;
            message += `<b>Почта: </b> ${ this.email.value }`;
            
            axios.post(URI_API, {
                chat_id: CHAT_ID,
                parse_mode: 'html',
                text: message
            })
        })

    </script>

Подскажите, пожалуйста, какой код прописать?

Comments

[Dastan_UI]

Спряч токен и обнови ее в бот father

[Андрей Белов]

Как спрятать токен?

[Dastan_UI]

Андрей Белов, Ну, имею ввиду что бы тут не был виден) Через этот токен я могу получить сообщение и отправлять эти же сообщение. Меня вебхук и т/д

[Dastan_UI]

Вообще, отправка сообщение делаете через BE. ставите либо redis либо базу либо файл счетчик сообщении и там просто делаете n+1. В данном случае через js невозможно сделать n+1. тк у всех n разный будет

[Андрей Белов]

Dastan_UI, можно подробнее?

[Dastan_UI]

Андрей Белов, смотрите, у вас данный код выполняется в js. Js это клиент. У каждого клиента свои данные. Те если даже сделаете счетчик тут, то вы будете получать условно с одного юзера userN+1. Это может быть 1,2,3… второй юзер точно также user2N+1 те те же 1,2,3,4… если вам нужно именно абсолютный (а не относительно каждого юзера) то выполняйте на сервере

[Dastan_UI]

Какой у вас сервер? На чем он написан?

[Андрей Белов]

Dastan_UI, на html написан

[Dastan_UI]

Андрей Белов, сервер не может быть написан на html. У вас статичный сайт, как я понимаю, верно?

[Андрей Белов]

Dastan_UI, да, верно!

[Dastan_UI]

Андрей Белов, Тогда делайте относительный каждого пользователя;

// код дополнение
const getIndex = () =>{
   return parseInt(window.localStorage.getItem('tgindex') ?? 1);
}
const incrementIndex = () => {
   window.localStorage.setItem('tgindex', `${getIndex() + 1}`);
}

// ваш код
const TOKEN = "пример";
        const CHAT_ID = "-1001806005464";
        const URI_API = `https://api.telegram.org/bot ${ TOKEN }/sendMessage`;

        document.getElementById('tg').addEventListener('submit', function(e) {
            e.preventDefault();

            // add
            const index = getIndex(); // get index
            incrementIndex(); // update index
            //
            let message = `<b>Заявка с сайта!</b>\n`;
            message += `<b>Отправитель:</b> ${ this.name.value }\n`;
            message += `<b>Почта: </b> ${ this.email.value }\n`;
            message += `<b>Номер сообщения: </b>${index}`
            
            axios.post(URI_API, {
                chat_id: CHAT_ID,
                parse_mode: 'html',
                text: message
            })
        })

[Андрей Белов]

Dastan_UI, подскажите пожалуйста. Хочу вставить этот код в общий html. Как правильно задать путь message (Отправитель), чтоб он нашёл эту строку по классу?

[Dastan_UI]

Андрей Белов, не понял ваш вопрос. Переформулируйте пожалуйста.
Сам код нужно ставить внутрь тега script

[Андрей Белов]

Как обратиться именно к этой строке? Когда в коде присутствует множество "name".

[Dastan_UI]

Андрей Белов,

document.getElementById('tg').addEventListener('submit', function(e) {
            e.preventDefault();
            const name = e.target[0].value;
            const email = e.target[1].value;
        })

[Андрей Белов]

Dastan_UI, Как это будет выглядеть? Этот скрипт будет считать общее количество сообщений с сайта?

// код дополнение
const getIndex = () =>{
   return parseInt(window.localStorage.getItem('tgindex') ?? 1);
}
const incrementIndex = () => {
   window.localStorage.setItem('tgindex', `${getIndex() + 1}`);
}

// ваш код
const TOKEN = "пример";
        const CHAT_ID = "-1001806005464";
        const URI_API = `https://api.telegram.org/bot ${ TOKEN }/sendMessage`;

        document.getElementById('tg').addEventListener('submit', function(e) {
            e.preventDefault();

            // add
            const index = getIndex(); // get index
            incrementIndex(); // update index
            //
            let message = `<b>Заявка с сайта!</b>\n`;
            message += `<b>Отправитель:</b> ${ this.name.value }\n`;
            message += `<b>Почта: </b> ${ this.email.value }\n`;
            message += `<b>Номер сообщения: </b>${index}`
            
            axios.post(URI_API, {
                chat_id: CHAT_ID,
                parse_mode: 'html',
                text: message
            })
        })

[Dastan_UI]

Андрей Белов, общее количество сообщении одного пользователя.

[Андрей Белов]

Dastan_UI, Как через базу MySQL данных сделать число нажатий на кнопку? Спасибо огромное за помощь)

[Dastan_UI]

Андрей Белов, для начала на чем у вас бек написан? Фронт написан у вас на ванильном JS и html css. Все зависит от бека.
Да и вообще можете даже не через MySQL а через файл.
Условно писать в файл tgindex.txt цифру 12…

[Андрей Белов]

Dastan_UI, спасибо за ответы, они мне помогают очень!
Вот данные Веб-сервера LiteSpeed:

Answer 1

[Dastan_UI]

// код дополнение
const getIndex = () =>{
   return parseInt(window.localStorage.getItem('tgindex') ?? 1);
}
const incrementIndex = () => {
   window.localStorage.setItem('tgindex', `${getIndex() + 1}`);
}

// ваш код
const TOKEN = "пример";
        const CHAT_ID = "-1001806005464";
        const URI_API = `https://api.telegram.org/bot ${ TOKEN }/sendMessage`;

        document.getElementById('tg').addEventListener('submit', function(e) {
            e.preventDefault();

            // add
            const index = getIndex(); // get index
            incrementIndex(); // update index
            //
            let message = `<b>Заявка с сайта!</b>\n`;
            message += `<b>Отправитель:</b> ${ e.target[0].value }\n`;
            message += `<b>Почта: </b> ${ e.target[1].value }\n`;
            message += `<b>Номер сообщения: </b>${index}`
            
            axios.post(URI_API, {
                chat_id: CHAT_ID,
                parse_mode: 'html',
                text: message
            })
        })

Comments

[Dastan_UI]

если еще что то добавляете соответственно e.target[N].value; если после кнопки button N+1;

[Андрей Белов]

Dastan_UI, как скрипт понимает, что ${ e.target[0].value } -> это обращение к

<input type="text" name="name" class="form-control">

?

[Dastan_UI]

Андрей Белов, e.target - это , [0] - соотвественно ее children

[Андрей Белов]

Dastan_UI, не видно ответ e.target - это.......?

[Dastan_UI]

Андрей Белов,

[Dastan_UI]

<форм>

[Dastan_UI]

На Английском он считает ее как тег ( form

[Андрей Белов]

Dastan_UI, Дело в том, что я запускаю страницу на локальном сервере(то, есть со своего компа). На хост не заливал.
Всё работает чётко, но почему счетчик отправок не прибавляет +1 к сообщениям?


Как это исправить или надо на сервер залить сайт?