When the page loads i am trying to fetch data from the JSON server which should then appear in the UI, however the data doesn t show.I am using materialize css as a css framework.
This is a link to my Github repo:
Please type in npm run dev in the terminal to start the app.
Here we go again.I want to be able to post data to json server when i click submit button on the form and that data should then appear in the UI.What am i doing wrong?
The problem is that the e variable is not declared inside addContact, hence an error is thrown and the request is aborted . Add the e variable to the function and it should work.
Thank you for your response.I added the event variable, however i am getting an empty object both in the console and the UI.I tried adding headers with content-type:application/json, but it still doesn t work.
Whenever you reply to someone, please click on the reply button below the message you’re replying to or use @username on the comment, that way the user gets notified.
The data wasn t adding to the json server or the UI because i didn t add .value when selecting input fields.It s working now.
const name = document.querySelector("#name").value;
const email = document.querySelector("#email").value;
const phone = document.querySelector("#phone").value;
const type = document.querySelector('input[name="type"]').value;
I was just wondering, as you can see i have two radio buttons as a part of my form, one with the value of personal which is always checked and the other with the value of profesional which is not.If i check profesional button and then submit a form how do i return it to it s checked value which is personal by default?My current solution isn t working.
In regards to the formatting of the code, please use three back ticks when formatting multi-line code and single when the code is a single line, thanks .
Editing issue
When i click on the edit button bellow any particular contact i want to be able to fill the form on the left with that contacts name, email, phone and type so that i can be able to update it with put request .Currently i am only able to transfer contact s name.I am unable to find an error.Also as a side note is there a shorter way of fetching that data because as you can see from the code in app.js i have to go through multiple sibling elements.
app.js
//Edit contact
const editContact = e => {
if (e.target.parentElement.classList.contains("edit")) {
const id = e.target.parentElement.dataset.id;
const name =
e.target.parentElement.parentElement.previousElementSibling
.previousElementSibling.previousElementSibling.textContent;
const type =
e.target.parentElement.parentElement.previousElementSibling
.previousElementSibling.previousElementSibling.children[0].textContent;
const email =
e.target.parentElement.parentElement.previousElementSibling
.previousElementSibling.textContent;
const phone =
e.target.parentElement.parentElement.previousElementSibling.textContent;
const data = {
id: id,
name: name,
email: email,
phone: phone,
type: type
};
ui.fillForm(data);
}
e.preventDefault();
};
document.querySelector("#contact-list").addEventListener("click", editContact);