How to display a data after clicking submit button in JavaScript?

In this article, we'll explore two methods to display data after clicking a submit button using JavaScript.

Method 1: Using JavaScript's innerHTML property #

1. HTML Form Setup: Begin by creating an HTML form with input fields and a submit button. Assign unique IDs to the form and its elements to make them easily identifiable.

2. JavaScript: Write a JavaScript function that's triggered when the submit button is clicked. This function should fetch the input values from the form elements, process the data, and generate the content you want to display.

Explanation :

1. We create an HTML form with input fields and a submit button.
2. A JavaScript function displayData() retrieves the input values.
3. The function generates content using template literals.
4. The content is injected into the designated displayArea.

Method 2: Using Event Listeners #

1. HTML Form Setup: Set up the HTML form similar to the first method, with appropriate IDs for form elements and the display area.

2. JavaScript Event Listener: Instead of inline onclick events, attach a submit event listener to the form. This listener will execute a callback function when the form is submitted.

Explanation :

1. We use the addEventListener method to listen for the submit event on the form.
2. The callback function is executed when the form is submitted.
3. It prevents the default form submission behavior using event.preventDefault().
4. The input values are retrieved, and content is generated and displayed.

Conclusion:

In this article, you've learned two effective methods to display data after clicking the submit button in JavaScript.