DEV Community

B-awhite
B-awhite

Posted on

JavaScript and its Form

A submission form is a form used to collect a users files and data allowing a website or program to receive a file from a user. When building my JS project using a form was the way I was able to add things to my application.

The form submission event uses the .addEventListener and the submit event. Once the form is grabbed they are both added to it. The next thing to think about is the forms default action to refresh the page when the submission is handled, to remove that behavior so it won't be refreshed the .preventDefault method is then added to the event.

form.addEventListener("submit", addPlace)
Enter fullscreen mode Exit fullscreen mode

My next steps were. to create an element for the input values to be store in and assign it the desired attributes.

function addCreateForm() {
    const formContainer = document.getElementById("form-container");
    const form = document.createElement("form")
    form.innerHTML = `<input id="name-input"
Enter fullscreen mode Exit fullscreen mode

When that's completed that new element was then appended to the form container previously grabbed.

At the time then event listener was added a callback function was as well, this function holds the code for the POST request needed to add our new element/s to the page. This function sends a fetch request to the backend database after setting variables for the targeted element then sends that POST request form the user values inputed in the form.

The new world that is JavaScript has many steps as I've learned but through different event listeners like the submit event for forms, you get a pretty good idea of just how much can de done with all the events available to be used.

Top comments (0)