堆棧內存溢出
  簡體   English   中英

當我嘗試更新我的產品時，我做錯了什么？

[英]What am I doing wrong, when I'm trying to update my products?

 原文  2021-12-01 10:43:28  0   1    javascript

問題描述

這是我的 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>

這是我的產品 html，它顯示了添加的產品以及更新的產品，它們不起作用：

我有一個連接到所有產品的 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>

1 個解決方案

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

消除

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

和改變

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

至

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

並添加一個類別或刪除設置它的代碼

消除

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

並更改為

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

最后，您需要更改 URL 處理 - 請參閱我添加的代碼

我也更喜歡

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

像這樣

 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 嘗試回叫功能時我做錯了 我在nodejs / mongodb上的更新功能在做什么？ 在滿足一定的分數長度后，我試圖阻止我的 function 顯示元素。 我究竟做錯了什么？ 當單擊按鈕時，我試圖將輸入的內容保存到本地存儲中。 我究竟做錯了什么？ 我究竟做錯了什么？ 我正在嘗試通過jQuery單擊來放大和縮小圖像 我試圖一鍵掛起 2 個功能，然后出現錯誤，我做錯了什么？ 我究竟做錯了什么？ 我正在嘗試克隆一些字段並使用一些函數 我的if語句在做什么？ 我的正則表達式有什么問題？ 我收到“不變違規”錯誤的渲染方法做錯了什么？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM