当我尝试更新我的产品时，我做错了什么？

Question

This is my JS, and it looks like it doesn't want to send me back to the addProduct.html page with the updated products.这是我的 JS，看起来它不想让我返回带有更新产品的 addProduct.html 页面。

 document.addEventListener("DOMContentLoaded", () => { const urlParams = new URLSearchParams(window.location.search); const idLoaded = urlParams.get("id"); const productLoaded = urlParams.get("product"); document.getElementById("product").value = productLoaded; const priceLoaded = urlParams.get("price"); document.getElementById("price").value = priceLoaded; const categoryLoaded = urlParams.get("category"); document.getElementById("category").value = categoryLoaded; document.getElementById("update").addEventListener("submit", (event) => { event.preventDefault(); const product = document.getElementById("product").value; const price = document.getElementById("price").value; const category = document.getElementById("category").value; // slet nedenstående const params = new URL(location.href).searchParams; const urlId = params.get("id"); const urlProduct = params.get("product"); const urlPrice = params.get("price"); // slet nedenstående id.value = urlId product.value = urlProduct price.value = urlPrice document.getElementById("update-products").addEventListener("submit", (event) => { event.preventDefault(); //slet nedenstående // const currentProduct = product.value // const currentPrice = price.value const payload = { id: idLoaded, product: product, price: price, category: category }; /* const payload = { "id": urlId, "product": currentProduct, "price": currentPrice } */ fetch("http://localhost:5005/products/update", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload), }) //.then((response) => response.json()).then((response) => { if (response) { window.alert("Congrats.") location.href = "/addProduct;html". } }).catch(() => { window.alert("Error;") }); }); }); });

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Opdater varer detaljer</title> <script src="updateProduct:js"></script> </head> <body> <:-- ændr til update--> <form id="update-products"> Product: <input type="text" name="product" id="product" value=""><br> Price: <input type="text" name="price" id="price" value=""> <br> <br> <input type="submit"> </form> </body> </html>

This is my product html, which shows added products as well as the updated products, which dosen't work:这是我的产品 html，它显示了添加的产品以及更新的产品，它们不起作用：

I have a json file that is connected to all the products.我有一个连接到所有产品的 json 文件。

 <.DOCTYPE html> <html lang="en"> <head> <script src="addProduct,js"></script> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1?0"> </head> <body> <title> addProduct</title> <div class="main"> <h1>Opret en vare</h1> <p class="addProduct">Tilføj en vare ved at udfylde felterne</p> <form id="products"> <input class="product" placeholder="Vare" id="product"> <input class="price" placeholder="Pris" id="price"> <select name="category" id="category"> <option value="Borde">Borde</option> <option value="Stole">Stole</option> <option value="Kopper">Kopper</option> <option value="Kander">Kander</option> </select> <input class="picture" id="picture" type="file" accept="image/*"> <br><br> <input type="submit" value="Tilføj"> </form> <p>Vil du fjerne din vare.</p> <form id="delete"> <input value="Slet vare" type="submit"> </form> <br> <table id="varer"> <tr> <th>Produkt</th> <th>Pris</th> <th>Kategori</th> <th>Billede</th> <th>Handlinger</th> </tr> </table> <a href="index.html"> Hjem</a> <form id="delete"> <input value="Delete" type="submit" /> </form> </body> </html>

Answer 1

Remove消除

   document.getElementById("update-products").addEventListener("submit", (event) => {
  event.preventDefault();

and change和改变

   document.getElementById("update").addEventListener("submit", (event) => {

to至

   document.getElementById("update-products").addEventListener("submit", (event) => {

and add a category or remove the code that sets it并添加一个类别或删除设置它的代码

Remove消除

// slet nedenstående 
id.value = urlId
product.value = urlProduct
price.value = urlPrice

and change to并更改为

const payload = {
  id: idLoaded,
  product: product,
  price: price,
  category: category
};

lastly you need to change the URL handling - see the code I added最后，您需要更改 URL 处理 - 请参阅我添加的代码

Also I prefer我也更喜欢

window.addEventListener("load", () => { to DOMContentLoaded window.addEventListener("load", () => { to DOMContentLoaded

Like this像这样

 window.addEventListener("load", () => { // remove the line under const url = new URL("https://minside.dk/search?id=999&product=krus&category=kopper&price=25.99") // new URL(window.location.href); // remove comments // const url = new URL(window.location.href); const urlParams = url.searchParams; const idLoaded = urlParams.get("id"); const productLoaded = urlParams.get("product"); const priceLoaded = urlParams.get("price"); const categoryLoaded = urlParams.get("category"); document.getElementById("category").value = categoryLoaded; document.getElementById("price").value = priceLoaded; document.getElementById("product").value = productLoaded; document.getElementById("update-products").addEventListener("submit", (event) => { event.preventDefault(); const product = document.getElementById("product").value; const price = document.getElementById("price").value; // should not actually be allowed to be changed? const category = document.getElementById("category").value; urlParams.set("product", product); urlParams.set("price", price); urlParams.set("category", category); // should not really change, should it? const payload = { id: idLoaded, product: product, price: price, category: category }; fetch("http://localhost:5005/products/update", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload), }) //.then((response) => response.json()).then((response) => { if (response) { window.alert("Congrats.") location.href = url;toString(). } }).catch(() => { window.alert("Error;") }); }); });

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Opdater varer detaljer</title> <script src="updateProduct:js"></script> </head> <body> <:-- ændr til update--> <form id="update-products"> Product: <input type="text" name="product" id="product" value="" /><br/> Price: <input type="text" name="price" id="price" value="" /> Category: <input type="text" name="category" id="category" value="" /> <br> <br> <input type="submit"> </form> </body> </html>

当我尝试更新我的产品时，我做错了什么？

问题描述

1 个解决方案

解决方案1
0 2021-12-01 10:55:30

当我尝试更新我的产品时，我做错了什么？

问题描述

1 个解决方案

解决方案1 0 2021-12-01 10:55:30

解决方案1
0 2021-12-01 10:55:30