EoQ_Supporting_Files/get_qid_counts.html
2025-05-24 19:35:29 +01:00

68 lines
1.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>QID Value Counts</title>
<style>
body { font-family: Arial, sans-serif; margin: 2em; }
label, input, button { font-size: 1em; margin: 0.5em 0; }
ul { list-style-type: none; padding-left: 0; }
li { padding: 0.3em 0; }
.error { color: red; }
</style>
</head>
<body>
<h1>Query Value Counts by QID</h1>
<form id="qidForm">
<label for="qidInput">Enter QID:</label><br />
<input type="text" id="qidInput" name="qid" required />
<button type="submit">Get Counts</button>
</form>
<div id="results"></div>
<script>
document.getElementById('qidForm').addEventListener('submit', function(e) {
e.preventDefault();
const qid = document.getElementById('qidInput').value.trim();
const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = 'Loading...';
fetch('get_qid_counts.php', {
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: new URLSearchParams({qid})
})
.then(response => response.json())
.then(data => {
if (data.error) {
resultsDiv.innerHTML = `<p class="error">${data.error}</p>`;
return;
}
if (!Array.isArray(data) || data.length === 0) {
resultsDiv.innerHTML = '<p>No data found.</p>';
return;
}
let html = '<h2>Value Counts for ' + qid + '</h2><ul>';
data.forEach(item => {
html += `<li><strong>Value ${item.value}:</strong> ${item.count}</li>`;
});
html += '</ul>';
resultsDiv.innerHTML = html;
})
.catch(err => {
resultsDiv.innerHTML = `<p class="error">Error: ${err.message}</p>`;
});
});
</script>
</body>
</html>