<!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>