Это мой первый пост на SO. В настоящее время я работаю над проектом Uni - мы создаем веб-сайт типа Momondo / Pricerunner для авиабилетов от RyanAir. Мы очищаем сайт RyanAirs от всей необходимой информации, и это прекрасно работает. Таким образом, на нашем сайте пользователь будет вводить свой маршрут (например, Копенгаген в Лондон Станстед), дату отправления и возвращения и количество взрослых. Все эти поля ввода находятся в форме. Затем пользователь нажимает кнопку «Поиск рейсов», которая отправляет все поля ввода в форме и отправляет их на сервер через POST (и строку запроса из NPM), которая запускает различные сценарии JS с входными данными, которые пользователь дал на сайт. Когда скребок запускается, он анализирует все очищенные данные в файл JSON - пользователь также может видеть данные графика о том, как цена движется.
Изображение: Главный сайт
Мы хотим добавить опцию уведомления, где пользователь может ввести свой номер телефона и желаемую цену за свой билет. Таким образом, если билет становится ниже или равен желаемой цене пользователя, SMS будет отправлено непосредственно на его телефон с нужной информацией. Это уведомление представляет собой кнопку на главной странице, которая при нажатии активирует всплывающее окно / модальный режим, где пользователь затем вводит свой номер телефона и цену, как указано выше. Тем не менее, кажется, что поля ввода во всплывающем / модальном режиме не будут правильно отправлены на сервер. Все остальные пользовательские данные, такие как маршрут, дата отправления и возвращения, количество взрослых правильно отправляется на сервер. Но входов во всплывающих окнах / модальных нет. Я пытался поместить всплывающий / модальный код в тег формы другого пользовательского ввода, но это все равно не помогает. При отправке пользователю номера телефона и желаемой цены их значение не определено, чего я не понимаю. Всплывающее окно / модальное окно имеет значение по умолчанию: нет, так как оно должно появляться только тогда, когда пользователь нажимает кнопку уведомления.
Изображение: всплывающее окно уведомления / модальное
Я надеюсь, что смогу помочь с этим здесь, потому что я потратил много времени на создание этого всплывающего / модального сообщения: '). Я собираюсь вставить html, js и css для всплывающего окна / модальное здесь ниже.
HTML (имейте в виду, я уже пытался поместить всплывающее окно / модальное в форме, где другой пользовательский ввод с главной страницы):
<div class="getNotified" id="myPopUp">
<div id="PopUpContent" class="PopUp">
<div class="PopUpContentHeader">
<h1 id="PopUpH1">Get notified <img id="notify_icon" src="images/notify_icon.png" height="42" width="42"> </h1>
</div>
<div class="PopUpBody">
<p>Want to get notified about future price changes for this route? </p>
<br>
<p>Leave your phone number and your desired total price for the ticket(s) below. <br> Now sit back and relax - we'll take care of the rest!</p>
<br>
<br>
<input type="tel" id="UserTel" placeholder="Phone number.." value="">
<br>
<div class="priceMover">
<br>
<input type="number" id="userPrice" placeholder="Price.." value="">
<button type="button" class="closePopUp" id="OKbutton"> OK </button>
</div>
</div>
</div>
</div>
CSS:
#PopUpButton{
display: inline-block;
height: 37px;
margin-bottom: -1px;
margin-top: 1px;
margin-left: 10px;
margin-right: 100px;
background-color: black;
}
#PopUpButton:hover{
background-color: #ffc107
}
#PopUpH1{
font-size: 25px;
padding: 10px;
color:#fefefe;
}
img[id="notify_icon"]{
margin-top: -40px;
margin-bottom: -12.5px;
}
.getNotified {
display: none; /* Hidden by default */
position: fixed; /* Stay in place*/
z-index: 1; /* Sit on top */
padding-top: 210px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.PopUp {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid rgb(14, 1, 1);
width: 37%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
.priceMover{
width: 23%;
height: 10px;
margin-left: 180px;
margin-top: -66.5px; /* 56.5 */
}
/* this is the input field for desired user price */
#userPrice{
width: 37%;
height: 15px;
background: transparent;
background-image: url(../images/scaled1_tag.png);
background-position: 5px 5px;
background-repeat: no-repeat;
padding-left: 35px;
border: 1.5px solid #ccc;
border-radius: 4px;
font-size: 15px;
}
/* this is the input field for user phone number*/
#UserTel{
width: 23%;
height: 32.8px;
border-radius: 4px;
background-image: url(../images/scaled1_phn.png);
background-position: 5px 5px;
background-repeat: no-repeat;
padding-left: 35px;
margin-top: -10px;
margin-bottom: 10px;
border: 1.5px solid #ccc;
border-radius: 4px;
font-size: 15px;
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The OK Button */
#OKbutton{
margin-top: 1px;
margin-right: -242px;
}
.closePopUp {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.closePopUp:hover, .closePopUp:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.PopUpContentHeader {
padding: -1px 16px;
background-color: #ffc107;
color: #f6f4f4;
margin-bottom: -45px;
margin-top: -25px;
}
.PopUpBody {padding: 10px 10px 56.5px;}
JS:
<script>
var modal = document.getElementById("myPopUp");
var btn = document.getElementById("PopUpButton");
var btn2 = document.getElementsByClassName("closePopUp")[0];
// When the user clicks the button, open the pop-up
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on OK button, close the pop-up
btn2.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the pop-up, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
Я пытаюсь получить входные значения с помощью метода POST через наш сервер localhost, как сказано, он работает для других полей ввода, но не для всплывающих / модальных. Как вы можете видеть ниже, в настоящее время я просто console.log вводим всплывающее окно / модальное значение для проверки в строке 4 ниже, и оно не работает. Я помещаю код здесь для хорошей меры.
req.on('end', function () {
var post = qs.parse(body);
if(req.url == "/website.html"){
console.log({UserPhone: post.UserTel, UserPrice: post.userPrice});
if(post.datepicker3 == ""){
startJob(post.datepicker2, undefined, post.myInput3, post.myInput4, post.adltsQ1);
console.log({departDate: post.datepicker2, fromCity: post.myInput3, toCity: post.myInput4, AmountAdults: post.adltsQ1});
res.writeHead(200);
}else{
startJob(post.datepicker, post.datepicker1, post.myInput1, post.myInput2, post.adltsQ);
console.log({departDate: post.datepicker, returnDate: post.datepicker1, fromCity: post.myInput1, toCity: post.myInput2, AmountAdults: post.adltsQ});
res.writeHead(200);
}
}
});
Вот CMD при отправке, так как вы можете видеть, что вся остальная информация верна (игнорируйте «Проверка, существует ли данный файл ...»):
Вывод CMD
Я включился, я не знаю, могу ли я предоставить какой-либо другой код, кроме этого - пожалуйста, дайте мне знать. И большое спасибо за то, что вы уделили мне время! Хорошего дня.
РЕДАКТИРОВАТЬ
Теперь я попытался создать фиктивные поля ввода в форме, затем номер телефона пользователя и желаемое значение поля ввода цены получим = к фиктивным значениям полей ввода, я могу успешно записать это в журнал (что я не мог сделать раньше), но все еще не могу отправить его успешно - все еще говорит неопределенное. Что очень странно, так как я могу буквально консоль записывать в журнал фиктивные поля ввода (которые находятся в теге формы) и записывать правильную информацию, затем я отправляю ее, и она говорит неопределенный.