Question

我需要创建一个网页，如下所示

enter image description here

以下是我当前的代码

function validate() {
  var form = document.getElementsByTagName('form')[0];
  if (form.tickets.value <= form.childrens.value) {
    alert("No of tickets should be greater than the no of children");
    return false;
  } else if (new Date(form.showdate.value) < new Date()) {
    alert("Show date and time should be either current date or future date");
    return false;
  }
  var ticketFare = (form.tickets.value - form.childrens.value) * 200 + form.childrens.value * 100;
  alert("Your approximate ticket amount is " + ticketFare + "INR");
  return true;

}

.item img {
  height: 200px;
  width: 200px;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  transition: all 2s ease;
}

.item img:hover {
  width: 300px;
  height: 300px;
}

<html>
<body>
  <h1><b>Movie Ticket Booking</b></h1>
  <form action="thankyou.html" onsubmit="alert(validate());">
    <table>
      <tr>
        <td>Name</td>
        <td><input type="text" name="name" placeholder="Enter the name" pattern="[A-za-z\s]+" required> </td>
      </tr>
      <tr>
        <td>Movie Name</td>
        <td><input type="text" name="moviename" autocomplete="on" list="movies" required>
          <datalist id="movies">
      <option value="Irada"></option>
  <option value="Rangoon"></option>
  <option value="Logan"></option>
  <option value="Fist Fight"></option>
  </datalist>
        </td>
      </tr>
      <tr>
        <td>Circle</td>
        <td><input type="text" name="circle" autocomplete="on" list="circles" required>
          <datalist id="circles">
      <option value="Silver"></option>
  <option value="Gold"></option>
  <option value="Platinum"></option>
  </datalist></td>
      </tr>
      <tr>
        <td>Phone no</td>
        <td><input type="text" name="phone" placeholder="Enter mobile # here" pattern="[\d]{10}" required> </td>
      </tr>
      <tr>
        <td>Show date and time</td>
        <td><input type="datetime-local" name="showdate" required></td>
      </tr>
      <tr>
        <td>No of tickets</td>
        <td><input type="number" name="tickets" min="1" max="10" required></td>
      </tr>
      <tr>
        <td>No of children's</td>
        <td><input type="number" name="childrens" min="1" max="5" required></td>
      </tr>
      <tr>
        <td><input type="submit" value="Book My Show"></td>
        <td><input type="reset" name="reset"></td>
      </tr>
      <tr>
        <td>
          <div class="item">
            <img src="contactus.jpg" width="254" height="54">
          </div>
        </td>
      </tr>
    </table>
  </form>
</body>

错误：已正确提供所有输入，但故障单计算错误或javaScript方法未返回任何布尔值

Answer 1

将form.tickets.value更改为form.getElementsByAttribute('name','tickets')[0].value

您应该对其余的表单元素（showdate，childrenrens。）

执行相同的操作

Javascript来重新设置布尔值

1 个答案: