Question 213575 in Html Question posted in
Some basic documentation can be found here.

Html – Javascript Form Submission – Undefined

I am trying to recreate a javascript dictionary API project I’ve seen on youtube. (https://www.youtube.com/watch?v=PUkgK7TI0x0&list=PLNCevxogE3fiLT6bEObGeVfHVLnttptKv&index=2)

I tried to use a submit eventListener while one from youtube, he/she used a click event on the button. I already tried that in my previous to-do list project which I solved with the help of this community (thanks to you all). When I press enter or click the button, I always get undefined. I want to fully understand what went wrong to improve my coding skills. Any answers I get are definitely a huge help! Thank you! 🙂

const inputEl = document.querySelector('form');
// const buttonEl = document.querySelector('.search-button')
const url = 'https://api.dictionaryapi.dev/api/v2/entries/en/';


inputEl.addEventListener('submit', (e) => {
    e.preventDefault();
    const input = inputEl.value;

    console.log(input)

    fetch(`${url}${input}`)
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
    })

});
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-weight: normal;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins';
    background-color: #A1CCD1;
}

.container {
    padding: 35px;
    background-color: antiquewhite;
    height: 600px;
    width: 500px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

form {
    padding-bottom: 30px;
}

input {
    padding: 20px;
    font-size: 20px;
    color: #302f2fbd;
    border: none;
    width: 75%;
}

input:focus {
    outline: none;
    color: #302f2fbd;
}

.search-button {
    font-size: 20px;
    padding: 19.1px;
    border: none;
    cursor: pointer;
    background-color: antiquewhite;
}

.search-button:focus {
    background-color: #ffff;
    transition: 0.3s;
}

.result {
    display: flex;
    justify-content: space-between;
    margin: 25px;
}

.result h1 {
    font-size: 40px;
    font-weight: bold;
}

.result button {
    font-size: 40px;
    border: none;
    background-color: antiquewhite;
    cursor: pointer;
}

.answers {
    margin: 30px;
}

.answers h1 {
    font-size: 15px;
    font-weight: bold;
    margin: 30px 0;

}

.answers .other-meaning {
    font-size: 17px;
}
<div class="container">
    <form>
        <input type="text" name="input" class="text" placeholder="Type Text Here">
        <button class="search-button">Search</button>
    </form>

    <div class="result">

    <h1>Text</h1>
    <button class="button-sound">
        <i class="fa-solid fa-volume-high"></i>
    </button>
   
    </div>

    <div class="answers">
        <p class="type-of">noun</p>

        <h1 class="meaning">Sample text</h1>
    
        <h1 class="other-meaning">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, voluptatum quae! Iure, sunt provident nihil ducimus minima ab quaerat eaque 
            maiores ad culpa. Totam dolorem quam quod magni, dicta veniam!
        </h1>

    </div>
Tags:

2

Answers


  1. 0

    You’re correct that you need to watch the form element for the submit event, but the form doesn’t have a value. You have to access the input element to get the specific value, since a form can have many inputs.

    const formEl = document.querySelector('form');
const inputEl = document.querySelector('input');
const url = 'https://api.dictionaryapi.dev/api/v2/entries/en/';


formEl.addEventListener('submit', (e) => {
    e.preventDefault();
    const input = inputEl.value;

    console.log(input)

    fetch(`${url}${input}`)
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
    })

});
    Login or Signup to reply.
  2. 0

    When you have a form like this it is always a good idea to use names for all input elements and the form as well. When you have the event listener for the form, the event (e) holds information about the form (e.target) and now it is easy to get the value if any input element without defining any global variables etc.

    For fun I included more markup in the form. So at any place you can insert the <output> element (with a name) and it is easy to give that output a value (but I don’t think that it scales in your case, because the fetched result can have many items/meanings etc.).

    const url = 'https://api.dictionaryapi.dev/api/v2/entries/en/';

document.forms.search.addEventListener('submit', e => {
  e.preventDefault();
  let form = e.target;

  console.log(form.searchtext.value);

  fetch(`${url}${form.searchtext.value}`)
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
      let firstresult = data[0];
      form.word.value = firstresult.word;
    })
});
    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-weight: normal;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins';
  background-color: #A1CCD1;
}

.container {
  padding: 35px;
  background-color: antiquewhite;
  height: 600px;
  width: 500px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

form {
  padding-bottom: 30px;
}

input {
  padding: 20px;
  font-size: 20px;
  color: #302f2fbd;
  border: none;
  width: 75%;
}

input:focus {
  outline: none;
  color: #302f2fbd;
}

.search-button {
  font-size: 20px;
  padding: 19.1px;
  border: none;
  cursor: pointer;
  background-color: antiquewhite;
}

.search-button:focus {
  background-color: #ffff;
  transition: 0.3s;
}

.result {
  display: flex;
  justify-content: space-between;
  margin: 25px;
}

.result h1 {
  font-size: 40px;
  font-weight: bold;
}

.result button {
  font-size: 40px;
  border: none;
  background-color: antiquewhite;
  cursor: pointer;
}

.answers {
  margin: 30px;
}

.answers h1 {
  font-size: 15px;
  font-weight: bold;
  margin: 30px 0;
}

.answers .other-meaning {
  font-size: 17px;
}
    <div class="container">
  <form name="search">
    <input type="text" name="searchtext" class="text" placeholder="Type Text Here">
    <button type="submit" class="search-button">Search</button>

    <div class="result">

      <h1><output name="word"></output></h1>
      <button class="button-sound"><i class="fa-solid fa-volume-high"></i></button>
    </div>

    <div class="answers">
      <p class="type-of">noun</p>

      <h1 class="meaning">Sample text</h1>

      <h1 class="other-meaning">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, voluptatum quae! Iure, sunt provident nihil ducimus minima ab quaerat eaque maiores ad culpa. Totam dolorem quam quod magni, dicta veniam!
      </h1>
    </div>
  </form>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search