我如何使我的JavaScript读取表单值？

Question

i'm trying to do a form that will allow the user to see the details that he put into the fields after he clicked the button. for some reason the javascript doesn't read the values of the text the user put into the form. any help?

<form>
first name:
<input type="text" autofocus autocomplete="on" placeholder="first name" required  id="first">
last name:
<input type="text" autocomplete="on" placeholder="last name" required  id="last">
year of birth:
<input type="number" pattern="^[0-9]{4}" id="year">
gender:
<select id="sel">
<option selected>MALE</option>
<option>FEMALE</option>
</select>
<button id="butt">click</button>

</form>

the javascript :

function cont(){
    function person()
{
    this.FirstName = null;
    this.LastName = null;
    this.YearOfBirth = null;
    this.Gender = null;
    this.Weight = null;
    this.Height = null;
    this.Country = null;
    this.FullName = function()
    {
    return this.FirstName + " " + this.LastName 
    };
    this.Age = function()
    {
        var today = new Date();
        var yy = today.getFullYear();
        return yy - this.YearOfBirth;
    };
    this.toString = function()
    {
    return "this rider lives in " + this.Country + " and his name is " + this.FirstName + " " + this.LastName;  
    };  
}

var rider = new person
rider.FirstName = document.getElementById('first').value
rider.LastName = document.getElementById('last').value
rider.YearOfBirth = document.getElementById('year').value
rider.Gender = document.getElementById('sel').value

document.getElementById('butt').onclick = function()
{

if (rider.FirstName != typeof ("hello") || rider.LastName != typeof("hi") || rider.YearOfBirth == isNaN)
{
    alert ("fill all the required fields")
}
else
{
document.write(rider.FirstName + "<br>")
document.write(rider.LastName + "<br>") 
document.write(rider.YearOfBirth + "<br>")
document.write(rider.Gender + "<br>")
document.write(rider.FullName() + "<br>")   
}


} }

Answer 1

You are setting the "rider." values when the page loads (and they are empty) but not getting them again when the user clicks the button. Thus, the document.write functions are just writing empty values. Try:

document.getElementById('butt').onclick = function()
{

  rider.FirstName = document.getElementById('first').value;
  rider.LastName = document.getElementById('last').value;
  rider.YearOfBirth = document.getElementById('year').value;
  rider.Gender = document.getElementById('sel').value;

  if (rider.FirstName != typeof ("hello") || rider.LastName != typeof("hi") || rider.YearOfBirth == isNaN)
  {
    alert ("fill all the required fields");
  }
  else
  {
    document.write(rider.FirstName + "<br>");
    document.write(rider.LastName + "<br>");
    document.write(rider.YearOfBirth + "<br>");
    document.write(rider.Gender + "<br>");
    document.write(rider.FullName() + "<br>");   
  }


} }