How To Display The Html Form Output On The Same Page Using Javascript

In this tutorial, we will learn how to display the HTML form output on the same page using JavaScript. This technique can be useful so that users can see their inputs and any errors on the same page instead of being redirected to a different page.

Steps:

Step 1: Create an HTML Form

To begin, create an HTML form in your WordPress site. Make sure to give each input field a unique id so that we can easily access them later with JavaScript. For example:

Step 2: Add a Div Element for Output

Next, add a div element to your HTML page where you want the form output to be displayed. Give it a unique id, such as “outputDiv”. For example:

Step 3: Create a JavaScript Function to Handle Form Submission

Now, create a JavaScript function to handle the form submission. This function will prevent the default form submission behavior and instead display the form output on the same page. For example:

In this example, we first prevent the default form submission behavior using event.preventDefault(). Then, we get the values of the name and email input fields using document.getElementById(). Finally, we display the output in the outputDiv using the innerHTML property.

Step 4: Test the Form

Save your changes and test the form. Enter some text in the input fields and click the Submit button. The form output should be displayed in the outputDiv on the same page.

Conclusion

By using JavaScript, we can display the HTML form output on the same page for a better user experience. This technique can be useful for forms that require validation or for forms where users need to see their inputs and any errors on the same page.

Output:

Name: John Doe
Email: [email protected]