我创建了一个表格，您可以在其中输入食物食谱。我想将食物食谱的标题保存在右侧的列表中，以便您可以按一个标题并获取您保存的整个食谱。有人知道如何进行吗？
<!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;
}
JS
$(document).ready(function(){
$("button").mouseenter(function(){
$(this).fadeTo("fast", 0.4);})
$("button").mouseleave(function(){
$(this).fadeTo("fast", 1);})
$(".slideDown").slideDown("slow");
})
最佳答案
要在食物上添加食谱，您需要创建一个页面(html/JSP 页面)，您可以从中输入您创建的数据。 现在点击按钮“Spara recept”，响应应该进入 Controller ，从那里它将存储在数据库中。再次刷新此页面时，您需要根据需要检索存储的数据。
如果您不想将其存储到数据库中，那么您可以将其存储在系统中的任何位置(例如 excel 工作表、.csv 文件等)。 就像你可以做的那样。
关于jquery - 将表单中的输入保存到列表中。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40862133/