Introduction
Creating a dynamic form where the results are displayed upon submission can be a great addition to websites or applications that require user input and feedback.
In this guide, I will show you how to create a show results on submit form using HTML CSS and jQuery.
✅ Watch Live Preview 👉👉
Click Here to Download the Code
Table of Contents
What We’ll Build
- Create a form using HTML.
- Style the form with CSS.
- Use jQuery to handle the form submission and show the results without refreshing the page.
Prerequisites
Before starting, you must have:
- Basic knowledge of HTML and CSS.
- Understanding of jQuery.
- A text editor to type code.
- A web browser for testing projects.
Also read: Build a Responsive Credit Card Form with HTML CSS and jQuery
What are the Steps to Begin?
First, create a folder on your computer and add the following files inside it:
- index.html
- style.css
- script.js
Source Code
HTML Code Structure
The first step is to create the structure of the form using HTML. This form will collect user input such as their name and email.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Show Results On Submit Form Using HTML CSS and jQuery </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap">
</head>
<body>
<!-- CODE -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS Code Structure
Next, let’s add some CSS to enhance the form’s visual appeal and improve its user interface.
< /* Your CSS code here */ >
< * { >
< margin: 0; >
< padding: 0 >
< box-sizing: border-box; >
< text-decoration: none; >
< } >
jQuery Code Structure
Now, let’s add jQuery to handle the form submission. We will use jQuery to:
- Capture the form data.
- Prevent the page from refreshing when the form is submitted.
- Show the result below the form after submission.
Here’s the jQuery script:
< // jQuery Code >
Test Your Code
Now, save all the files and open the HTML file in a web browser to test the form.
-
- When the user enters their details and submits the form, the page will display the submitted data on the right side without refreshing.
- The form will remain, and the results section will become visible, showing what was entered in the input fields.
Also read: How to Create Bootstrap 5 Login and Register Form
Conclusion
In this tutorial, we’ve learned how to create a dynamic form that shows results on submit. This is a great way to create interactive forms for your website or application.
You can also expand on this by adding form validation, additional styling, and more advanced interactions using jQuery.
33 people bought this
Grab it Now for Just 20
