title: how to output form values to alert JavaScript
body: <p>Need your help! I hope you will help me..
  For example, I have a form that consists of: First Name, Last Name, Email, a drop-down list and 8 divs with lengths of time (when you click on any color changed). When you press the submission button, an alert displays the information of the values that the user entered.
  Sample message:
  "Name Surname" booked an audition for the film "Spider-Man" for "Leading Role." We are waiting for you in "17: 00-18: 00". Detailed information sent to your "email"
  I'm trying to do it in different ways, but nothing comes out</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>&lt;style&gt;
          .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;
          }            
  
    &lt;/style&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
  
    &lt;form action="" name="formName" onsubmit="complete(this)"&gt;
          &lt;label for="firstName"&gt;Firstname : &lt;/label&gt;
          &lt;input type="text" name="name" id="firstName" placeholder="Enter your firstname" required&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;label for="lastName"&gt;Lastname : &lt;/label&gt;
          &lt;input type="text" name="name" id="lastName" placeholder="Enter your lastname" required&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;label for="email"&gt;Email:&lt;/label&gt;
          &lt;input type="email" id="email"&gt;
  
          &lt;label for="movie"&gt;Movie&lt;/label&gt;
          &lt;select name="movie" id="movie"&gt;
                &lt;option value=""&gt;&lt;/option&gt;
                &lt;option value="Spider man"&gt;Spiderman&lt;/option&gt;
                &lt;option value="Iron man"&gt;Ironman&lt;/option&gt;
                &lt;option value="Super man"&gt;Superman&lt;/option&gt;
          &lt;/select&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;label for="movie_role"&gt;Role in the movie&lt;/label&gt;
          &lt;select name="role" id="movie_role"&gt;
                &lt;option value=""&gt;&lt;/option&gt;
                &lt;option value="main"&gt;the main role&lt;/option&gt;
                &lt;option value="stuntman"&gt;stuntman&lt;/option&gt;
                &lt;option value="extras"&gt;extras&lt;/option&gt;
                &lt;option value="supporting role"&gt;supporting role&lt;/option&gt;
          &lt;/select&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;div onclick="myFunction()" class="demo"&gt;
                &lt;p&gt;9:00 - 10:00&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div onclick="myFunction()" class="demo"&gt;
                &lt;p&gt;10:00 - 11:00&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div onclick="myFunction()" class="demo"&gt;
                &lt;p&gt;11:00 - 12:00&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div onclick="myFunction()" class="demo"&gt;
                &lt;p&gt;12:00 - 13:00&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div onclick="myFunction()" class="demo"&gt;
                &lt;p&gt;14:00 - 15:00&lt;/p&gt;
          &lt;/div&gt;
          &lt;div  onclick="myFunction()" class="demo"&gt;
                &lt;p&gt;15:00 - 16:00&lt;/p&gt;
          &lt;/div&gt;
          &lt;div  onclick="myFunction()" class="demo"&gt;
                &lt;p&gt;16:00 - 17:00&lt;/p&gt;
          &lt;/div&gt;
          &lt;div onclick="myFunction()" class="demo"&gt;
                &lt;p&gt;17:00 - 18:00&lt;/p&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;input type="submit" onclick=""&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>    &lt;script&gt;
  
        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" &amp;&amp; this.className != "reserved") {
  //                   this.className = "selected";
  //                   //alert ("Da vy zdes !");
  //             } else if (this.className == "selected" &amp;&amp; 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" &amp;&amp; document.getElementsById("demo").style.background != "red") {
                    document.getElementById("demo").style.background = "blue";
              } else if (document.getElementById("demo").style.background = "blue" &amp;&amp; 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!");
              }
  
        }
        */
  &lt;/script&gt;
  </code></pre>