Question

我有这种情况。我已经使用内联编辑（使用jQ）创建了一个表，并且每一行都有其编辑按钮。因此，例如，如果要编辑第一行，请单击“编辑”按钮，这将打开他的输入字段。每个打开的要编辑的行都有其保存按钮，该按钮的ID与该行中该属性的ID相关联。现在，如何使用php获取该输入值？我不得不提到每个输入都具有相同的属性名->它们都是动态创建的。

php

$new_tname = $_POST['edit_team']; ?????????????????????????????????

if (isset($_GET['save_tid'])) {
$tid = $_GET['save_tid'];
$team = Team::getById($tid);

if ($tid == $team->team_id) {


  $team->name = $new_tname;
  $team->save();
}

}

html / php

<?php 
                  $teams = Team::getAll();
                  foreach ($teams as $team) {
                    $tname = $team->name;
                    $tid = $team->team_id;


                    echo "<tr>
                    <td>
                    <a href='#' class='editable' style='margin-left: 2px;'>".$tname."</a><form method='POST' action=''><input type='text' class='editshow form-control col-sm-3' aria-label='Sizing example input' aria-describedby='inputGroup-sizing-sm' name='edit_teams' value='".$tname."'></form><a href='teams.php?save_tid={$tid}' style='margin-left: 2px; margin-top:3px;' class='btn btn-success btn-sm editshow'>Save</a>
                    </td>";

                    echo "<td>
                    <button  class='btn btn-primary btn-sm btnEdit'".$tid."'>Edit</button> | <a href='teams.php?delete_tid={$tid}' class='btn btn-danger btn-sm'>Delete</a>
                    </td>
                    </tr>";
                  }

var_dump($new_tname) throws me a NOTICE: Undefined variable: edit_team

我假设php无法找到哪个edit_team（因为它们是多个），isset（$ _ POST ['edit_team']）对此不适用，因为它使我为NULL，

这是用于内联编辑的jQ

jQ

<script type="text/javascript">
$(".editshow").hide();
  $(".btnEdit").click(function(){
    let btnEdit = $(this),
    containerEl = btnEdit.closest("tr");
    containerEl.find(".editshow").toggle();
  });
</script>

php是否有解决方案？我希望有一个人可以帮助我。谢谢。

Answer 1

所以问题是这样的：当您单击这些链接（保存或删除）时，实际上并没有告诉服务器您要更新的内容。链接本身无法知道发送的字段，字段是否已更新或任何内容。您正在页面上执行动态的操作，在这种情况下，这将意味着编写脚本。

这比您对切换操作所做的操作要复杂一个数量级，因此请注意-您刚刚跳入最深的一端。我已经开始构建一些东西，向您展示如何可以完成，但这绝不是完整的或准确的。通过给我们的快照，我们不知道您的php到底在做什么。

这是我构建的代码块，只是作为原型。我将在下面更详细地描述它：

$(function(){
  let updateTeamUrl = "SET_THIS_TO_THE_UPDATE_URL";

  // We'll also save these as references to all the action buttons.
  let actionItems = {
    editBtn: $(".btnEdit"),
    saveBtn: $(".save-btn"),
    deleteBtn: $(".btnDelete")
  }
  $(".editshow").hide();
  // Here we assign the actions to the various buttons/anchors
  actionItems.editBtn.on("click", toggleEdit);
  actionItems.saveBtn.on("click", saveTeam);
  actionItems.deleteBtn.on("click", confirmDelete)

  // Below are the actions we assign above, or support functions for them

  /**
   * toggleEdit() is triggered when the "Edit" button is clicked. This
   *   hides the team name text element, and displays the editable field.
   **/
  function toggleEdit(event){
    let teamContainer = $(this).closest("tr");
    teamContainer.find(".editshow").toggle();
    teamContainer.find(".editable").toggle();
  }

  /**
   * saveTeam() crawls up the DOM tree to the closest "tr" node, and gets
   *  the custom "data-teamid" attribute there. Using that, we can create
   *  a JSON object that we will send to the backend.
   **/
  function saveTeam(event){
    event.preventDefault();

    let clickedEl = $(this),
        teamContainer = clickedEl.closest("tr"),
        teamNameEl = teamContainer.find(".editshow");
    let payloadToSend = {
      // We need a mechanism to identify what team we're updating
      teamId: teamContainer.data("teamid"),
      // This will eventually hold any and all updates.
      updates: {
        /* We'll create this empty, and fill it as we need.*/
      }
    };

    // I created a data attribute on the input, "data-original", and
    //  set it to the same value as the input. By comparing these, we
    //  can see if an input has, in fact, been updated.
    if(teamNameEl.data("original") !== teamNameEl.val() ){
      /**
       * The only thing we are updating in this pass is the team name.
       *  So we can update our "payload", then simply send the post request.
       **/
      payloadToSend.updates.name = teamNameEl.val();

      /**
       * When we POST, we need a URL and a string we'll send. 
       *  What we'll do is take the payload, and run it through
       *  JSON.stringify() to convert it to a string.
       *  Then, when we call $.post(), we can also add a .done() and
       *  .fail() handler. These will run when the save is complete,
       *  or when it fails.
       * 
       **/
      let postRequest = $.post(UpdateTeamUrl, JSON.stringify(payloadToSend) )
              .done(function(returnedData){
                console.log("Update succeeded: "+returnedData)
              })
              .fail(function(error){
                console.error("Update had an error: "+error)
              })
              .always(function(){
                teamContainer.find(".editshow").toggle();
                teamContainer.find("editable").toggle();
              });
    }
  } // end saveTeam();

  function confirmDelete(event){
    event.preventDefault();
    let clickedEl = $(this),
        teamContainer = clickedEl.closest("tr"),
        teamId = teamContainer.data("teamid"),
        teamName = teamContainer.find("[name='edit_teams']").val();


    if(confirm("are you sure you want to delete the team "+teamId+": "+teamName+"?") ){
      console.log("Deleting!")
    } else {
      console.log("false alarm.")
    }
  }
})

此外，支持此操作的HTML需要做一些改动：<tr>获得数据属性data-teamid，<input>获得数据属性data-original，并且包装了输入的表单元素已被删除。这是HTML（无需PHP即可构建）：

    <tr data-teamid="1">
      <td>
        <a href='#' class='editable' style='margin-left: 2px;'>Team Name</a>: <input type='text' class='editshow form-control col-sm-3' aria-label='Sizing example input' aria-describedby='inputGroup-sizing-sm' name='edit_teams' data-original='Team Name' value='Team Name'> <a href='teams.php?save_tid={$tid}' style='margin-left: 2px; margin-top:3px;' class='btn btn-success btn-sm editshow save-btn'>Save</a>
      </td>
      <td>
        <button  class='btn btn-primary btn-sm btnEdit team-1'>Edit</button> | <a href='#' class='btn btn-danger btn-sm btnDelete'>Delete</a>
      </td>
    </tr>

正如我所说的，这变得非常复杂。

首先，我将您所有的“操作”移到了javascript对象中。如果添加其他操作，则只需在那里进行更新。然后，我对要处理的每个操作使用.on(...)附加侦听器：编辑，保存和删除。对于每一个，我编写了一个函数来处理动作本身：toggleEdit(...)用于编辑，saveTeam(...)用于保存，confirmDelete用于删除。每个动作都是独立的，使编辑变得容易一些。

toggleEdit(...)几乎与您以前的差不多。我认为我在那件事上并没有太大改变，所以看起来应该很熟悉。

saveTeam(...)是您现在要问的那个，它很复杂。首先，我们将DOM树爬回<tr>，然后使用.data("teamid")获取我们正在编辑的团队的ID。然后，我们开始创建一个JavaScript对象，我称之为payloadToSend。在这里，我们有一个属性teamId和一个嵌套对象updates。接下来，我们检查文本输入是否已更新（通过将其值与我添加的data-original属性进行比较）。如果未更改，则无需更新。如果具有，则我们通过向payloadToSend对象中添加name来更新payloadToSend.updates，并使用$.post(...)实际发送POST请求。 $ .post（）需要一个URL和一些数据。我们将发送payloadToSend对象作为该数据，该数据应在PHP中显示为$_REQUEST或$_POST。此外，$.post(...)包括两个条件回调.done(...)和.fail(...)，以及一个“绝对”回调.always(...)

.done(...)在成功完成返回服务器端请求后运行，并且.fail(...)使用错误消息处理后端失败。不过，无论哪种情况，我们.always(...)都想隐藏可编辑内容并再次显示团队名称。

在这一点上，confirmDelete操作除了获得相同的teamId之外没有做任何其他事情，并弹出一个基本的确认对话框。删除操作远不止于此，还超出了原始问题的范围。

Answer 2

您将需要进行一些其他处理和过滤以确保数据的安全性，但是一个简单的解决方案是将字段名称更改为 edit_teams _ {$ tid} ，并在php循环中通过表单字段：

    <?php
        foreach($_POST as $field_name => $field_value){
           if(substr($field_name,"edit_teams") !== false){
              $edit_teams = $field_value;
              $team_id = str_replace("edit_teams_","",$field_name);
           }
    }
?>

从INLINE-EDITING表中具有相同名称的多个输入中获取此值

2 个答案: