Can I Get Confirmation or Clarification of Concept?

1

I’m working on coding for data entry forms. I have some questions that might be based in not understanding how data is processed by and moves between the frontend and backend.

If this is not an appropriate question for this forum, please tell me. I will wait to hear before posting further.

2

that is a programming topic, this is a programming forum, it is not off topic

1 Like
3

OK, I’ll ask my questions but only one issue at a time as my questions seem to depend on what answers I get.

Because client side and server side functions most often occur on different computers, computers that are connected via some type of network, for data entered on a form to get to the backend for processing and database update, there must be some means to send the data collected. I don’t understand how that is done.

I understand that the form element has an action attribute that defines what is to be done with data that is entered when a submit button is pressed. From what I’ve read, it is not HTML that causes this but - in most cases - javascript that triggers the process. But, what, exactly, happens? I’m not referring to how is sent over the network, but to how frontend code works to pass data to backend code.

It seems logical to me that all data entered on the form would be sent to the backend at once (after it passes all frontend data editing and validation), not data element by data element. Is this the case? If so, what code is needed in the frontend that creates the string of data? It’s my understanding that JSON is a method for sending dataname/value pairs and that it can handle an array of multiple pairs. Is JSON used, or some other method?

4

JSON is not a method, it is a data format (maybe you are familiar with XML? now JSON is the common one)
JSON is a common format used to exchange data between applications

the action attribute determines what API endpoint receives the data
you can consider that a fetch call happens in the background that send the data

you may want to research on APIs if you have never heard of that

1 Like
5

Thank you for the response.

I forgot when composing the post above that method has a special meaning. I should have used the word ‘technique’ or ‘tool’. The vocabulary is not second nature to me yet.

I understand what APIs are, that they may be private, public, etc. They are simply the rules by which different applications communicate intelligibly.

What I’m trying to understand is how data to be sent - from a form, for example, is actually organized and sent. Suppose I have defined a form using HTML/CSS with various input areas defined. Suppose further that I have written code that will do frontend data validation and that my user has complied with all the constraints that code requires . . . IOW, the data is ready to send to a backend that has code that will a) further process/validate the data sent; b) update a database (using SQL, in my case); and respond to my user that the update succeeded or that the data must be changed. In that case, what code, if any, is needed on the frontend to prepare the data to be sent? What code, if any, is required to actually cause the data to be transmitted to the backend API?

I understand that a form element defines an action and a method (and perhaps an id). As I understand it, the action attribute defines the action to be performed when the form is submitted. In examples I’ve seen the value is often a file name preceded by a path or URL, indicating to me that the data from the form will be sent to the named resource as a file.

Suppose I coded a form like this:

   <form id="example" action="*somefile.js*" method="post">
      <label for="firstName"></label>
         First Name: 
        <input type="text" id="firstName" name="firstName" >
      <label for="lastName">Last Name:</label>
        Last Name:
      <input type="text" id=lastName" name="lastName">
    </form>

Suppose a user, having correctly entered the names, would click a SUBMIT button (not defined above, nor is any frontend data validation code). What would happen?

The <form action=somefile.js . . . does what, exactly?

The <form . . . . method="post"> will indicate to the backend to use the date (first and last names) to update a database, among other things perhaps.

In the example above, there is no javascript or other script. Is any needed to send the names to the backend? If not, why not?

It’s my understanding that HTML simply turns on an ‘event’ switch to indicate the button has been clicked but that it does not take ant other action. Do I misunderstand this?

From all I’ve read, javascript (or some other code) would have to ‘listen’ for (test the clicked-event switch) the clicked event and do some processing. Presumably, after testing that the values entered for the names were text, something would have to be coded to cause the file - somefile.js - in my example to be created with appropriate information for the API to process it AND some code would have to cause the client computer to send the file. How is this done? . . . a javascript function or other statement? Would a JSON element/value pair array be created, for example?

6

you will need

  • the method and action attributes on the form element (note that action will require an url/API endpoint, not a filename)
  • proper name on all inputs, proper value for checkboxes, radios and dropdowns inside the form
  • and a button/input with type="submit" inside the form

done that, when the button is clicked, the data in the form is packaged (in a JSON object) and sent to the API endpoint defined in action.

are you familiar with fetch? the form kind of make its own fetch call to send the data

The rest is backend.

In the backend you will need to define what that endpoint does with the received data. here is where you would put the code to update the database and do other stuff.

alternatively you can highjack the behaviour of the form, make it not send the data, and instead do stuff with the data in the frontend

1 Like
7

I believe the forms in these tutorials use php, but I’m not a php person.
The name attributes here are for the backend to use. For example, in Python Flask, form data that is sent back is in the form of a dictionary, and can be accessed like so:

formData = request.form # Whole dict
fullName = request.form["full-name"] # Returns the value of the input with name 'full-name'
# Or
fullName = request.form.get("full-name")

As mentioned in the comments, this gets the input with the name attribute of of “full-name”.

I suppose, in Javascript, you could get the button element, and when it’s clicked, get the value of the button and do stuff from there.

let formSubmit = document.getElementById("form-submit");
formSubmit.addEventListener("click", function() {
  let fullName = document.getElementById("full-name").value; // Gets the input value
});
1 Like
8

Thank you very much for that explanation. It clears up some things for me and confirms others. I’ll try to take all of it on board but be assured I will probably be back with more questions.

9

Thanks for the javascript.

10

which tutorials? if you mean freecodecamp, no php here

11

I thought that ‘fetch’ was used by frontend code to retrieve data from the backend, not send data to the backend. Re-reading your information, are you saying that using ‘form’ is similar to the opposite of a ‘fetch’? If so, I think I understand your point in that the ‘post’ method is what causes the data to be “packaged” in a JSON object and sent to the URL or pathname in the ‘action’ attribute. Am I close to understanding it?

First, addressing the ‘action’ attribute requiring a URL/API endpoint, do you mean that a URL and an API are the same thing? If not, can you give an example of using an API endpoint as the ‘action’ attribute and cite an example when an API would be used instead of a URL?

Next, I’ll pose an example as the means to ask a question about using URLs.

Suppose I have a simple form (the same as posted above in this thread but with a URL in the ‘action’ attribute):

    <form id="example" action="https://mydomain.com/form" method="post">
      <label for="Name"></label>
      Name: &nbsp;&nbsp;&nbsp;
        <input type="text" id="Name" name="Name" placeholder="First" required size="8" maxlength="20">
    </form>

Given that the intent of the form is to send data entered to the backend for processing, presumably to update a database, what would backend code have to include? By inference, the backend would not be running a browser; therefore it would have to have code to ‘listen for’ that particular URL (I put a qualifier at the end to make it specific to the form) and upon receiving and recognizing it, then proceed to process the data. Is that the case? If not, how would the backend know what it’s receiving?

I can see that a URL is needed because my user is likely to be on a different computer using a browser to fill out my form while the database and backend code will be on my webhost’s computers under a URL that I control with no browser application at the host. The only case I can see that an API endpoint might be used would be if the frontend and backend were on the same computer sharing a file system. Is that close?

12

fetch can do both get and post requests, so no, sending a form is not the opposite of fetch, it’s like fetch

no, I can’t, an API endpoint is an URL. An API endpoint is an URL that is made to receive an API request

code that is made to listen to that specific endpoint. It depends on what backend technology you are using. Node.js would do it in a way, Flask in a different way.

even if backend and frontend are on the same computer or server, an endpoint needs to defined, otherwise you are sending data into the void

1 Like
13

MDN has a pretty good rundown of using forms.

1 Like
14

Excellent response. Thank you, ILM.

15

Hmm… I had an idea that the dummy forms go to sime php file, but isn’t part tutorial.