- Katılım
- 29 Ocak 2024
- Mesajlar
- 267
- Excel Vers. ve Dili
- Office 2016
Kıymetli Hocalarım merhaba
Ekli linkte yer alan google-sheet tablosunda HTML ile form oluşturmak için;
https://docs.google.com/spreadsheets/d/1uEGxRQOng_3QBJYnLLTzppELsgCL0caeuYV336kRp4c/edit?gid=0#gid=0
Yapay zekadan aşağıdaki kodu oluşturdum, form açılıyor, forma verileri girip "Submit" butonuna tıklayınca;
There was an error submitting the form. Please try again.
hata mesajını veriyor, Nerede hata yapıyorum, olayı bir türlü çözemedim. yardımcı olursanız çok sevinirim.
iyi Çalışmalar dilerim
Ekli linkte yer alan google-sheet tablosunda HTML ile form oluşturmak için;
https://docs.google.com/spreadsheets/d/1uEGxRQOng_3QBJYnLLTzppELsgCL0caeuYV336kRp4c/edit?gid=0#gid=0
Yapay zekadan aşağıdaki kodu oluşturdum, form açılıyor, forma verileri girip "Submit" butonuna tıklayınca;
There was an error submitting the form. Please try again.
hata mesajını veriyor, Nerede hata yapıyorum, olayı bir türlü çözemedim. yardımcı olursanız çok sevinirim.
iyi Çalışmalar dilerim
Kod:
function showDataEntryForm() {
var html = HtmlService.createHtmlOutputFromFile('Form')
.setWidth(500)
.setHeight(720);
SpreadsheetApp.getUi().showModalDialog(html, 'Student Data Entry Form');
}
function doPost(e) {
try {
// Parse the JSON data from the request
const data = JSON.parse(e.postData.contents);
// Replace with your Google Sheet ID
//const sheetId = 'YOUR_GOOGLE_SHEET_ID_HERE';
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
//const sheet = SpreadsheetApp.openById(sheetId).getActiveSheet();
// Append the data to the sheet
sheet.appendRow([data.id, data.name, data.gender, data.subject]);
// Return a success response
return ContentService
.createTextOutput(JSON.stringify({result: 'success'}))
.setMimeType(ContentService.MimeType.JSON);
} catch (error) {
// Return an error response
return ContentService
.createTextOutput(JSON.stringify({result: 'error', error: error.toString()}))
.setMimeType(ContentService.MimeType.JSON);
}
}
Kod:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Data Entry Form</title>
<style>
* {
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f7fa;
margin: 0;
padding: 20px;
color: #333;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
padding: 30px;
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 30px;
border-bottom: 2px solid #3498db;
padding-bottom: 15px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #2c3e50;
}
input, select {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
transition: border 0.3s;
}
input:focus, select:focus {
border-color: #3498db;
outline: none;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}
.btn {
background-color: #3498db;
color: white;
border: none;
padding: 12px 25px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
display: block;
width: 100%;
margin-top: 20px;
}
.btn:hover {
background-color: #2980b9;
}
.success-message {
background-color: #d4edda;
color: #155724;
padding: 12px;
border-radius: 5px;
margin-bottom: 20px;
display: none;
}
.error-message {
background-color: #f8d7da;
color: #721c24;
padding: 12px;
border-radius: 5px;
margin-bottom: 20px;
display: none;
}
.form-row {
display: flex;
gap: 20px;
}
.form-row .form-group {
flex: 1;
}
@media (max-width: 600px) {
.form-row {
flex-direction: column;
gap: 0;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Student Data Entry Form</h1>
<div class="success-message" id="successMessage">
Data submitted successfully!
</div>
<div class="error-message" id="errorMessage">
There was an error submitting the form. Please try again.
</div>
<form id="studentForm">
<div class="form-group">
<label for="id">Student ID</label>
<input type="text" id="id" name="id" required>
</div>
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-row">
<div class="form-group">
<label for="gender">Gender</label>
<select id="gender" name="gender" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" required>
</div>
</div>
<button type="submit" class="btn">Submit Data</button>
</form>
</div>
<script>
document.getElementById('studentForm').addEventListener('submit', function(e) {
e.preventDefault();
// Get form data
const formData = new FormData(this);
const data = {
id: formData.get('id'),
name: formData.get('name'),
gender: formData.get('gender'),
subject: formData.get('subject')
};
// Replace with your Google Apps Script Web App URL
const scriptURL = 'https://docs.google.com/spreadsheets/d/1uEGxRQOng_3QBJYnLLTzppELsgCL0caeuYV336kRp4c';
// Show loading state
const submitBtn = document.querySelector('.btn');
const originalText = submitBtn.textContent;
submitBtn.textContent = 'Submitting...';
submitBtn.disabled = true;
// Send data to Google Apps Script
fetch(scriptURL, {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
if (response.ok) {
document.getElementById('successMessage').style.display = 'block';
document.getElementById('errorMessage').style.display = 'none';
document.getElementById('studentForm').reset();
} else {
throw new Error('Network response was not ok');
}
})
.catch(error => {
console.error('Error:', error);
document.getElementById('errorMessage').style.display = 'block';
document.getElementById('successMessage').style.display = 'none';
})
.finally(() => {
// Reset button state
submitBtn.textContent = originalText;
submitBtn.disabled = false;
// Hide messages after 5 seconds
setTimeout(() => {
document.getElementById('successMessage').style.display = 'none';
document.getElementById('errorMessage').style.display = 'none';
}, 5000);
});
});
</script>
</body>
</html>
