Linking a HTML form with JS

1

Hi, I’m new and I feel like I’m missing a key piece of info that I can’t find explained anywhere.
I understand how to make a HTML form that accepts data and how to make a JS script that processes data, but I don’t know how to communicate the user input to JS. Using getElementById is not working. It looks like when creating a form, I’m supposed to send the data to a url (like in the cat website lesson: form action=“url-where-you-want-to-submit-form-data”). How do I create that url? How can I access the data from it with my JS?

What am I missing? Is there a chapter here that explains it?

2

I believe you are missing the knowledge of server side web application development.
How far have you studied in the fCC curriculum?

3

I have completed:
from (New) Responsive Web Design - all HTML chapters
from JavaScript Algorithms and Data Structures - everything up to Functional Programming (Basic JavaScript, ES6, Regular Expressions, Debugging, Basic Data Structures, Basic Algorithm Scripting, Object Oriented Programming)

4

So all of that study is just the client-side development or (front-end).

You would need to study farther to the blackened development part to actually do something useful with the data you collect (like store it in a database or use it to make interesting outputs)

5

Thanks! In that case, could you please tell me how I could practice coding at my current level? I would really like to be able to make a simple “website” where I could, for example, have an input space for numbers, type in the numbers, press Submit, and have their sum displayed on the screen. Just for practice.

6

You can do that in the client side without having a server process anything.

Instead of submitting the data somewhere you would just listen to button clicks and act inside the browser using the skills you have (you may want to keep studying more about front end development though to answer your question in full)

7

Sorry for not understanding, but what do you mean by this? Do you mean relying only on console.log to show the results?

8

Yeah so no that isn’t what I meant…

I meant that you can listen to a button click and then modify the innerHTML of a field to display your sum value.

9

Sorry, but I still don’t understand what you mean by “listen to a button click”.
Also, a big part of my problem is that I don’t know how to modify the HTML to display the sum, because I can’t figure out how to communicate the user input to the script.

10

Have you considered studying more to learn more about this?
If yes, please continue your studying by moving forward in the curriculum.

If not, you can simply do a google search and find many examples of code that does this simple task of listening and modifying an element.

11

I will definitely keep studying, I know I’ve got plenty to learn, I just want to be able to practice what I’ve already learned by writing my own codes. I really think there’s no better way to really understand how something works (making arrays, adding properties to objects, etc) than to do it yourself and see which parts do what.
Unfortunately I can’t seem to find the answers on google, or maybe I just can’t understand the explanations in tutorials. Do you maybe know which chapters in this course explain what I’m missing?

12

Yes you need to move forward to the front end development curriculum

13

I see, thanks! Do you mean the sections about the DOM? I’ve seen DOM mentioned before in the tutorials, though to be honest I still don’t know what it is.

14

Yes that is one of the things you will need to know.

15

Thanks, hopefully I can get there quickly to be able to practice. In the meantime, if anyone here has any resources that could help me with this, I’d greatly appreciate them.

16

Sorry if I’m being annoying, but just for my own sanity, would you mind telling me what I should do if I want it to work? I thought this was a matter of “you should add xxxxxxxxx in your HTML code and xxxxxxxx in your JS code”…

17

Show me code and I can discuss further.

18

Oh, sorry, I don’t have any code for this right now :grin: it was just a hypothetical scenario. Aren’t there fixed phrases to add to HTML and JS codes to link them together, regardless of the function of the code?

19

Nope there aren’t any “fixed phrases”.

I understand your impatience to make something work but that impatience will lead to frustration when you get really hung up because you haven’t learned the basics.

If you want help googling for this let me know what you tried that didn’t work. Knowing how to use a search engine is also an important skill.

20

The thing with learning to program is ultimately solving problems by using tools to build code that then “solve the problem”.

There is a distinction that isn’t immediately clear between solutions, and the tools used to make solutions, and the sort of problems you are aiming to solve.

It’s one thing if your problem is a typo in your class attribute so your CSS class doesn’t work, but from an end user perspective the problem is “your page is ugly”. It just so happens the “tool” being mis-used is css.

So for your “problem” of an HTML form to “process data”, the “tools” you have available are HTML and JavaScript (CSS isn’t important for this, but could be used to make things look nicer).

Within each of HTML and JavaScript you could use more “tools” which would be syntax of HTML to create a form, add validation, etc. And JavaScript to manage the DOM (the name of the “JS” representation of the HTML on the page) to dynamically do what you want.

The “solution” you build will be made up of HTML working with your JavaScript code to solve the “problem” of “processing data” on the page.

Hence this entire process isn’t so much trying to find a tool that by and large solves the problem, it’s building something using the tools you have to “solve” the problem. This is programming at its core, where the language is the “tool”, but you have to use it correctly to build stuff to solve problems.

A big difficulty is knowing what you’re searching for. To help with that you need to understand the problem(s) you’re actually solving for and the general tools you’d use to solve for it. From there you can then search for more specific help/information on using those tools correctly.

Part of this is understanding the problem space, and general context to what your doing overall, along with having context into what you don’t know.

This is where generally randomly learning/reading about random stuff can help expand your knowledge horizon. The goal being to get some context, and learn more about stuff you don’t know so you can get an idea of what you can learn more of.

As you know it’s a lot, but you don’t want/need to be an expert just be aware.

A good resource to just go through randomly would be MDN:

Your right the best way to learn something is to use it, however you can’t learn everything you don’t know about without other methods. Otherwise you could easily become an “expert” in only part of a solution and miss-out on the bigger picture. So do read up on more broad strokes as well as focus on learning the smaller ones.

Good luck, keep learning keep growing :+1: