Не могу вывести текст из формы пишет undefined

Question

Я её нагло взял из интернета,но в силу того,что в JS я ноль полный как и впринципе в создании сайтов,я не понял почему при поступлении сообщения мне на телеграмм поступает вместо текста UNDEFINED

  <!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<!-- jQuery Cookies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/latest/js.cookie.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>

     <div class="form-group">
    <h1>Запись</h1>
<form id="datas">
    <p>
        <label for="phone">Номер телефона *</label><br>
        <input id="phone" autocomplete="off" placeholder="+7 (999) 999-99-99" maxlength="12" pattern="^\+7\d{3}\d{7}$" name="phone" class="phone form-control">
    </p>
        <p>
        <label for="time">Дата и время записи *</label><br>
        <input id="time" autocomplete="off" class="form-control" placeholder="Введите дату и время">
    </p>
    
    <p>
        <label for="descr">Сообщение (не обязательно)</label><br>
        <textarea id="descr" class="form-control overflow-hidden"  placeholder="Введите текст" name="descr"  class="form-label overflow-hidden "> </textarea>
    </p>

    <a href="#" class="btn btn-success " class-btn id="datas-btn">ОТПРАВИТЬ</a>

    <p class="ressult"></p>

</form>
</div>


<script>

// Защита от «Дурака» 1. Проверяем куки на количество отправленных заявок и обрубаем очередную отправку после 2 попыток
if(Cookies.get('sent') == '5'){
// Удаляем форму и на ее место вставляем текст
    $('#datas').empty().append('Вы отправили слишком много заявок. Попробуйте повторить позже. <br><br>От вас получены следующие данные: <br><br> <strong>Номер телефона:</strong> ' + Cookies.get('phone') + '<br><strong>Краткое описание:</strong> '  + Cookies.get('text'));
}



    // ONCLICK IN-MODAL BUTTON
    
    // Вешаем событие на кнопку отправки
    $('#datas-btn').click(function(){

        // Очищаем поле с результатом 
        $('p.ressult').empty();

        // Защита от «Дурака» 2. Проверяем наличие метки в виде CSS класса и блокируем повторную отправку заявки
        if($('#datas-btn').hasClass('sent')){
            $('p.ressult').css('color', 'red').append('Вы уже отправили заявку. Если была допущена ошибка — обновите страницу и отправьте заново.');
        }else{

            var f_phone = $('input.phone').val(),
                f_time = $('input.time').val(),
                f_descr = $('textarea.descr').val();        
    
            // Проверяем корректность номера телефона (только РФ)
            if(f_phone == '' || !validatePhone(f_phone)){

                $('p.ressult').css('color', 'red').append('Некорректно заполнен номер телефона');

            }else{
                // Если Телефон корректный — выводим результат
                $('p.ressult').css('color', 'green').append('Заявка отправлена!<br>Мы свяжемся с вами в ближайшее время');

                // Защита от «Дурака» 2. Вешаем метку в виде CSS класса и блокируем повторную отправку заявки
                $('#datas-btn').addClass('sent');

                // Заносим номер телефона и текст в куки
                Cookies.set('phone', f_phone);
                Cookies.set('time', f_time);
                Cookies.set('text', f_descr);

                // Защита от «Дурака» 1. Даем две попытки на отправку заяявок. Фиксируем их в куках
                if(!Cookies.get('sent')){
                    Cookies.set('sent', '1');
                }else if(Cookies.get('sent') == '1'){
                    Cookies.set('sent', '2');
                }               

                //если все проверки пройдены формируем текстовое собщение               
                var text = 'Новая заявка:\n ' + f_descr +' ,\n ' + f_phone +',\n ' + f_time;
            
                //и вызываем функцию отправки в телегу
                send_tg(text);

                // отладочное сообщение
                // $('p.ressult').append('<br><br>' + f_phone + ', ' + f_descr);
        
            }
        
        }

    });

// STATIC FUNCTIONS
// Защита от «Дурака» 3. Блокируем возможность вставки в поле с номером телефона, дабы отбить желание спамить нам заявки
$('input.phone').bind('cut copy paste', function (e) {
    e.preventDefault();
});

// Валидация телефона через регулярные выражения
function validatePhone(phone){
    let regex = /^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/;
 return regex.test(phone);
}

// AJAX отправка данных в ТГ
function send_tg(text){

            var chatid = 'chat id was here',
                    token = 'token was here',
                z = $.ajax({
                
                type: "POST",  
                url: "https://api.telegram.org/bot"+token+"/sendMessage?chat_id="+chatid,
            data: "parse_mode=HTML&text="+decodeURIComponent(text), 
  }); 
};

</script>

Answer 1

Вы считывайте поля по селектору класса, а надо по id, исправьте следующий код:

var f_phone = $('input.phone').val(),
  f_time = $('input.time').val(),
  f_descr = $('textarea.descr').val();

Должно получиться:

var f_phone = $('#phone').val(),
    f_time = $('#time').val(),
    f_descr = $('#descr').val();

БЛОГ НА HUSL

Не могу вывести текст из формы пишет undefined

Ответы (1 шт):