<!DOCTYPE html>
<html>
<head>
<title>Frontend to Backend Example</title>
</head>
<body>
<h1>Frontend to Backend Example</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" required><br><br>
<button onclick="submitForm()">Submit</button>
</form>
<script>
function submitForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
// Send data to the backend
fetch("/process", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ name: name, email: email })
})
.then(response => response.json())
.then(data => {
// Handle the response from the backend
console.log(data);
})
.catch(error => {
console.error("Error:", error);
});
}
</script>
</body>
</html>