我正在尝试完成 javascript 和 HTML 的在线作业。问题是:
Book Ticket 页面 – 这将包含用户输入以预订火车票的详细信息
致谢页面——用户订票成功后出现致谢页面
门票的数量应该大于 child 的数量(使用 java 脚本进行此验证)。在警告框中提供错误消息“No of tickets should be greater than the no of children”。
· 显示日期和时间应该是当前日期或 future 日期。 (使用 java 脚本进行此验证)。在警告框中提供错误消息“显示日期和时间应该是当前日期或 future 日期”。
· 所有字段都是必填项(应使用 HTML5 完成)。
· 票价应根据以下逻辑计算。 (使用 Java 脚本进行计算)。
o 票价 = 一张票的票价 * 票数
o 假设一张票的票价是 200。
· child 票价100元。
· 用户提交表格后，系统会计算票价并在警告框中显示为“您的大概票价为 INR”。
计算票价的JavaScript方法应该返回一个 bool 值。
例子:门票数量:4 child 数量:1 则票价为700。
出现以下错误:
Have provided all the inputs correctly, but the ticket calculation is wrong or The JavaScript method is not returning any boolean value
即使我从方法返回值并且它正在计算预期输出，即门票数量:4 child 数量:1 那么票价将为 700。
function validations(){
var noTickets=document.getElementById("tickets").value;
var noChildrens=parseInt(document.getElementById("childrens").value);
var value=document.getElementById("showdate").value;
if(noTickets < noChildrens)
{
alert("No of tickets should be greater than the no of children");
return false;
}
if(new Date() > new Date(value))
{
alert("Show date and time should be either current date or future date");
return false;
}
else{
var adults=noTickets-noChildrens;
var ticketfare=(adults*200) + (noChildrens*100);
alert("Your approximate ticket amount is "+ticketfare+" INR");
return true;
}
}.left{
display: inline-block;
width:140px;
text-align: left;
}
.right {
margin-top: 5px;
margin-bottom: 5px;
display:inline;
margin-left: 100px;
}
header{
width:100%;
margin: 0 auto;
}
.item {
position: relative;
overflow: hidden;
width: 200px;
}
.item img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}<html>
<body bgcolor="aqua">
<header><h1>Movie Ticket Booking</h1></header>
<form action="thankyou.html" method="post" onsubmit="return validations()" autocomplete>
<label for="name" class="left">Name</label>
<input type="text" name="name" pattern="[a-zA-Z]+[ ][a-zA-Z]+" class="right" placeholder="Enter the Name" required /><br>
<label for="moviename" class="left">Movie Name</label>
<input list="movies" name="moviename" autocomplete="on" class="right" required="required">
<datalist id="movies">
<option value="Irada"></option>
<option value="Rangoon"></option>
<option value="Logan"></option>
<option value="Fist Fight"></option>
</datalist><br>
<label for="circle" class="left">Circle</label>
<input list="circles" name="circle" autocomplete="on" class="right" required="required">
<datalist id="circles">
<option value="Silver"></option>
<option value="Gold"></option>
<option value="Platinum"></option>
</datalist><br>
<label for="phone" class="left">Phone no</label>
<input type="text" name="phone" placeholder="Enter Mobile # here" maxlength="10" pattern="[0-9]{10}" class="right" required ><br>
<label for="showdate" class="left">Show date and time</label>
<input type="datetime-local" name="showdate" class="right" required="required" id="showdate"><br>
<label for="tickets" class="left">No of tickets</label>
<input type="number" name="tickets" min="1" max="10" class="right" required="required" id="tickets"><br>
<label for="childrens" class="left">No of children's</label>
<input type="number" name="childrens" min="1" max="5" class="right" required="required" id="childrens"><br>
<input type="submit" name="Book My Show" value="Book My Show" class="left" style="text-align: center">
<input type="reset" name="reset" value="Reset" class="right">
</form>
<footer>
<div class="item">
<img src="contactus.jpg" id="contactus" alt="image not found">
</div>
</footer>
</body>
</html>我不知道如何解决这个错误。非常感谢任何帮助/建议。
最佳答案
这就是我的处理方式。为了节省空间，我已将示例缩减为必要的部分。
现在的问题是，除非您阻止事件的默认操作，否则表单将在您的事件监听器执行之前提交。因此，您需要阻止默认操作，验证表单，如果通过验证，然后提交结果。
这个例子已经完成了大部分，现在您只需要将经过验证的响应发送到服务器即可。请记住，客户端验证不应取代服务器端验证。面对客户端的任何东西都不应该被信任，因为它可以很容易地从控制台修改。
序列化表单的方法有很多种，然后将请求发送到服务器是相当简单的(同样，有几种方法可以做到这一点)。
const form = document.getElementById('booking-form');
form.addEventListener('submit', event => {
event.preventDefault();
const tickets = +form.tickets.value;
const children = +form.children.value;
const date = form.date.value;
const adults = tickets - children;
const fare = (adults*200) + (children*100);
try {
if(adults < 0) {
throw "Number of children should not exceed number of tickets."
}
if(Date.now() > Date.parse(date)) {
throw "Cannot book showings in the past.";
}
} catch(error) {
alert(error);
return false;
}
alert(`Your approximate ticket amount is ${fare} INR`);
return true;
});<form id="booking-form" action="thankyou.html" method="post" autocomplete>
<label>Show date and time
<input type="datetime-local" name="date" required id="showdate">
</label><br>
<label>Number of tickets:
<input type="number" name="tickets" min="1" max="10" required id="tickets">
</label><br>
<label>Number of children:
<input type="number" name="children" min="1" max="5" required id="childrens">
</label><br>
<input type="submit" value="Book My Show">
<input type="reset" value="Reset">
</form>关于JavaScript 函数未返回任何 bool 值或工单计算错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45803771/