JavaScript DOM Tutorial #11 - Interacting with Forms

Hey gang, in this JavaScript DOM tutorial I'll explain how we can query the DOM for forms and how we can grab the value of input fields within them. We'll also look at the submit event.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
Other tutorials:

----- JAVASCRIPT FOR BEGINNERS:

----- CSS FOR BEGINNERS:

----- NODE.JS TUTORIALS

============== The Net Ninja =====================

================== Social Links ==================

[christiancolewan]

I am now officially a fan
I admire your work. It really helps me a lot
I have basic knowledge in JavaScript but I had no idea how to use it in webpages.
Now I'm officially an expert in deleting and adding lists in a form!!
I have a long way to go but thank you for helping begin this journey.

[TheirSavior]

that prevent default section was particularly helpful. thanks!

[barpupco]

just a little notice, the value at the end of the line in the video 4:41 - line 16, is need to be called value.
const nameValue =
const nameEmail =
console.log(nameValue);
console.log(nameEmail);

so its little bit confusing, when you write the variable and the value the same name, other then this, your all manual is amazing.
thank you, hope I helped some one.

[chriswilson]

You can also use document.forms['form-name']; on a form that uses the 'name' attribute i.e. <form name="my-form">. Just an alternative to using id's.

[TheGuroguro]

thank you very much, i think this prevent default is useful for ajax to.

[marisakirisame]

I also love Murakami lmao, beautiful coincidence

[RealSoundNow]

I assume you want to set a target to the 'add' button for the form event listener?

[guitar]

Hello, I noticed that you are a fan of Haruki Murakami, seems like an interesting author, thanks for the great videos!

[superyoyo]

Excuse me, why here, we selected the whole form instead of selecting the button 'add' then attach it to the input ?

[shameekagarwal]

what i dont understand is that
how we just made a button
without declaring it as type submit
still it behaves like a submit button

[proobld]

but how to clear the input field after the book has been submitted

[kalamashaka]

Hi Net Ninja what would happen if i was to write a function that handles delete( flag hide) and edit and restore. soo that whenever a button is created anywhere in my application i can just apply the functionality by calling the relative function ? is this possible in javascript. if it is i would wanna learn how to do that Sir. Thank you in advance

[joshuatanase]

At 2:40, why did you not have to include the # symbol before 'add-book' like '#add-book'?

[tom-czjx]

I am trying to replicate 4:50 where he logs the value of the add book text box.

Everything is exactly the same, except i named my variable bookTitle instead of value. and I just get undefined in my console.
i changed it to value, and it worked...

can anyone explain why the variable here must be value?

[RenM]

What if you gave the HTML input tag a 'name' attribute equal to 'title' and instead called e.target.title.value. You would still get the input text right? This is my code:

const addBookForm = document.forms['add-book']
const bookList = ul')
addBookForm.addEventListener('submit', (e) => {
e.preventDefault()
let text = e.target.title.value
let newLi = createAndAppend('li', bookList, null, null, undefined)
let fSpan = createAndAppend('span', newLi, 'name', null, (e) => e.textContent = text)
let sSpan = createAndAppend('span', newLi, 'delete', null, (e) => e.textContent = 'delete')
e.target.title.value = ""
})
//helper function to create elements
function createAndAppend(tagElem, parent, className, id, cb) {
let element =
parent.append(element)
if (className !== null) {
element.className = className
}
if (id !== null) {
element.id = id
}
if (cb !== undefined) {
cb(element)
}
return element
}
//html
<form id="add-book">
<input type="text" name= "title" placeholder="Add a book..." />
<button>Add</button
</form>

[MSMRequiem]

What happens to you when you say *selector* ? 😂😂😂
Anyways great tutorials man! Love it!

[MULTICODE]

please your repo is empty for javascript dom.. no related files on the html and css of the form
you used in this series

[abdulrahimmuhammad]

I get an error on the console..Says document.forms is not a function
I need help with this guys