javascript—当用户提交表单时，如何在表单元格中呈现任务

vbkedwbf 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(327)

<?php
$servername = "localhost";
$username = "u749668864_PandaHost";
$password = "Effy1234";
$dbname = "u749668864_PandaHost";

$q = $_REQUEST["task"];
$task = $q;
echo $task;

$conn->close();
?>

我已经开始研究ajax，我真的很困惑当用户提交此表单时如何呈现任务。我已经创建了一个html表，然后用javascript添加了单元格。当用户单击表单时，我希望他们提交一个任务及其持续时间，然后查看submit按钮下方显示的任务。

<html>
 <body>
  <table id="table"> <!-- table -->
    <th colspan="7" id="month"></th>
  </table>
 </body>
</html>

<script>
      var table = document.getElementById("table");
// check current month
      var month = new Date();
      var Allmonths = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
      for (var i = 0; i < Allmonths.length; i++) {
        if (month.getMonth() == i) {
          document.getElementById("month").innerHTML = Allmonths[i];
        }
      };
// start creating cells
      var row;
      var cell;
      var date = 1;
      var newDate = 1;
      var i;
      var j;
      for (i = 0; i < 5; i++) {
        row = table.insertRow(-1);
        for (j = 0; j < 7; j++) {
          cell = row.insertCell(-1);
          var newI = i;
          var newJ = j;
          if (newI >= 4 && newJ >= 3) {
            cell.className = "grey-cell";
            cell.innerHTML = newDate;
            newDate++;
          }
          else {
            cell.className = "cell";
            cell.innerHTML = date;
            date++;
          }
        };
      };
// on clicking a cell, display a form, and then render the task on submission
      $("td").click(function(event){
          var box = $("<div>").html(
            "<form>" +
            "<label for=task>" +
            "<input type=text id=task name=task placeholder=Task>" +
            "</label>" +
            "<label for=duration>" +
            "<input type=number id=duration name=duration placeholder=Duration>" +
            "</label>" +
            "<button id=add type=submit>Add Task</button>" +
            "</form>" +
            "<p id=task></p>"
          )
        $(this).append(box);
        $("#add").click(function(){
          $("#task").load("tasks.php #task", function(responseTxt){
            $(this).html(responseTxt)
          });
        });
      })

    </script>

php jquery ajax JavaScript Html

来源：https://stackoverflow.com/questions/68511705/how-to-render-a-task-in-a-table-cell-when-a-user-submits-the-form

1条答案

按热度按时间

olhwl3o21#

这里的电线有点交叉了。在具有数字的表格单元格内创建输入表单时，单元格上的单击事件将应用于表单元素。最好将该表单显示在单击事件之外。我把它移到了它自己的分区。要查看表单的结果，您必须 preventDefault() 单击“提交”按钮以防止页面刷新。然后，您可以使用表单中的值附加一个“tasks”div

var table = document.getElementById("table");
// check current month
var month = new Date();
var Allmonths = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
for (var i = 0; i < Allmonths.length; i++) {
  if (month.getMonth() == i) {
    document.getElementById("month").innerHTML = Allmonths[i];
  }
};
// start creating cells
var row;
var cell;
var date = 1;
var newDate = 1;
var i;
var j;
for (i = 0; i < 5; i++) {
  row = table.insertRow(-1);
  for (j = 0; j < 7; j++) {
    cell = row.insertCell(-1);
    var newI = i;
    var newJ = j;
    if (newI >= 4 && newJ >= 3) {
      cell.className = "date-cell grey-cell";
      cell.innerHTML = newDate;
      newDate++;
    } else {
      cell.className = "date-cell cell";
      cell.innerHTML = date;
      date++;
    }
  };
};
// on clicking a cell, display a form, and then render the task on submission
$("td.date-cell").click(function(event) {
  $("#create-task").html(
    "<form>" +
    "<label for=task>" +
    "<input type=text id=task name=task placeholder=Task>" +
    "</label>" +
    "<label for=duration>" +
    "<input type=number id=duration name=duration placeholder=Duration>" +
    "</label>" +
    "<button id=add type=submit>Add Task</button>" +
    "</form>" +
    "<p id=task></p>"
  )
  $("#add").click(function(e) {
    // prevent the page reload
    e.preventDefault();
    // get data 
    let duration = $('#duration').val()
    let task = $('#task').val()
    $('#tasks').append(`<li>Task: ${task}, duration: ${duration}</li>`)
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <!-- table -->
  <th colspan="7" id="month"></th>
</table>
<div id='create-task'></div>
<ul id='tasks'></ul>

赞(0）回复(0）举报 2021-09-13

我来回答

javascript—当用户提交表单时，如何在表单元格中呈现任务

1条答案

相关问题

热门标签

最新问答