mercredi 18 novembre 2020

How to get the selected checkbox to display on alert

I have been really stuck on this. I tried looking everywhere and I couldn't find my answer. I am trying to make my checkbox and radio to display the box that is checked off, but it must show the selected answer when displayed on alert. Can someone please help me figure this out?

  function popUp(){

    var firstName= document.getElementById("name").value;
    var lastName = document.getElementById("last").value;
    var age = document.getElementById("age").value;
    var male = document.getElementById("male").checked;
    var female = document.getElementById("female").checked ;
    var female = document.getElementById("female").checked ;
    var location = document.getElementById("location").checked;
    var first = document.getElementById("first").checked;
    var second = document.getElementById("second").checked;
    var res = document.getElementById("res").checked;
    var a = document.getElementById("a").checked;
    var b = document.getElementById("b").checked;

    
  return alert("First name:" + firstName + "\n" + "Last name:" + lastName + "\n" + "Age:" + age + "\n" + "Gender:" + male + female +  "\n" + "Location:" + location + first + second + "\n" + "Dietary restrictions:" + res + a + b )
   
  }
<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="input.css">
    </head>

    <body>
      

<form id="new">
    <label>First name:</label>
    <input id="name" type="text">
    <br>
    <label>Last name:</label>
    <input id="last"  type="text">
    <br>
    <label>Age:</label>
    <input id="age"  type="text">
    <br>
    <label>Gender:</label>
    <input type="radio" id="male" name="Male" >
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" >
    <label for="female">Female</label>
    <br>
    <label>Location:</label>
    <input id="location" type="checkbox" >
    <label for="location">Miami</label>
    <input id="first" type="checkbox" >
    <label for="location">New York</label>
    <input id="second" type="checkbox">
    <label for="location">Houston</label>
<br>
<label>Dietary restrictions:</label>
<input id="res" type="checkbox">
    <label for="Dietary restrictions">Lactose free</label>
    <input id="a" type="checkbox" >
    <label for="Dietary restrictions">Kosher</label>
    <input id="b" type="checkbox">
    <label for="Dietary restrictions">Vegetarian</label>

<br>
    <button onclick= "popUp()" >OK</button>
</form>

<script src="input.js"></script>
    </body>
</html>



Aucun commentaire:

Enregistrer un commentaire