xxxxxxxxxx
document.addEventListener('DOMContentLoaded', function () {
const myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function (e) {
e.preventDefault(); // Prevent the default form submission
// Create a new FormData object and populate it with form data
const formData = new FormData(myForm);
// Send a POST request to the server with the form data
fetch('https://api.example.com/submit-form', {
method: 'POST',
body: formData,
})
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then((data) => {
console.log('Form submission response:', data);
// Optionally, you can reset the form after successful submission
myForm.reset();
})
.catch((error) => {
console.error('Form submission error:', error);
});
});
});
xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Form Example</title>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<input type="submit" value="Submit">
</form>
<script src="script.js"></script>
</body>
</html>