Form submission exercise

HTML-CSS
1

Hello. I went back and made my own code a long side Colt Steele form submission video and coded something simple. But it isn’t working because I think I’m not referencing or matching the names from the HTML files to the JS.

HTML file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Form Events Demo</h1>

    <form action="Retail" id="itemForm">
      <input type="text" name="username" placeholder="username" />
      <input type="text" name="comment" placeholder="comment" />
      <button>Submit order</button>
    </form>

    <h2>Commments:</h2>
    <ul id="comments"></ul>

    <script src="Forms.js"></script>
  </body>
</html>

And the JS files


const itemForm = document.querySelector('#itemForm')
const itemFormContainer = document.querySelector('#comments')
itemForm.addEventListener('submit', function (e) {
    e.preventDefault()

    // const userInput1 = document.querySelectorAll('input')[0]
    // const userInput2= document.querySelectorAll('input')[1]
    const usernameInput = itemForm.elements.username
    const commentsInput = itemForm.elements.comments
    addComment(usernameInput.value, comments.value)
    usernameInput.value = ""
    commentsInput.value = ""
    
   
})

const addComment = (username, comments) => {
    const nweComment = document.createElement('li')
    const boldComment = document.createElement('b')
    boldComment.append(username)
    newComment.append(boldComment)
    console.log(`: ${comments}`)
    itemFormContainer.append(newComment)
}

Let me know what you think. Thanks

Edit: Also, my hope in creating my own little form using HTML and JS is that I not only have an example to use on the Udemy course, but also a legit reference to return to and learn from.

3

in theory, provided the Forms.js is a real file in the same path as your html, the script tag should work.
I guess you’re running this locally? What is the symptom of the failure?

4

Open the console and look at the error.

Uncaught ReferenceError: newComment is not defined

You have a typo in the JS for the variable.

Edit:

Also, itemForm.elements.comments does not match the element attribute (plural vs singular) and addComment(usernameInput.value, comments.value); is using the wrong variable for the comments argument.

1 Like
5

I knew I was pluralizing something I didn’t need to or vice versa lol. Thank you.

6

I got the username to be added into the list but I still can’t get the comments to be added.

Screenshot 2022-08-31 21.20.49

I also changed the ul to an ol in the HTML.
Screenshot 2022-09-01 11.09.57

Here is the updated JS code that made that happen. But, still can’t get the comments to append and post.



const itemForm = document.querySelector('#itemForm')
const itemFormContainer = document.querySelector('#comments')
itemForm.addEventListener('submit', function (e) {
    e.preventDefault()

    // const userInput1 = document.querySelectorAll('input')[0]
    // const userInput2= document.querySelectorAll('input')[1]
    const usernameInput = itemForm.elements.username
    const commentsInput = itemForm.elements.comments
    addComment(usernameInput.value, comments.value)
    usernameInput.value = ""
    commentsInput.value = ""
    
   
})

const addComment = (username, comments) => {
    const newComment = document.createElement('li')
    const boldComment = document.createElement('b')
    boldComment.append(username)
    newComment.append(boldComment)
    console.log(`: ${comments}`)
    itemFormContainer.append(newComment)
}

And the HTML updated code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Form Events Demo</h1>

    <form action="Retail" id="itemForm">
      <input type="text" name="username" placeholder="username" />
      <input type="text" name="comments" placeholder="Commments" />
      <button>Submit order</button>
    </form>

    <h2>Commments:</h2>
    <ol id="comments"></ol>

    <script src="Forms.js"></script>
  </body>
</html>
7

You are still using the wrong value for the second argument to addComment. You get the element above it, now get the value from that element.

You are not adding the comment to the DOM inside addComment you are only logging it.

8

Fixed!!! Yes I was only posting it to the console, not the actual DOM/page.



const itemForm = document.querySelector('#itemForm')
const itemFormContainer = document.querySelector('#comments')
itemForm.addEventListener('submit', function (e) {
    e.preventDefault()

    // const userInput1 = document.querySelectorAll('input')[0]
    // const userInput2= document.querySelectorAll('input')[1]
    const username = itemForm.elements.username
    const comments = itemForm.elements.comments
    addComment(username.value, comments.value)
    username.value = ""
    comments.value = ""
    
   
})

const addComment = (username, comments) => {
    const newComment = document.createElement('li')
    const boldComment = document.createElement('b')
    boldComment.append(username)
    newComment.append(boldComment)
    newComment.append(`: ${comments}`)
    itemFormContainer.append(newComment)
}

That worked as I needed. Thanks.

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.