Question

我需要一些帮助，我在w3schools上研究了它，但没有遇到类似的东西。表单需要有两个输入，日期和项目。连续10个日期，10个项目。日期可以是下拉列表，也可以是textarea中的项目。一旦用户选择了日期并写下购买的商品，他的选择就需要写在表单下面。棘手的部分是购买需要以特定的顺序显示，第一个日期第一个项目，最后一个日期最后一个项目然后第二个日期和第二个到最后一个项目，依此类推。在此之下，需要有一个计数器，用户可以使用多少字符来输入项目。

Answer 1

这是我到目前为止所拥有的。实际上，我只能从第一列返回值。

<!DOCTYPE html>
<html>
  <head lang="en">
  <meta charset="UTF-8">
  <script language="JavaScript">
    function showInput() {
        document.getElementById('display').innerHTML = 
                    document.getElementById("user_input", "user_input2").value;
    
    }
  </script>

  </head>
<body>

  <form>
    <label>Date:</label> 
    <input type="text" name="message" id="user_input">
    <label>Item:</label> 
    <input type="text" name="message" id="user_input2">
  </form>
  <input type="submit" onclick="showInput();"><br/>

  <label>The user has purchased: </label>
  <p><span id='display'></span></p>
</body>
</html>

Answer 2

我同时得到了解决方案，万一有人需要：

    <script type="text/JavaScript">

        var polje = [];
        var ispis = "";


        function addItem(){
            var date = document.getElementById("date").value;
            var item = document.getElementById("item").value;
            var score = { 'datum': date, 'item': item };
            field.push(score);
            console.log(score);
            printItem();
        }

        function printItem() {
          display_message.innerHTML = "";
          var outputText = "";

          sort();


          for (var i = 0; i < field.length; i++) {
            outputText = outputText + field[i].datum + ", " + field[i].item + "<br/>";
            console.log(field[i]);
            console.log(outputText);
          }

          display_message.innerHTML = outputText;
        }

        function sort() {
          field.sort(function(a,b) {
            return new Date(a.datum) - new Date(b.datum);
          });
        }
    </script>
</head>
<body>
Date: <input type="date" id = "date">
Item: <input type="text" id = "item">
<input type="submit" onclick="addItem()" value="Submit" />
<p> Result: <br>
  <span id = "display_message"></span> </p>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
i = 0;
$(document).ready(function(){
    $("input").keypress(function(){
        $("span").text(i += 1);
    });
});
</script>
</head>
<body>

<p>Keypresses: <span>0</span></p>
</body>
</html>
    </div>
  </div>
</div>

从序列中的表单中提取数据

2 个答案: