Can someone help me?
I’ve already tried a lot of solutions here. But my page keeps refreshing infinitely when I open the HTML on the live server.
The HTML form code is:
<form class="newItem" onsubmit="return false">
<input type="text" id="newInput" placeholder="Nome">
<input type="text" id="newPreg" placeholder="Pregancies">
<input type="text" id="newPlas" placeholder="Glucose">
<input type="text" id="newPres" placeholder="Blood Pressure">
<input type="text" id="newSkin" placeholder="Skin Thickness">
<input type="text" id="newTest" placeholder="Insulin">
<input type="text" id="newMass" placeholder="BMI">
<input type="text" id="newPedi" placeholder="Diabetes Pedigree Function">
<input type="text" id="newAge" placeholder="Age">
<button type="button" onclick="newItem(event)" class="addBtn">Diagnosticar</button>
</form>
And the Script.js is:
const getList = async () => {
let url = 'http://127.0.0.1:5000/pacientes';
fetch(url, {
method: 'get',
})
.then((response) => response.json())
.then((data) => {
data.pacientes.forEach(item => insertList(item.name,
item.preg,
item.plas,
item.pres,
item.skin,
item.test,
item.mass,
item.pedi,
item.age,
item.outcome
))
})
.catch((error) => {
console.error('Error:', error);
});
}
getList()
const postItem = async (inputPatient, inputPreg, inputPlas,
inputPres, inputSkin, inputTest,
inputMass, inputPedi, inputAge) => {
const formData = new FormData();
formData.append('name', inputPatient);
formData.append('preg', inputPreg);
formData.append('plas', inputPlas);
formData.append('pres', inputPres);
formData.append('skin', inputSkin);
formData.append('test', inputTest);
formData.append('mass', inputMass);
formData.append('pedi', inputPedi);
formData.append('age', inputAge);
let url = 'http://127.0.0.1:5000/paciente';
fetch(url, {
method: 'post',
body: formData
})
.then((response) => response.json())
.catch((error) => {
console.error('Error:', error);
});
}
const insertDeleteButton = (parent) => {
...
}
const removeElement = () => {
...
}
const deleteItem = (item) => {
...
}
const newItem = async (event) => {
event.preventDefault();
let inputPatient = document.getElementById("newInput").value;
let inputPreg = document.getElementById("newPreg").value;
let inputPlas = document.getElementById("newPlas").value;
let inputPres = document.getElementById("newPres").value;
let inputSkin = document.getElementById("newSkin").value;
let inputTest = document.getElementById("newTest").value;
let inputMass = document.getElementById("newMass").value;
let inputPedi = document.getElementById("newPedi").value;
let inputAge = document.getElementById("newAge").value;
const checkUrl = `http://127.0.0.1:5000/pacientes?nome=${inputPatient}`;
fetch(checkUrl, {
method: 'get'
})
.then((response) => response.json())
.then((data) => {
if (data.pacientes && data.pacientes.some(item => item.name === inputPatient)) {
alert("O paciente já está cadastrado.nCadastre o paciente com um nome diferente ou atualize o existente.");
} else if (inputPatient === '') {
alert("O nome do paciente não pode ser vazio!");
} else if (isNaN(inputPreg) || isNaN(inputPlas) || isNaN(inputPres) || isNaN(inputSkin) || isNaN(inputTest) || isNaN(inputMass) || isNaN(inputPedi) || isNaN(inputAge)) {
alert("Esse(s) campo(s) precisam ser números!");
} else {
insertList(inputPatient, inputPreg, inputPlas, inputPres, inputSkin, inputTest, inputMass, inputPedi, inputAge);
postItem(inputPatient, inputPreg, inputPlas, inputPres, inputSkin, inputTest, inputMass, inputPedi, inputAge);
alert("Item adicionado!");
}
})
.catch((error) => {
console.error('Error:', error);
});
event.preventDefault();
return false;
}
const insertList = (namePatient, preg, plas,pres, skin, test, mass, pedi, age, outcome) => {
var item = [namePatient, preg, plas,pres, skin, test, mass, pedi, age, outcome];
var table = document.getElementById('myTable');
var row = table.insertRow();
for (var i = 0; i < item.length; i++) {
var cell = row.insertCell(i);
cell.textContent = item[i];
}
var deleteCell = row.insertCell(-1);
insertDeleteButton(deleteCell);
document.getElementById("newInput").value = "";
document.getElementById("newPreg").value = "";
document.getElementById("newPlas").value = "";
document.getElementById("newPres").value = "";
document.getElementById("newSkin").value = "";
document.getElementById("newTest").value = "";
document.getElementById("newMass").value = "";
document.getElementById("newPedi").value = "";
document.getElementById("newAge").value = "";
removeElement();
}
The API is working perfectly on Swagger. The loop only occurs when I open the index.html. Sometimes the loop stops, but after submitting a form it returns the loop.