Select the value of a form - JavaScript

Question

I am new to JavaScript and I am trying to understand HOW the code works.

In my form I have two inputs:

First Name: which has to be filled by the user
Countries: which has to be selected by the user (but the countries are already there)

Once the user click the "Add this destination" button, it should appear his name plus the destination he has chosen. I understand why the "destination" appears. HOWEVER I do not understand HOW the first name can be passed if the form is empty. Even if I write something in "first name", its value is not passed into the result string I want to display.

My questions are two:

1) Why is not my code working?

2) MORE IMPORTANTLY: how the browser (?) understands that there has been a change in the filed of "first name" from empty to be filled with a name/string?

var x;
var destination = document.myTravelForm.destination.value;
var firstName = document.myTravelForm.firstname.value;


x = document.getElementById("banana").addEventListener("click", function() {
      document.getElementById("travelerInfo").innerHTML = firstName + " you chose: " + destination

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <h1> Welcone to the booking site </h1>
  <h4> Please, choose a destination </h4>
  <form name="myTravelForm">
    <label> First name: </label><br>
    <input type="text" name="firstname" id="firstname" /><br>
    <br>
    <select name="destination">
      <option value="Antarctica" selected>Antarctica</option>
      <option value="Costa Rica">Costa Rica</option>
    </select>
    <input type="button" value="Add this destination" id="banana" />
  </form>
  <div id="travelerInfo"></div>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

Matheus Pitz · Accepted Answer · 2018-06-27 11:11:03Z

You need to get the form values when you are clicking on the button, if you get them before click, you will get their initial values. Try something like this:

var x;

x = document.getElementById("banana").addEventListener("click", function() {
	var destination = document.myTravelForm.destination.value;
	var firstName = document.myTravelForm.firstname.value;
        document.getElementById("travelerInfo").innerHTML = firstName + " you chose: " + destination;
});

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <h1> Welcone to the booking site </h1>
  <h4> Please, choose a destination </h4>
  <form name="myTravelForm">
    <label> First name: </label><br>
    <input type="text" name="firstname" id="firstname" /><br>
    <br>
    <select name="destination">
      <option value="Antarctica" selected>Antarctica</option>
      <option value="Costa Rica">Costa Rica</option>
    </select>
    <input type="button" value="Add this destination" id="banana" />
  </form>
  <div id="travelerInfo"></div>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

Willem van der Veen · Accepted Answer · 2018-06-27 11:24:56Z

Matheus Pitz answered your first question fine, the variables are initialzed at the beginning of the script where they are undefined.

As for your second question how does the browser understand that there has been a change. The browser has several build in technologies that work together to allow this.

First your HTML documents are parsed by a browser and it will show a Javascript model of it which consists of various nodes. This is called the DOM (document object model).

The browser has all sorts of built in JS functions to manipulate the DOM and thus manipulate the view. For example:

document.getElementById("travelerInfo").innerHTML = 'test';

getElementById() Is an example of such a method which allows you to access a DOM node and perform various operations on it.

Hopefully this was helpful and I would strongly suggest you to read MDN article about the DOM. This will increase your understanding and make you a better developer.

Muhammad Usman · Accepted Answer · 2018-06-27 11:11:23Z

For first part:

Because you're getting the value before it's event entered

Put that code inside your click callback.

2nd part

I don't really understand what do you mean by "How does browser...". You just get the value out of input

var destination = document.myTravelForm.destination;
var firstName = document.myTravelForm.firstname
document.getElementById("banana").addEventListener("click", function() {
 
    document.getElementById("travelerInfo").innerHTML = firstName.value + " you chose: " +  destination.value
});

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <h1> Welcone to the  booking site </h1>
        <h4> Please, choose a destination </h4> 
        <form name="myTravelForm">
            <label> First name: </label><br>
            <input type="text" name="firstname" id="firstname"/><br>
            <br>
            <select name="destination">
                <option value="Antarctica" selected>Antarctica</option>
                <option value="Costa Rica">Costa Rica</option>
            </select>
            <input type="button" value="Add this destination" id="banana"/>
        </form>
        <div id="travelerInfo"></div>
            <script type="text/javascript" src="script.js"></script>
    </body>

</html>

Collectives™ on Stack Overflow

Select the value of a form - JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related