这是我在SO上的第一篇文章。我目前正在做一个Uni项目——我们正在为瑞安航空的机票创建一个Momondo/Pricerunner类型的网站。我们正在抓取RyanAirs网站上我们需要的所有信息，这非常好。因此，在我们的网站上，用户将输入他们的路线(例如哥本哈根到伦敦斯坦斯特德(出发和返回日期以及成年人数量。所有这些输入字段都在一个表单中。然后，用户将单击"搜索航班"，它会提交表单中的所有输入字段，并通过POST(和来自NPM的querystring(将其发送到服务器，POST会根据用户在网站上提供的输入启动不同的JS脚本。当scraper启动时，它将把所有刮来的数据解析成一个JSON文件——用户还可以看到价格如何波动的图表数据。
图片：主站点
我们想添加一个通知选项，用户可以在其中输入他们的电话号码和所需的机票价格。因此，如果门票低于或等于用户想要的价格，就会直接向他们的手机发送带有正确信息的短信。这个通知是主页上的一个按钮，当按下它时，将激活一个弹出/模式，然后用户在其中输入他们的电话号码和价格，如上所述。然而，弹出窗口/模态中的输入字段似乎无法正确提交到服务器。所有其他用户输入，如路线、出发和返回日期，成年人的数量都会被正确发送到服务器。但是弹出窗口/模态中的输入没有。我曾尝试将弹出/模式代码放在其他用户输入的表单标记中，但这仍然没有帮助。当提交用户电话号码和所需价格时，它们的值是未定义的，我不理解。弹出/模式具有默认显示：none，因为它应该只在用户按下通知按钮时弹出。
图片：弹出通知/模式
我希望我能在这里得到一些帮助，因为我花了很多时间制作弹出窗口/模态：'(。我将在下面粘贴弹出/模态的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>
我试图通过我们的localhost服务器使用POST方法获取输入值，如上所述，它适用于其他输入字段，但不适用于弹出/模式字段。正如你在下面看到的，我目前只是在下面的第4行console.log弹出/模式输入值进行测试，但它不起作用。我把代码放在下面是为了衡量一下。
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，因为你可以看到所有其他信息都是正确的(忽略"检查给定文件是否存在…"(：
CMDs输出
我漫无边际地说，我不知道我是否应该提供除此之外的任何其他代码——请告诉我。非常感谢你利用你的时间来帮助我！祝你今天愉快。
编辑
我现在尝试在表单中创建虚拟输入字段，用户电话号码和所需的价格输入字段值将得到=到虚拟输入字段值，我可以成功地控制台记录这一点(我以前无法做到(，但仍然无法成功提交-仍然说未定义。这很奇怪，因为我可以随意地控制台记录伪输入字段(在表单标签中(，并记录正确的信息，然后我提交它，它说未定义。
由于CSS显示样式为"none"的DOM对象的元素无法渲染，也不会成为渲染树的一部分，这意味着只要模态的显示仍然为none，就无法访问模态上的元素。我建议您将电话文本的值保持在变量中，这样当模态不可见时，变量的值仍然可以使用。
您可能没有得到回复，因为对于使用最佳实践的人来说，这是一个混乱的局面。我做了几分钟的研究，可能由于display:none而忽略了模态输入。我会尝试在没有display:none的情况下解析它以查看结果。以下是此信息的链接：浏览器何时解析隐藏的元素？
AJAX；jQuery示例
$.ajax({
url: "https://api.exchangeratesapi.io/latest?base=EUR",
method: "GET"
}).done(function(res) {
return (global.rate = res.rates.USD);
});
url返回一个汇率对象。我检索所需的数据并将其返回到主函数。使用AJAX，您也可以执行POST、PUT等操作，但如果您感兴趣，可以查找这些操作。