如何将PHP回显按钮的文本拖入Javascript，其值将用于另一个PHP Sql查询？

问题描述 投票：0回答：2

我有一个返回表的PHP sql查询。

while($row = $result->fetch_assoc()) {
                echo "<tr><td id=\"cst\"><button type=\"submit\" id=\"click\" onClick=sendData(this)>".$row["Name"]</button></td></tr>";

表格输出正确。我的下一步是使用vanilla Javascript从输出表中的按钮（单击按钮时）拉取与$ row [“Name”]关联的HTML文本值。我调用函数onClick = sendData（this）

现在，在Javascript中我试图像这样访问文本值：

function sendData(name) {
    var text = name.innerText;
}

但是，这不起作用。有谁能解释为什么？

javascript php html
2个回答
0
投票

如何在此处使用PHP和JavaScript来解决此问题存在多个问题。让我分解它们，以及我们如何最好地解决它们。

  1. 您的ID是相同的：当您遍历表中的行时，您没有为它们设置唯一的ID。这意味着如果您稍后尝试通过JavaScript以任何身份引用它们，您将无法做到。相反，您可以将其更改为<td id=\"cst_$row['row_id']\".
  2. 您的PHP很容易出现SQL注入：根据我看到您返回值的方式，您用于查询数据库的方法很可能容易出现SQL注入。你最好读一读Prepared Statements和PDO。
  3. 你的onclick周围没有引号：因为你没有用引号包装你的函数，它实际上甚至不能正确发送。但是，无论如何都有更好的解决方案。从按钮中删除单击按钮，然后添加事件侦听器。
  4. 您的按钮类型是提交：因为您已将按钮类型设置为提交，默认行为是刷新页面。如果要保留此选项，则必须指定不使用默认行为，或者只需将按钮类型更改为按钮。

要解决所有这些问题（SQL注入除外，因为这需要比提供的信息更多的信息），您的代码可以更改为以下内容：

PHP：

while($row = $result->fetch_assoc()) {
                echo "<tr><td id=\"cst_$row['row_id']\"><button class=\"test_buttons\"type=\"button\" id=\"btn_$row['row_id']\"".$row["Name"]</button></td></tr>";

在上面的示例中，“row_id”是数据库表中的唯一标识符。将其更改为“id”或您在表格中调用的任何内容。

JavaScript：

window.onload = function() {
  let buttons = document.getElementsByClassName("test_buttons"); // Get all buttons you want to search for
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function(event) { // On click of these buttons
      event.preventDefault(); // This is required only if you want to keep the button type of submit
      let text = this.textContent;
      alert(text);
    });
  }
}
<td><button type="button" class="test_buttons">Test 1</button></td>
<td><button type="button" class="test_buttons">Test 2</button></td>
0
投票

另一个变体是通过利用适合复杂格式的HEREDOC语法来改进HTML输出的格式

while($row = $result->fetch_assoc()) {
    echo <<<HTML
      <tr>
          <td class="cst"> <!-- class instead `id` -->
              <button
                  type="button" <!-- `button` type instead of `submit` -->
                  class="btn-click" <!-- class instead `id` -->
                  data-name="{$row["Name"]}">
                     {$row["Name"]}
              </button>
          </td>
      </tr>
HTML;

使用香草JS可以使smth成为可能。类似于下面的结果摘录。

document.addEventListener('click', function(event) {
  var target = event.target;

  // If the clicked element doesn't have the right selector, bail
  if (!target.matches('.btn-click')) {
    return;
  }

  var name = target.getAttribute('data-name');
  
  alert('Button `data-name` is "' + name + '"');

  // sendData logic goes further ...
}, false);
<tr>
  <td class="cst">
    <button type="submit" class="btn-click" data-name="Coockaracha">Reveal my name</button>
  </td>
</tr>

使用全局click监听器的方法称为事件委托，具有一些优点。你可以读一下here。

另请注意，id在整个页面中应该是唯一的，因此使用id进行迭代是不正确的。 class属性非常适合并允许倍数。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.