將輸入從表單保存到列表中。

我已經創建了一個表單，您可以在食物上輸入食譜。我想將食譜的標題保存在右側的列表中，以便您可以按標題並獲取您保存的全部食譜。有人對如何繼續有個好主意？將輸入從表單保存到列表中。

<!DOCTYPE html> 
<html lang="sv"> 
    <head> 
    <title>Din digitala receptbok</title> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="main.css"> 
    </head> 
    <body> 
    <main> 
     <div class="slideDown"> 
     <header> 
      <h1>Din digitala receptbok</h1> 
     </header> 
     </div> 
     <div class="container"> 
     <form id="matInput"> 
     <div> 
     <label for="titel">Titel:</label> 
     <input type="text" name="titel" id="titel"> 
     </div> 
     <div> 
     <label for="portioner">Antal portioner:</label> 
     <input type="text" name="portioner" id="portioner"> 
     </div> 
     <div> 
     <label for="ingred">Fyll i ingredienserna här:</label> 
     <textarea name="ingred" rows="5" cols="40" id="ingred"></textarea> 
     </div> 
     <div> 
     <label for="metod">Tillagningsmetod:</label> 
     <textarea name="metod" rows="5" cols="40" id="metod"> </textarea> 
     </div> 
     <div id="theSubmit"> 
     <input id="spara" type="submit" value="Spara recept"> 
     </div> 
     </form> 
     </div> 
    </main> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="main.js"></script> 
    </body> 
</html>

CSS

* { 
    box-sizing: border-box; 
} 

html, 
body { 
    width: 100%; 
    height: calc(100%-20px); 
} 

body { 
    margin: 0; 
    padding: 0; 
    background-image: url(../bilder/Optimized-food-salad-restaurant-person.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    z-index: -1; 
} 

header { 
    background-color: #efe5e5; 
    width: 50vw; 
    min-width: 391px; 
    height: 84px; 
    border-radius: 64px; 
    margin: auto; 
} 

header h1 { 
    text-align: center; 
    margin: 0; 
    font-size: 40px; 
    line-height: 2; 
} 

nav { 
    display: flex; 
    flex-direction: row; 
} 

.nav { 
    height: 50px; 
    width: 100vw; 
    flex-grow: 1; 
} 

button { 
    border-radius: 10px; 
    margin-top: 5px; 
    margin-right: 4px; 
    background-color: black; 
    color: white; 
    font-size: 20px; 
    box-shadow: 6px 6px 10px #1b1b4c; 
    outline: none; 
} 

.slideDown { 
    display: none; 
    margin-top: 20px; 
} 

a { 
    color: white; 
    text-decoration: none; 
} 

label { 
    float: left; 
    width: 232px; 
    text-align: right; 
    padding-right: 12px; 
    margin-top: 12px; 
    clear: left; 
    color: white; 
    font-size: 1.4em; 
} 

input, textarea { 
    margin-top: 12px; 
} 

#theSubmit { 
    margin-left: 232px; 
} 

.container { 
    display: flex; 
}

$(document).ready(function(){ 
    $("button").mouseenter(function(){ 
    $(this).fadeTo("fast", 0.4);}) 
    $("button").mouseleave(function(){ 
    $(this).fadeTo("fast", 1);}) 
    $(".slideDown").slideDown("slow"); 
    })

來源

2016-11-29 Adam

你現在面臨什麼問題？ – ScanQR

用於添加的食品的食譜，您將需要從創建一個網頁（HTML/JSP頁面），您可以輸入數據你已經創建。現在點擊按鈕「Spara接收器」，響應應該發送到控制器，從那裏它將被存儲在數據庫中。再次刷新此頁面時，您需要根據需要檢索存儲的數據。

如果您不想將它存儲到數據庫中，那麼您可以將它存儲在系統中的任何位置（如Excel表格，.csv文件等）。就像你可以做的那樣。

來源

2016-11-29 09:47:50

好吧，我應該學習PHP並使用它？ – Adam

是的，如果你對php技術感興趣，那麼你應該學習。否則，如果你對java技術感興趣，那麼它會是更好的選擇。 @亞當 –

將輸入從表單保存到列表中。

回答

相關問題