Сохраните ввод из формы в список.

Я создал форму, в которой вы можете ввести рецепты на еду. Я хочу сохранить названия рецептов продуктов в списке справа, чтобы вы могли нажать заголовок и получить весь рецепт, который вы сохранили. Кто-нибудь, у кого есть хорошая идея, как действовать?Сохраните ввод из формы в список.

<!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 recept», ответ должен перейти к контроллеру, откуда он будет храниться в базе данных. И снова, когда вы обновите эту страницу, вам нужно будет восстановить сохраненные данные по своему усмотрению.

Если вы не хотите хранить его в БД, вы можете сохранить его в любом месте в вашей системе (например, на листе Excel, CSV-файле и т. Д.). Как вы можете это сделать.

источник

2016-11-29 09:47:50

Хорошо, я должен изучать PHP и использовать его? – Adam

Да, если вас интересует технология php, тогда вы должны учиться. В противном случае, если вас интересует технология Java, это будет лучшим вариантом для этого. @Адам –

Сохраните ввод из формы в список.

ответ

Смежные вопросы