input fields validity check

This commit is contained in:
Sam Hadow 2024-02-17 00:18:24 +01:00
parent a2eea73a04
commit f1b698fb46
2 changed files with 31 additions and 25 deletions

View File

@ -22,7 +22,7 @@
<p></p>
<div class="btn-toolbar btn-group-sm" role="toolbar" aria-label="Toolbar">
<div class="btn-group mr-2 w-50" role="group" aria-label="Add group">
<input id="additemid" type="text" class="form-control input-sm w-15 w-50" placeholder="item id" pattern="[0-9]*">
<input id="additemid" type="text" class="form-control input-sm w-15 w-50" placeholder="item id" pattern="[0-9]+" required>
<input id="addattributes" type="text" class="form-control input-sm w-15" placeholder="attributes (comma separated)" pattern="[0-9a-zA-Z, ]*">
<button id="addbutton" class="btn btn-secondary" type="button">add</button>
</div>

View File

@ -53,35 +53,41 @@ render_graphs_wrapper();
document.getElementById("addbutton").addEventListener("click", addItem);
async function addItem() {
const apiUrl = `${currentUrl}app/add`;
const postData = {
itemid: document.getElementById("additemid").value,
attributes: document.getElementById("addattributes").value
};
const inputFieldId = document.getElementById("additemid");
const inputFieldAttributes = document.getElementById("addattributes");
if (inputFieldId.checkValidity() && inputFieldAttributes.checkValidity()) {
const apiUrl = `${currentUrl}app/add`;
const postData = {
itemid: inputFieldId.value,
attributes: inputFieldAttributes.value
};
// clear input fields
document.getElementById("additemid").value='';
document.getElementById("addattributes").value='';
// clear input fields
inputFieldId.value='';
inputFieldAttributes.value='';
const requestOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(postData)
};
const requestOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(postData)
};
const response = await fetch(apiUrl, requestOptions)
.catch(error => {
console.error('Error during POST request:', error);
});
const response = await fetch(apiUrl, requestOptions)
.catch(error => {
console.error('Error during POST request:', error);
});
if (response.ok) {
console.log(response);
// refresh graphs to display new item
refresh_graphs();
if (response.ok) {
console.log(response);
// refresh graphs to display new item
refresh_graphs();
} else {
throw new Error('Error in server response');
}
} else {
throw new Error('Error in server response');
console.log('invalid content in input fields')
}
}