Auto Saving Form

<!DOCTYPE html>
<title>My Example</title>

/* -- Status Indicator Styling -- */
#save-status {
    font-size: 0.9rem;
    font-weight: 500;
    color: #6c757d;
    transition: all 0.3s ease;
}
#save-status.saving {
    color: #007bff;
}
#save-status.saved {
    color: #28a745;
}

/* -- Standard Form Styles -- */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 5px; }
.form-group input, .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
}
.form-group textarea { height: 120px; resize: vertical; }
</style>

<div class="autosave-form-container">
    <form id="autoSaveForm" action="/save-document" method="post">
        <div class="autosave-form-header">
            <h2>Document Editor</h2>
            
            <span id="save-status"></span>
        </div>
        
        <div class="form-group">
            <label for="doc-title">Document Title</label>
            <input type="text" id="doc-title" name="title" class="autosave-field" value="My Project Proposal">
        </div>
        
        <div class="form-group">
            <label for="doc-content">Content</label>
            <textarea id="doc-content" name="content" class="autosave-field">This is the content of the document. As you type, the form will automatically save changes.</textarea>
        </div>

</form>
</div>

// This function simulates saving the data to a server.
// In a real application, this would be an AJAX/Fetch call.
const saveFormData = () => {
    // 1. Indicate that we are saving.
    saveStatus.textContent = 'Saving...';
    saveStatus.className = 'saving';

console.log('Simulating save...');
    // In a real app, you would gather form data here:
    // const formData = new FormData(autoSaveForm);

// 2. Simulate the network delay.
    setTimeout(() => {
        // 3. Update the UI to show the data has been saved.
        saveStatus.textContent = 'All changes saved';
        saveStatus.className = 'saved';
        console.log('Save successful!');
    }, 1500); // 1.5 second delay
};

// Listen for input on all fields that should trigger an auto-save
formFields.forEach(field => {
    field.addEventListener('input', () => {
        // When the user types, show the "Unsaved changes" or similar text immediately
        saveStatus.textContent = 'Unsaved changes...';
        saveStatus.className = '';
    
        // Clear the previous timeout to "debounce" the save function
        clearTimeout(saveTimeout);
        
        // Set a new timeout to trigger the save after a delay of inactivity
        saveTimeout = setTimeout(saveFormData, 2000); // Wait 2 seconds after user stops typing
    });
});
</script>