Have you ever have some problems with data transferring between HTML form and JavaScript? I had, and I had learn something new. You probably know, that one of the most popular interaction between visitors and webpage based on HTML form. The Customer put some data to HTML form and then we use this data in JavaScript or we send in to server. What exactly I needed to do in my task, and what new things about that I learned, you can find bellow.
Grab data from HTML form and used it in JavaScript
I did this several times. For example, when I built a Web App that gets the recipe from outside API and serves it on the Web Page depend on Visitor choose Forkify or when I built Web Page wich striped exponential to multiply shape and to adding shape STRIP EXPOTENTIAL. But this time I look closer at some tricky parts of this task.
I started with an HTML form build, which is very simple. All I need to do was put two numbers input area, and a button to start the JavaScript code. Then, I wrote a simple JS code with count final result, depending on values put to the HTML form. Pretty easy stuff to do, what could go wrong? For example, your page will reload, depend on that, where you placed a button in the HTML structure.
HTML button placing that reload your page, or not.
When you build an HTML form probably you put a button in
marks. This is something normal when you want to send data to the server, or to another Web Page. But this is something, that was made my first real problem in a task that I did.
All interactions should be taken on a static page. No server communication, no transfer between pages. Just one page, one HTML form, one JavaScript to handle all processes. Here’s the thing that you probably wouldn’t find on any web tutorial. When you won’t reload your page, you should place a button that triggers JavaScript action out of the HTML form construct.
Sure thing, that teachers do this when they build a static page with JavaScript and HTML form, but I don’t hear even once why they do this. And the reason is very simple: the web page reloads after the customer hits the button placed in HTML form, in fact, javascript code gets no data from HTML form.
Of course, you can deal with this using localStorage or GET mechanism, but when you want to make all jobs on one static page, you need to put the button out of the HMTL form construct.
JavaScript that handle with data from HTML form
Now you have an HTML form and button that wouldn’t reload the web page, so JavaScript code can easily collect data from the HTML form and made some calculations. But here I also find some problems with data collecting and use it in JavaScript code.
The first thing is how to pass data from HTML form to a JavaScript function. I thought that the easiest way to do this is to point on elements in HTML form using the JavaScript function getElementById and use destructuring possibilities pointing to the value of a grabbed element. Assign the pointed value to the variable and pass the variable to function. This way won’t work.
I’m not sure why that simple way to grab and pass variables to function won’t worked. Perhaps this isn’t a good way because of Scope behavior. I didn’t find an answer to this question, but I found the solution.
You need to point to the button that triggers JavaScript code, and then bind it with JavaScript function addEventListener. The first parameter of this function point that the click on the button will run JavaScript code and the second parameter is extra important because this parameter passes all values from HTML form to JavaScript code. When you are able to manage data from HTML form, you can do the rest of the task.
Only one small surprising thing et the end. I set in HTML form input type=”number” and I expect, that data from this area will be passed to JavaScript as number type variable. But this wasn’t true. Again, I don’t know why, but JavaScript sees this data as text. Of course, that is no problem, because you can use the parseFloat function, but I was surprised.
Why we all sometimes stuck on simple tasks?
This task showed me, that no matter how long you codding, how good you know some programming language, for all of us there will be a task, that takes you a lot of time, much more than you expect. After all, you set with coffee and asked yourself: why it took me so long. I made much more complicated code in a shorter time ?
