Share
Explore

Creating an Interactive Web Form

Background
⁠
⁠
⁠
Objective: Learn to create an interactive web page with a form that populates its fields from JSON data pulled via AJAX from a Node.js server. After user input, the data is persisted back to the server.
⁠

Part 1: Setting Up the Backend (Node.js)

Step 1: Initialize a new Node.js project.
bashCopy code
npm init -y

Step 2: Install necessary packages.
bashCopy code
npm install express body-parser

Step 3: Create a server.js file:

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

// Middlewares
app.use(bodyParser.json());

// Initial data
let formData = {
name: "",
email: "",
};

// Routes
app.get('/getFormData', (req, res) => {
res.json(formData);
});

app.post('/updateFormData', (req, res) => {
formData = req.body;
res.json({ status: 'success' });
});

// Start server
app.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});

⁠

Part 2: Creating the Frontend (HTML, CSS, and JavaScript)

Step 1: Create an index.html file:

<!DOCTYPE html>
<html>
<head>
<title>Interactive Form Lab</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
font-family: 'Arial', sans-serif;
text-align: center;
margin-top: 50px;
background-color: #f5f5f5;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
input[type="text"], input[type="email"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>

<form>
<h2>Form Data</h2>
<input type="text" id="name" placeholder="Name">
<input type="email" id="email" placeholder="Email">
<button id="submit">Submit</button>
</form>

<script>
$(document).ready(function(){
// Fetch form data and populate the fields
$.get('/getFormData', function(data) {
$('#name').val(data.name);
$('#email').val(data.email);
});

// Submit form data to server
$('#submit').click(function(event){
event.preventDefault();
let formData = {
name: $('#name').val(),
email: $('#email').val()
};

$.post('/updateFormData', formData, function(response) {
if(response.status === 'success') {
alert('Data saved successfully!');
} else {
alert('There was an error saving the data.');
}
});
});
});
</script>

</body>
</html>

⁠

Instructions:

Set up the backend by running the Node.js server:
node server.js
Open index.html in your browser. You should see a form with fields for "Name" and "Email".
Enter some data into the form and click "Submit". ​This will send the data back to the server.
If you refresh the page, the form fields will be populated with the data you just submitted, as it's now being fetched from the server.
⁠
This lab provides a basic introduction to creating an interactive form that communicates with a server.
Future enhancements can include better error handling, using databases, CSS, and more advanced UI/UX features.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.