Dynamic List weird behavior with form

Hi Guys!
I ran across a weird behavior and wonder if anyone can tell me what’s up with this code for generating a dynamic list. In addition to following the lesson’s video example I wrapped the text input and button with opening and closing form tags. It took a while to figure out the culprit (the form tags) for the strange behavior.

What happened was that the user could enter the name of a fruit, click the button, and the console showed the appendTo() method worked to add the new fruit name to the array. New fruit names were added to the array with each click and if you look at the html page as you’re clicking the added name briefly appears then the original 3 fruits are left on the page.

The first console.log(fruits) shows the correct number of array items and the second console.log(fruits) shows 3 items in array.

Removing the form tags from the following code works as expected.

<html>
<head>
  <title>This example of using form to add item to array comes from IvanOnTech JS course.</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body>
  <h1>My Favorite Fruit List</h1>
  <ol id="fruitList">
  </ol>
<form>
<input type="text" placeholder="Enter your fav fruit here." id="myFruit" />
<button id="addFruit">Add Fruit!</button>
</form>
  <script>

     // create variable to hold array of fruits
     var fruits = ["Apple", "Pear", "Cherry"];

     function getFruity() {
        // create variable that targets ordered list
        var list = $("#fruitList");
        //empty current ol on page
        list.html("");
        // do something with each member of the array
        $.each(fruits, function(index, value) {
          // create list item - add fruit name to text - and append to the ol
          $("<li/>").text(value).appendTo(list);
        });
      }

     //have to call function to put list onscreen initially
     getFruity();

     // on click to enter fruit and return new fruit value
     $("#addFruit").click(function() {
         var newFruit = $("#myFruit").val();
          //console.log(newFruit);

         // add the new fruit to the end of fruit array
         fruits.push(newFruit);
        // call function here to re-build list with new fruit
        getFruity();
        console.log(fruits);

      });
      console.log(fruits);
       </script>
</body>
</html>

Any comments?

1 Like

Hi @Bette,
In your below code, I see you have not specified the “type” attribute to your button. When creating buttons in a “form”, the buttons are assigned the “type” as “submit” as default. Which basically acts as a submit button and then refreshes your page.

Please mention the “type” explicitly like the code below.

  <button id="addFruit" type="button">Add Fruit!</button>

Hope this answers your question. Please feel free to reach out if any questions.

Happy Learning. :slight_smile:

Ah! Thank you @Malik - I also learned that text default type is text. Totally makes sense.
:slight_smile:

1 Like