Code Page for User to Search And Return Value
Hi,
I have the following Code page. Basically I want the user to enter in text and search. Then the result finds their input and matches with field id 256 and return field id 29. I will replace anything with a "XXXX". When the user searches they get "Target field not found in response." instead of the value. For knowledge the user should enter in "mickey.mouse" and 256 holds that value :
When i simply put this in the URL I do get a response:https://XXXXX-XXXXX.quickbase.com/db/XXXXXX?a=API_DoQuery&query={%27256%27.EX.%27mickey.mouse%27}&clist=29
Thank you so much for helping me!
<!DOCTYPE html>
<html>
<head>
<title>Quickbase Data Retriever</title>
</head>
<body>
<label for="inputField">Enter Record ID or Search Term:</label><br>
<input type="text" id="inputField"><br><br>
<button id="retrieveButton">Retrieve Data</button>
<div id="result"></div>
<script>
document.getElementById('retrieveButton').addEventListener('click', function() {
const inputValue = document.getElementById('inputField').value;
const appDbId = 'XXXXXXXX'; // Replace with your Quickbase App DBID
const tableDbId = 'XXXXXXX'; // Replace with your Quickbase Table DBID
const targetFieldId = '29'; // Replace with the FID of the field to retrieve
const queryFieldId = '256'; // Replace with the FID of the field to query against (e.g., Record ID#)
const userToken = 'XXXXXXXXX'; // Replace with your Quickbase User Token or use API_Authenticate for a ticket
// Construct the API_DoQuery URL
const apiUrl = `https://XXXXXX-XXXXXXX.quickbase.com/db/${tableDbId}?a=API_DoQuery&query={'${queryFieldId}'.EX.'${inputValue}'}&clist=${targetFieldId}&usertoken=${userToken}`;
fetch(apiUrl)
.then(response => response.text()) // Quickbase API returns XML
.then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
.then(data => {
const errcode = data.querySelector('errcode').textContent;
if (errcode === '0') {
const fieldNode = data.querySelector(`f[id="${targetFieldId}"]`);
if (fieldNode) {
const fieldValue = fieldNode.textContent;
document.getElementById('result').textContent = `Retrieved Value: ${fieldValue}`;
} else {
document.getElementById('result').textContent = 'Target field not found in response.';
}
} else {
const errtext = data.querySelector('errtext').textContent;
document.getElementById('result').textContent = `Error: ${errtext}`;
}
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result').textContent = 'An error occurred during the API call.';
});
});
</script>
</body>
</html>
In this case, you want to use DOMParser in Javascript. It will parse XML. Try this and see if it works:
<!DOCTYPE html> <html> <head> <title>Quickbase Data Retriever</title> </head> <body> <label for="inputField">Enter Record ID or Search Term:</label><br> <input type="text" id="inputField"><br><br> <button id="retrieveButton">Retrieve Data</button> <div id="result" style="white-space: pre-wrap; border:1px solid #ccc; padding:10px; margin-top:10px;"></div> <script> document.getElementById('retrieveButton').addEventListener('click', function() { const inputValue = document.getElementById('inputField').value; const appDbId = 'XXXXXXXX'; // Replace with your Quickbase App DBID const tableDbId = 'XXXXXXX'; // Replace with your Quickbase Table DBID const targetFieldId = '29'; // Replace with the FID of the field you want returned const queryFieldId = '256'; // Replace with the FID of the field to query against const userToken = 'XXXXXXXXX'; // Replace with your Quickbase User Token // Build the API_DoQuery URL const apiUrl = `https://XXXXXX-XXXXXXX.quickbase.com/db/${tableDbId}?a=API_DoQuery&query={'${queryFieldId}'.EX.'${inputValue}'}&clist=${targetFieldId}&usertoken=${userToken}`; fetch(apiUrl) .then(response => response.text()) // Quickbase returns XML .then(xmlStr => { // Parse the XML string into a DOM object const parser = new DOMParser(); const xmlDoc = parser.parseFromString(xmlStr, "application/xml"); // Extract the value inside <status> const statusNode = xmlDoc.querySelector("status"); if (statusNode) { document.getElementById('result').textContent = statusNode.textContent; } else { document.getElementById('result').textContent = "No <status> field found in response."; } }) .catch(error => { console.error('Error:', error); document.getElementById('result').textContent = 'An error occurred during the API call.'; }); }); </script> </body> </html>
