Question

需要您的帮助！我希望你能帮助我。例如，我有一个包含以下内容的表格：名字，姓氏，电子邮件，一个下拉列表和8个带有时间长度的div（当您单击任何更改的颜色时）。当您按下提交按钮时，警报将显示用户输入的值的信息。样本消息： “姓氏”为电影“蜘蛛侠”的“主角”预订了试镜。我们在“ 17：00-18：00”等您。详细信息发送到您的“电子邮件” 我正在尝试以不同的方式进行操作，但没有任何结果

CSS

<style>
        .demo {
              border: 1px solid black;
              width: 100px;
              text-align: center;
              float: left;
              margin: 10px;
        }

       .selected {
              background-color:blue;
              border: 1px solid black;
              width: 100px;
              text-align: center;
              float: left;
              margin: 10px;
        }

        .reserved {
              background-color:red;
              border: 1px solid black;
              width: 100px;
              text-align: center;
              float: left;
              margin: 10px;
        }            

  </style>

HTML

<body>

  <form action="" name="formName" onsubmit="complete(this)">
        <label for="firstName">Firstname : </label>
        <input type="text" name="name" id="firstName" placeholder="Enter your firstname" required>
        <br>
        <br>
        <label for="lastName">Lastname : </label>
        <input type="text" name="name" id="lastName" placeholder="Enter your lastname" required>
        <br>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email">

        <label for="movie">Movie</label>
        <select name="movie" id="movie">
              <option value=""></option>
              <option value="Spider man">Spiderman</option>
              <option value="Iron man">Ironman</option>
              <option value="Super man">Superman</option>
        </select>
        <br>
        <br>
        <label for="movie_role">Role in the movie</label>
        <select name="role" id="movie_role">
              <option value=""></option>
              <option value="main">the main role</option>
              <option value="stuntman">stuntman</option>
              <option value="extras">extras</option>
              <option value="supporting role">supporting role</option>
        </select>
        <br>
        <br>
        <div onclick="myFunction()" class="demo">
              <p>9:00 - 10:00</p>
        </div>

        <div onclick="myFunction()" class="demo">
              <p>10:00 - 11:00</p>
        </div>

        <div onclick="myFunction()" class="demo">
              <p>11:00 - 12:00</p>
        </div>

        <div onclick="myFunction()" class="demo">
              <p>12:00 - 13:00</p>
        </div>

        <div onclick="myFunction()" class="demo">
              <p>14:00 - 15:00</p>
        </div>
        <div  onclick="myFunction()" class="demo">
              <p>15:00 - 16:00</p>
        </div>
        <div  onclick="myFunction()" class="demo">
              <p>16:00 - 17:00</p>
        </div>
        <div onclick="myFunction()" class="demo">
              <p>17:00 - 18:00</p>
        </div>
        <br>
        <br>
        <br>
        <br>
        <input type="submit" onclick="">
  </form>

JavaScript

    <script>

      var fName = document.getElementById("firstName").value;
      var lName = document.getElementById("lastName").value;

      var movieList = document.getElementById("movie");
      var selectedMovie = movieList.options[movieList.selectedIndex].text;



//    function myFunction() {
//       if(this.className != "selected" && this.className != "reserved") {
//                   this.className = "selected";
//                   //alert ("Da vy zdes !");
//             } else if (this.className == "selected" && this.className != "reserved") {
//                   this.className = "selected";
//                   var r = confirm("You have booked time. If you change your mind click 'cancel'!");

//                   if (r == true) {
//                         alert("Thank you");
//                         this.className = "selected";
//                   } else {
//                         this.className = "reserved";
//                         alert("You canceled your reservation!");
//                   }


//             } else if (this.className == "reserved") {
//                   alert("This time is taken!");
//             }

//       }

      /*
      function myFunction() {
      if(document.getElementById("demo").style.background != "blue" && document.getElementsById("demo").style.background != "red") {
                  document.getElementById("demo").style.background = "blue";
            } else if (document.getElementById("demo").style.background = "blue" && document.getElementById(
                        "demo").style.background != "red") {
                  var r = confirm("You have booked time. If you change your mind click 'cancel'!");
                  if (r == true) {
                        alert("Thank you")
                  } else {
                        document.getElementById("demo").style.background = "white";
                        alert("You canceled your reservation!")
                  }


            } else if (document.getElementsByClassName("demo").style.background = "red") {
                  alert("This time is taken!");
            }

      }
      */
</script>

Answer 1

对于onclick事件，您需要在“”中包含一个函数。例如：

<input type="submit" onclick="myFunction()">
<script>
function myFunction() {
var fName = document.getElementById("firstName").value;
var lName = document.getElementById("lastName").value;
alert(fName + lName); //this will alert the first name and the last name.
}
</script>

您可以与其他人做类似的事情。

如何输出表单值以警告JavaScript

1 个答案: