This is my first post on SO. I'm currently working on a Uni project - we are creating a Momondo/Pricerunner type of website for flight tickets from RyanAir. We are scraping RyanAirs site for all the info we need - and that works perfectly fine. So on our site, the user will enter their route (e.g. Copenhagen to London Stanstead) a departure and return date and an amount of adults. All these input fields are in a form. Then the user will click 'Search Flights' which submit all the input fields in the form and sent them to the server via POST (and querystring from NPM) which starts the different JS scripts with the inputs the user has given on the site. When the scraper starts, it will parse all scraped data to a JSON file - the user can also see chart data on how the price moves.
We want to add a notification option, where the user can input their phone number and the desired price for their ticket. So if the ticket gets to lower or equal to the user's desired price, an SMS will get sent directly to their phone with the right info. This notification thingy is a button on the main page, that when pressed will activate a pop-up/modal, where the user then inputs their phone number and the price as stated above. However, it seems like the input fields in the pop-up/modal won't get submitted correctly to the server. All the other user-input like route, departure, and return date, the amount of adults gets correctly sent to the server. But the inputs in the pop-up/modal does not. I've tried to put the pop-up/modal code in the form tag of the other user-input, but that still doesn't help. When submitting the user phone number and the desired price, the value of them is undefined, which I do not understand. The pop-up/modal has display: none as default since it should only pop up when user presses the notification button.
Picture: Notification pop-up/modal
I hope that I can get some help with it here because I spent a lot of time making that pop-up/modal :'). Im going to paste the html, js and css for the pop-up/modal here below.
HTML (keep in mind i have already tried putting the pop-up/modal in the form where the other user-input from main page is):
<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>
Im trying to get the input values with POST method via our localhost server, as said, it works for the other input fields, but not for pop-up/modal ones. As u can see below, im currently just console.log the pop-up/modal input value to test on line 4 below, and it doesnt work. Im putting the code under here for good measure.
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);
}
}
});
Here is the CMD when submitting, as u can see all other info is correct (ignore the 'Checking if given file exists...'):
Ive rambled on, i dont know if i shoudk provide any other code than this - please let me know. And thank you very much for using your time to potentially help me! Have a nice day.
EDIT
Ive now tried to create dummy input fields in the form, the user phone number and desired price input field value will then get = to the dummy input fields values, i can successfully console log this (which i could not do before), but still cant submit it successfully - still says undefined. Which is very weird, since i can litterally console log the dummy input fields (Which are in the form tag) and will log the correct info, then i submit it, and it says undefined.
