1

i need some help,

am trying to send message to telegram bot

but things are not working out for me,

am just trying to archive what i want to do. am new to jquery and javascript

below is what i tried

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
    
<script>
  $(document).ready(function () {
    $("#add_button").click(function(event) {
       Execute();
    });
    
    var fname = document.querySelector('input[name="fname"]').value;
    var country = document.querySelector('input[name="country"]').value;
    
    Message: "<html><br>| Fullname: ${fname} <br> | Country: ${country} <br></html>";

    function Execute(){
      $.ajax({
        type: 'POST',
        url: 'https://api.telegram.org/bot<token>/sendMessage?chat_id=<id>text=<message>&parse_mode=html',
        data: Message,
         
         success: function(res) {
        $('#response').text('Message sent');
  },
        error: function() {
          alert("error failed");
        }
      });
    };

  });
</script>

<input type="text" id="fname" name="fname" placeholder="fullname">
<input type="text" id="country" name="country" placeholder="country">
  <input type="button" id="add_button" value="Submit">
  <div id="response"></div>
<body>
    
</body>
</html>
Jeff Docm
  • 15
  • 2
  • 4

1 Answers1

0

There are several issues in you script:

  • Your <body> tag is misplaced
  • AFAIK, your payload must be form encoded (not as GET params)
  • Use ` for format strings instead of "
  • read the input values in the execute method, not outside (otherwise you read them only once on page load).
  • You cannot use <br> or <html> in the message, see the docs
<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

<input type="text" id="fname" name="fname" placeholder="fullname">
<input type="text" id="country" name="country" placeholder="country">
<input type="button" id="add_button" value="Submit">
<div id="response"></div>

<script>
    const token = '<token>';
    const chatId = '<chat_id>';

    $(document).ready(function () {
        $("#add_button").on('click', function (event) {
            execute();
        });

        function execute() {
            const fname = document.querySelector('#fname').value;
            const country = document.querySelector('#country').value;
            const message = `Fullname: ${fname}\nCountry: ${country}`;

            $.ajax({
                type: 'POST',
                url: `https://api.telegram.org/bot${token}/sendMessage`,
                data: {
                    chat_id: chatId,
                    text: message,
                    parse_mode: 'html',
                },
                success: function (res) {
                    console.debug(res);
                    $('#response').text('Message sent');
                },
                error: function (error) {
                    console.error(error);
                    alert("error failed");
                }
            });
        }
    });
</script>
</body>
</html>

And a security note:

Do NOT use this script in any production! NEVER EVER!
Everyone would be able to read and abuse your bot token. Use a backend for this.

Sven Eberth
  • 3,057
  • 12
  • 24
  • 29