Как правильно отправить данные через ajax в telegram
Сделал опросник для сайта на JS. JS отрабатывает хорошо, но не получается правильно передать данные через ajax в телеграм
Код HTML опросника
<div class="scene">
<div class="qwestion qwestion-1" style='background: white;'>
<span class="qwestion__number">qwestion</span>
<h2 class="qwestion__heading">textqwestion</h2>
<div class="qwestion__selects-wrapper">
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-1" data-cost="20" class="qwestion__input-radio qwestion-1" id="qwestion-1-1" checked>
<label for="qwestion-1-1" class="qwestion__input-label">seck1</label>
</div>
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-1" data-cost="10" class="qwestion__input-radio qwestion-1" id="qwestion-1-2" >
<label for="qwestion-1-2" class="qwestion__input-label">seck2</label>
</div>
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-1" data-cost="10" class="qwestion__input-radio qwestion-1" id="qwestion-1-3" >
<label for="qwestion-1-3" class="qwestion__input-label">seck3</label>
</div>
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-1" data-cost="0" class="qwestion__input-radio qwestion-1" id="qwestion-1-4" >
<label for="qwestion-1-4" class="qwestion__input-label">seck4</label>
</div>
</div>
</div>
<div class="qwestion qwestion-3" style='background: white;'>
<span class="qwestion__number">qwestion2</span>
<h2 class="qwestion__heading">textqwestion</h2>
<div class="qwestion__selects-wrapper">
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-3" data-cost="20" class="qwestion__input-radio qwestion-3" id="qwestion-3-1" checked>
<label for="qwestion-3-1" class="qwestion__input-label">seck1</label>
</div>
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-3" data-cost="20" class="qwestion__input-radio qwestion-3" id="qwestion-3-2" >
<label for="qwestion-3-2" class="qwestion__input-label">seck2</label>
</div>
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-3" data-cost="10" class="qwestion__input-radio qwestion-3" id="qwestion-3-3">
<label for="qwestion-3-3" class="qwestion__input-label">seck2</label>
</div>
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-3" data-cost="0" class="qwestion__input-radio qwestion-3" id="qwestion-3-4" >
<label for="qwestion-3-4" class="qwestion__input-label">seck3</label>
</div>
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-3" data-cost="10" class="qwestion__input-radio qwestion-3 qwestion-3-custom-choose other" id="qwestion-3-5" value="иное">
<label for="qwestion-3-5" class="qwestion__input-label other">seck4</label>
<input type="text" class="qwestion-3-custom qwestion-input" id="qwestion-3-custom" name="qwestion-3-custom" style="display: none;">
</div>
</div>
</div>
<div class="qwestion qwestion-4" style='background: white;'>
<span class="qwestion__number">qwestion3</span>
<h2 class="qwestion__heading">textqwestion</h2>
<div class="qwestion__selects-wrapper">
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-4" data-cost="30" class="qwestion__input-radio qwestion-4" id="qwestion-4-1" checked>
<label for="qwestion-4-1" class="qwestion__input-label">seck1</label>
</div>
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-4" data-cost="20" class="qwestion__input-radio qwestion-4" id="qwestion-4-2">
<label for="qwestion-4-2" class="qwestion__input-label">seck2</label>
</div>
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-4" data-cost="0" class="qwestion__input-radio qwestion-4" id="qwestion-4-3" >
<label for="qwestion-4-3" class="qwestion__input-label">seck3</label>
</div>
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-4" data-cost="10" class="qwestion__input-radio qwestion-4" id="qwestion-4-4" >
<label for="qwestion-4-4" class="qwestion__input-label">seck4</label>
</div>
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-4" data-cost="10" class="qwestion__input-radio qwestion-4" id="qwestion-4-5" >
<label for="qwestion-4-5" class="qwestion__input-label">seck5</label>
</div>
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-4" data-cost="10" class="qwestion__input-radio qwestion-4" id="qwestion-4-6" >
<label for="qwestion-4-6" class="qwestion__input-label">seck6</label>
</div>
</div>
</div>
<div class="qwestion qwestion-5" style='background: white;'>
<span class="qwestion__number">qwestion4</span>
<h2 class="qwestion__heading">textqwestion</h2>
<div class="qwestion__selects-wrapper">
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-5" data-cost="0" class="qwestion__input-radio qwestion-5" id="qwestion-5-1" checked>
<label for="qwestion-5-1" class="qwestion__input-label">seck1</label>
</div>
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-5" data-cost="20" class="qwestion__input-radio qwestion-5" id="qwestion-5-2" >
<label for="qwestion-5-2" class="qwestion__input-label">seck2</label>
</div>
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-5" data-cost="20" class="qwestion__input-radio qwestion-5" id="qwestion-5-3" >
<label for="qwestion-5-3" class="qwestion__input-label">seck3</label>
</div>
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-5" data-cost="20" class="qwestion__input-radio qwestion-5" id="qwestion-5-4" >
<label for="qwestion-5-4" class="qwestion__input-label">seck4</label>
</div>
</div>
</div>
<div class="qwestion qwestion-6" style='background: white;'>
<span class="qwestion__number">qwestion5</span><br>
<h2 class="qwestion__heading">textqwestion</h2>
<div class="qwestion__selects-wrapper">
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-6" data-cost="0" class="qwestion__input-radio qwestion-6" id="qwestion-6-1" checked>
<label for="qwestion-6-1" class="qwestion__input-label">seck1</label>
</div>
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-6" data-cost="20" class="qwestion__input-radio qwestion-6" id="qwestion-6-2" >
<label for="qwestion-6-2" class="qwestion__input-label">seck2</label>
</div>
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-5" data-cost="20" class="qwestion__input-radio qwestion-5" id="qwestion-6-3" >
<label for="qwestion-6-3" class="qwestion__input-label">seck3</label>
</div>
<div class="qwestion__selects-item">
<input type="radio" name="qwestion-6" data-cost="20" class="qwestion__input-radio qwestion-6" id="qwestion-6-4" >
<label for="qwestion-6-4" class="qwestion__input-label">seck4</label>
</div>
</div>
</div>
<div class="qwestion qwestion-8" style='background: #fff179;'>
<span class="qwestion__number">qwestion6</span>
<form action="#" method="post" id="final-qwestion" class="final-qwestion">
<h3><font color="red"><b>textqwestion</b></font></h3>
<input type="text" name="gorod" placeholder="sity" class="qwestion-input" id="qwestion__gorod-input" required>
<input type="text" name="tel2" placeholder="phone" class="qwestion-input" id="qwestion__tel-input" required>
<div>
</div>
<button type="submit" form="final-qwestion" id="final-qwestion__btn" class="btn red-btn final-qwestion__btn">resuld</button>
<input type="checkbox" class="question-data-checkbox" id="question-data-checkbox" checked>
</form>
</div>
<div class="qwestion__buttons-wrap">
<a href="javascript:void(0)" class="qwestion__buttons qwestion__prev-btn">prev</a>
<a href="javascript:void(0)" class="btn red-btn qwestion__buttons qwestion__next-btn">Confim</a>
</div>
</div>
JavaScript
function compileForm() { // take answers
var answerInput1 = $('.qwestion-1:checked'),
answerInput2 = $('.qwestion-2:checked'),
answerInput3 = $('.qwestion-3:checked'),
answerInput4 = $('.qwestion-4:checked'),
answerInput5 = $('.qwestion-5:checked');
answerInput3Custom = $('#qwestion-3-custom');
scoreSum = answerInput1.data('cost') + answerInput2.data('cost') + answerInput3.data('cost') + answerInput4.data('cost') + answerInput5.data('cost');
var answer1 = answerInput1.val(),
answer2 = answerInput2.val(),
answer3 = answerInput3.val(),
answer4 = answerInput4.val(),
answer5 = answerInput5.val();
if (answerInput3.hasClass('qwestion-3-custom-choose')) {
console.log('another');
answer3 += ' - ' + answerInput3Custom.val();
}
// put unswers to inputs
var sendInp1 = $('#answer-1').val(answer1),
sendInp2 = $('#answer-2').val(answer2),
sendInp3 = $('#answer-3').val(answer3),
sendInp4 = $('#answer-4').val(answer4),
sendInp5 = $('#answer-5').val(answer5);
sendInp6 = $('#answer-6').val(scoreSum);
};
$('#final-qwestion__btn').click(function(e) {
e.preventDefault();
var answers = [];
$('.qwestion').each(function(index, el) {
var number = index + 1;
if (index > 4) {
answers.push(number + ') Номер телефона —— ' + $(this).find('#qwestion__tel-input').val() + '')
answers.push(number + ') Город : —— ' + $(this).find('#qwestion__gorod-input').val() + '')
} else if (index == 2) {
if ($(this).find('input:checked').hasClass('other')) {
answers.push(number + ') ' + $(this).find('.qwestion__heading').text() + ' —— ' + $(this).find('#qwestion-3-custom').val() + '')
} else {
answers.push(number + ') ' + $(this).find('.qwestion__heading').text() + ' —— ' + $(this).find('input:checked').val() + '')
}
} else {
answers.push(number + ') ' + $(this).find('.qwestion__heading').text() + ' —— ' + $(this).find('input:checked').val() + '')
}
});
if (!$('#qwestion__tel-input').val()) {
$('#qwestion__tel-input').css('box-shadow', '0 0 20px 0px #990033');
} else {
$('#qwestion__tel-input').css('box-shadow', 'none');
answers = answers.join('\n')
console.log(answers);
$.ajax({
url: 'send/send.php',
type: 'POST',
data: {
postData: answers
},
success: function(resultData){
alert("Save Complete");
}
})
}
});
});
PHP
<?php
if (isset($_POST['qwestion-1'])) {
$qwestionq = strip_tags($_POST['qwestion-1']);
$qwestionqFieldset = "<b>qwestion1:</b> ";
}
if (isset($_POST['qwestion-3'])) {
$qwestiona = strip_tags($_POST['qwestion-3']);
$qwestionaFieldset = "<b>qwestion2:</b>";
}
if (isset($_POST['qwestion-4'])) {
$qwestioz = strip_tags($_POST['qwestion-4']);
$qwestionzFieldset = "<b>qwestion3:</b> ";
}
if (isset($_POST['qwestion-5'])) {
$qwestionw = strip_tags($_POST['qwestion-5']);
$qwestionwFieldset = "<b>qwestion4:</b> ";
}
if (isset($_POST['qwestion-6'])) {
$qwestions = strip_tags($_POST['qwestion-6']);
$qwestionsFieldset = "<b>qwestion5:</b> ";
}
if (isset($_POST['gorod'])) {
$gorod = strip_tags($_POST['gorod']);
$gorodFieldset = "<b>qwestion6:</b> ";
}
if (isset($_POST['tel2'])) {
$tel = strip_tags($_POST['tel2']);
$telFieldset = "<b>qwestion7:</b> ";
}
$token = "";
$chat_id_scr = "";
$txt = rawurlencode($txt);
$arr = array(
$qwestionqFieldset => $qwestionq,
$qwestionaFieldset => $qwestiona,
$qwestionzFieldset => $qwestionz,
$qwestionwFieldset => $qwestionw,
$qwestionwFieldset => $qwestions,
$gorodFieldset => $gorod,
$telFieldset => $tel,
);
foreach($arr as $key => $value) {
$txt .= "<b>".$key."</b>".$value."%0A";
};
$sendToTelegram = fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id_scr}&parse_mode=html&text={$txt}","r");