how can i make my javascript to read the form value?

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>")   
}


} }

where/when is the JS code executing in relation to the form? how is the JS being triggered? — Marc B
– Marc B, Commented Jun 18, 2014 at 15:19
You should end your lines with ;. Where is defined person? — kosmos
– kosmos, Commented Jun 18, 2014 at 15:19

Niro · Accepted Answer · 2014-06-18 15:20:47Z

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>");   
  }


} }

answered Jun 18, 2014 at 15:20

Niro

7768 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shay k Over a year ago

i just added all the script. ty :)

Collectives™ on Stack Overflow

how can i make my javascript to read the form value?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related