使用列表项输入表单

I'm trying to use li items from an ul as the input into a form. Going off of https://www.w3schools.com/howto/howto_js_todolist.asp I created a list and I now want to use that list as input to the form so that I can send it to a .php page to save it to a database.

我想使用格式中包含的信息创建一个csv文件,格式为:

  • 名称
  • 份量
  • 前言
  • 成分表
  • 方法的有序列表。
function newElement(tb, list) {
  var li = document.createElement("li");
  var inputValue = document.getElementById(tb).value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  li.className = 'add_recipe_item';
  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById(list).appendChild(li);
  }
  document.getElementById(tb).value = "";
  var span = document.createElement("SPAN");
  span.innerHTML = '<i class="fas fa-sort-up"></i>'
  span.className = "sort_up";
  myNodelist[i].appendChild(span);

  var span = document.createElement("SPAN");
  span.innerHTML = '<i class="fas fa-sort-down"></i>'
  span.className = "sort_down";
  myNodelist[i].appendChild(span);

  var span = document.createElement("SPAN");
  span.innerHTML = '<i class="fas fa-times"></i>'
  span.className = "close";
  myNodelist[i].appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
  document.getElementById('tb_ingredients').focus();
}

// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByClassName('add_recipe_item');
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  span.innerHTML = '<i class="fas fa-sort-up"></i>'
  span.className = "sort_up";
  myNodelist[i].appendChild(span);

  var span = document.createElement("SPAN");
  span.innerHTML = '<i class="fas fa-sort-down"></i>'
  span.className = "sort_down";
  myNodelist[i].appendChild(span);

  var span = document.createElement("SPAN");
  span.innerHTML = '<i class="fas fa-times"></i>'
  span.className = "close";
  myNodelist[i].appendChild(span);
}

// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

var input_ingredients = document.getElementById("tb_ingredients");
// Execute a function when the user releases a key on the keyboard
input_ingredients.addEventListener("keyup", function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    // Trigger the button element with a click
    newElement('tb_ingredients', 'add_recipe_ingredients_list', 'add_recipe_ingredients_item');
  }
});
var input_method = document.getElementById("tb_method");
// Execute a function when the user releases a key on the keyboard
input_method.addEventListener("keyup", function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    // Trigger the button element with a click
    newElement('tb_method', 'add_recipe_method_list', 'add_recipe_method_item');
  }
});
/*background image - wood*/

body {
  background-image: url("Oak_Texture.jpg");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
  background-size: cover;
}


/*menu planner container*/

.planner {
  margin-bottom: 5%;
  display: grid;
  grid-template-columns: 20% auto 10%;
  grid-template-rows: auto auto;
  border-width: 10px;
  border-style: ridge;
  border-color: #bf842c;
  background-color: #000000;
  color: #ffffff;
  font-family: "Chalkduster";
  letter-spacing: 3px;
}


/*collective day column*/

.planner>.day {
  grid-column: 1 / span 1;
  color: #ffffff;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  border-color: #ffffff;
  border-style: none;
  border-right-style: solid;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-right-width: 1px;
}


/*collective recipe column*/

.planner>.recipe {
  grid-column: 2 / span 1;
  text-align: left;
  padding: 20px 0;
  padding-left: 20px;
  font-size: 30px;
  border-color: #ffffff;
  border-style: solid;
  border-width: 1px;
  border-top-style: none;
}


/*individual recipes by day*/

#monday.recipe {
  grid-row: 1 / span 1;
}

#tuesday.recipe {
  grid-row: 2 / span 1;
}

#wednesday.recipe {
  grid-row: 3 / span 1;
}

#thursday.recipe {
  grid-row: 4 / span 1;
}

#friday.recipe {
  grid-row: 5 / span 1;
}

#saturday.recipe {
  grid-row: 6 / span 1;
}

#sunday.recipe {
  grid-row: 7 / span 1;
  border-bottom-style: none;
}

#sunday.day {
  border-bottom-style: none;
}


/*collective refresh buttons*/

.planner>.refresh {
  grid-column: 3 / span 1;
  text-align: left;
  font-size: 30px;
  border-color: #ffffff;
  border-style: solid;
  border-right-style: none;
  border-width: 1px;
  border-top-style: none;
}


/*refresh buttons by day*/

#monday.refresh {
  grid-row: 1 / span 1;
}

#tuesday.refresh {
  grid-row: 2 / span 1;
}

#wednesday.refresh {
  grid-row: 3 / span 1;
}

#thursday.refresh {
  grid-row: 4 / span 1;
}

#friday.refresh {
  grid-row: 5 / span 1;
}

#saturday.refresh {
  grid-row: 6 / span 1;
}

#sunday.refresh {
  grid-row: 7 / span 1;
  border-bottom-style: none;
}

.bb_button {
  background-color: transparent;
  border: none;
  color: white;
  text-decoration: none;
  outline: none;
  transition: font-size 0.2s;
}


/*actual refresh button*/

.refresh>.bb_button {
  width: 100%;
  height: 100%;
  padding: 15px 32px;
  text-align: center;
  display: block;
  font-size: 30px;
}


/*what to do when the refresh button is moused over*/

.bb_button:hover {
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  cursor: pointer;
}


/*what to do when the refresh button is clicked*/

.bb_button:active {
  font-size: 20px;
}


/*animation for refresh button hover*/

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/*horizontal menu bar*/

.menu_bar {
  top: 0;
  width: auto%;
  padding: 0;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto;
  border-width: 10px;
  border-style: ridge;
  border-color: #bf842c;
  background-image: url("Letter-Board.jpg");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
  background-size: cover;
  list-style-type: none;
  overflow: hidden;
}

.menu {
  float: left;
}

.menu>a {
  display: block;
  padding: 14px 16px;
  width: auto;
  border-style: ridge;
  border-color: transparent;
  color: #ffffff;
  font-family: "Arial Rounded MT Bold";
  font-weight: bold;
  font-size: 25px;
  letter-spacing: 3px;
  text-decoration: none;
  text-align: center;
  text-shadow: 3px 3px black;
}

li a:hover:not(.active) {
  border-style: groove;
  border-color: white;
}

.menu>.active {
  border-color: white;
  colour: black;
  cursor: default;
}


/*add recipe*/


/*container for add recipe gui*/

.form {
  margin-bottom: 5%;
  display: grid;
  grid-template: 'title serving' 'foreword foreword' 'ingredients ingredients' 'method method' 'submit submit';
  grid-gap: 50px;
  border-width: 10px;
  border-style: ridge;
  border-color: #bf842c;
  background-color: #000000;
  color: #ffffff;
  font-family: "Chalkduster";
  letter-spacing: 3px;
}


/*individual elements of gui*/

.form_item {
  font-size: 25px;
}

#add_recipe_title {
  grid-area: title;
  margin: auto;
  margin-top: 20px;
  display: block;
}

#add_recipe_serving {
  grid-area: serving;
  margin: auto;
  margin-top: 20px;
  display: block;
}

#add_recipe_foreword {
  grid-area: foreword;
  margin-left: 10%;
  margin-right: 10%;
  height: 100%;
  display: block;
}

#add_recipe_ingredients {
  grid-area: ingredients;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 30px;
  float: left;
}

#add_recipe_method {
  grid-area: method;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 10%;
  height: 40%;
  float: left;
}

#add_recipe_submit {
  grid-area: submit;
  margin: auto;
  display: block;
  margin-bottom: 20px;
}


/*small text box properties*/

.tb_small {
  display: inherit;
  width: 80%;
  background-color: black;
  border-style: none;
  border-color: white;
  border-bottom-style: dashed;
  outline: none;
  color: white;
  font-size: 20px;
  font-family: inherit;
  padding: 12px;
}

.tb_big {
  display: inherit;
  background-color: black;
  border-style: solid;
  border-color: white;
  border-width: 2px;
  outline: none;
  color: white;
  font-size: 20px;
  font-family: inherit;
  resize: none;
}

#add_recipe_foreword>.tb_big {
  width: 100%;
  height: 100%;
}

#add_recipe_method>.tb_big {
  width: 70%;
  height: 100%;
  display: inline-block;
}

#add_recipe_method>label {
  display: block;
}

#add_recipe_ingredients>.tb_small {
  width: 45%;
  display: inline-block;
}

#add_recipe_ingredients>label {
  display: block;
  margin: auto;
  margin-bottom: 10px;
}


/*actual add button*/

.form_item>.bb_button {
  text-align: left;
  font-size: 25px;
}

#add_recipe_ingredients_list {
  columns: 2;
  display: block;
}

#add_recipe_item {
  display: block;
}

.close {
  text-align: left;
  font-size: 20px;
  color: #292929;
  cursor: pointer;
}

.close:hover {
  font-size: 21px;
  color: white;
}

.sort_up {
  margin-left: 10px;
  text-align: left;
  font-size: 20px;
  color: #292929;
  cursor: pointer;
}

.sort_up:hover {
  font-size: 21px;
  color: white;
}

.sort_down {
  text-align: left;
  font-size: 20px;
  color: #292929;
  cursor: pointer;
}

.sort_down:hover {
  font-size: 21px;
  color: white;
}

#add_recipe_submit>.bb_button {
  font-size: 50px;
}
<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Week Planner.css">
  <script src="https://kit.fontawesome.com/1ab13c3e5f.js" crossorigin="anonymous"></script>
  <title>Add Recipe</title>
</head>

<body>

  <ul class='menu_bar'>
    <li class='menu'><a href="index.php">Week Planner</a></li>
    <li class='menu'><a href="Recipes.html">Recipes</a></li>
    <li class='menu'><a class="active" href="Add Recipe.html">Add Recipe</a></li>
  </ul>
  <form class='add_recipe_form' action='form_processing.php' method='post'>
    <div class='form'>
      <div class='form_item' id='add_recipe_title'>
        <label>Recipe Name:</label>
        <input type="text" class='tb_small' name='name'></input>
      </div>
      <div class='form_item' id='add_recipe_serving'>
        <label>Serving Size:</label>
        <input type="text" class='tb_small' name='serving'></input>
      </div>
      <div class='form_item' id='add_recipe_foreword'>
        <label>Foreword:</label>
        <textarea class='tb_big' name='foreword'></textarea>
      </div>
      <div class='form_item' id='add_recipe_ingredients'>
        <label>Ingredients:</label>
        <input type="text" class='tb_small' id='tb_ingredients'></input>
        <button onclick="newElement('tb_ingredients','add_recipe_ingredients_list')" type="button" class='bb_button'><i class="fas fa-plus"></i></button>
        <ul class=b b_list id='add_recipe_ingredients_list'>
        </ul>
      </div>
      <div class='form_item' id='add_recipe_method'>
        <label>Method:</label>
        <textarea class='tb_big' id='tb_method'></textarea>
        <button onclick="newElement('tb_method','add_recipe_method_list')" type="button" class='bb_button'><i class="fas fa-plus"></i></button>
        <ol id='add_recipe_method_list'>
          </ul>
      </div>
      <div class='form_item' id='add_recipe_submit'>
        <button type="submit" class='bb_button'><i class="far fa-save"></i></button>
      </div>
    </div>

  </form>
</body>

</html>
评论