I have a simple thing. HTML code for the message sending form in telegram bot. Code in Js And php code.
But about sending the form gives an error POST http://127.0.0.1:5500/ajax.php 405 (method not allowed)
How to fix? 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">
<title>Document</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="container">
<div class="log-form">
<h2>Отправка формы в телеграм</h2>
<form class="telegram-form">
<input type="text" name="name" placeholder="Имя" autocomplete="off" />
<input type="text" name="phone" placeholder="Телефон" autocomplete="off" />
<input type="text" name="email" placeholder="Email" autocomplete="off" />
<textarea name="text"></textarea>
<input type="file" name="file">
<button type="submit" class="btn">отправить</button>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./main.js"></script>
</body>
</html>
PHP:
<?php
// Токен телеграм бота
$tg_bot_token = "5300693289:AAG-3R2gy2qSO_ZfBgTo_4XB_4fCe0w3f-s";
// ID Чата
$chat_id = "-600004198";
$text = '';
foreach ($_POST as $key => $val) {
$text .= $key . ": " . $val . "\n";
}
$text .= "\n" . $_SERVER['REMOTE_ADDR'];
$text .= "\n" . date('d.m.y H:i:s');
$param = [
"chat_id" => $chat_id,
"text" => $text
];
$url = "https://api.telegram.org/bot" . $tg_bot_token . "/sendMessage?" . http_build_query($param);
var_dump($text);
file_get_contents($url);
foreach ($_FILES as $file) {
$url = "https://api.telegram.org/bot" . $tg_bot_token . "/sendDocument";
move_uploaded_file($file['tmp_name'], $file['name']);
$document = new \CURLFile($file['name']);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, ["chat_id" => $chat_id, "document" => $document]);
curl_setopt($ch, CURLOPT_HTTPHEADER, ["Content-Type:multipart/form-data"]);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
$out = curl_exec($ch);
curl_close($ch);
unlink($file['name']);
}
die('1');
JS:
$('.telegram-form').on('submit', function (event) {
event.stopPropagation();
event.preventDefault();
let form = this,
submit = $('.submit', form),
data = new FormData(),
files = $('input[type=file]')
$('.submit', form).val('Отправка...');
$('input, textarea', form).attr('disabled','');
data.append( 'name', $('[name="name"]', form).val() );
data.append( 'phone', $('[name="phone"]', form).val() );
data.append( 'email', $('[name="email"]', form).val() );
data.append( 'text', $('[name="text"]', form).val() );
data.append( 'file', $('[name="file"]', form).val() );
files.each(function (key, file) {
let cont = file.files;
if ( cont ) {
$.each( cont, function( key, value ) {
data.append( key, value );
});
}
});
$.ajax({
url: 'http://127.0.0.1:5500/ajax.php',
method: 'POST',
data: data,
cache: false,
dataType: 'json',
processData: false,
contentType: false,
xhr: function() {
let myXhr = $.ajaxSettings.xhr();
if ( myXhr.upload ) {
myXhr.upload.addEventListener( 'progress', function(e) {
if ( e.lengthComputable ) {
let percentage = ( e.loaded / e.total ) * 100;
percentage = percentage.toFixed(0);
$('.submit', form)
.html( percentage + '%' );
}
}, false );
}
return myXhr;
},
error: function( jqXHR, textStatus ) {
// Тут выводим ошибку
},
complete: function() {
// Тут можем что-то делать ПОСЛЕ успешной отправки формы
console.log('Complete')
form.reset()
}
});
return false;
});
I tried to search on the Internet but could not find a solution. In a good way, the code should send the form data to the telegram bot and clear the form itself.
