CODEWITHSUNDEEP
javascript
Prova12
Prova12

Reputation: 653

Select the value of a form - JavaScript

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

In my form I have two inputs:

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>

Upvotes: 1

Views: 112

Answers (3)

Willem van der Veen
Willem van der Veen

Reputation: 36660

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.

Upvotes: 1

Muhammad Usman
Muhammad Usman

Reputation: 10148

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>

Upvotes: 0

Matheus Pitz
Matheus Pitz

Reputation: 476

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>

Upvotes: 3

Related Questions