无法将值传递给 Javascript 模态（非引导程序）

Question

我在尝试将值传递给非引导模式时遇到问题。 我当前的 php 循环的编写方式，我了解我只能使用我的模式来编辑我的 SQL 表中的最后一行。但是，当我的模态 div 在循环内时，我只能更改 SQL 表的第一行。如何修改我的脚本以接受来自加载我的模式的按钮的值？

PHP：

<?php
while ($row=mysqli_fetch_array($select)) 
{
$idtemp=$row['id'];
<button id="edit_form<?php echo $idtemp;?>"  data-target="#id02" data-id="<?php echo $idtemp;?>"  onclick="document.getElementById('id02').style.display='block'">Edit</button>
 <?php
}
?>

HTML：

 <div id="id02" class="modal">
  <span onclick="document.getElementById('id02').style.display='none'" 
class="close" title="Close Modal">&times;</span>
  <!-- Modal Content -->
  <form class="modal-content animate" id="editForm" action="modify_records.php" method="post">

    <div class="container">
       <h3>Edit an Existing Project</h3>

          <label for="Project_Name" class="ui-hidden-accessible">Project Name:</label>
          <input type="text" name="Project_Name" id="Project_Name_Edit" placeholder="Project Name">
          <br><br>
          <label for="Partners" class="ui-hidden-accessible">Partners:</label>
          <?php
          echo $partnersmenu;
          ?>
         <br><br>
          <label for="blank" class="ui-hidden-accessible">. </label>
             <br><br>

          <br><br>
  <input type="button" id="edit_button" class="edit_button" value="Submit"  onclick="edit_row(<?php echo $idtemp;?>);">
          <button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button>
    </div> 
    <div class="container" style="background-color:#f1f1f1">
    </div>
  </form>
</div>

Javascript：

function edit_row(id){
initialize variables
send ajax data to modify_records.php
...
}

Answer 1

编辑：隐藏字段的解决方案：

首先给循环中的按钮一个类

<?php
while ($row=mysqli_fetch_array($select)) 
{
$idtemp=$row['id'];
<button class="openModal" id="edit_form<?php echo $idtemp;?>"  data-target="#id02" data-id="<?php echo $idtemp;?>"  onclick="document.getElementById('id02').style.display='block'">Edit</button>
 <?php
}
?>

比在你的模态中放置一个隐藏字段

<div id="id02" class="modal">
  <span onclick="document.getElementById('id02').style.display='none'" 
class="close" title="Close Modal">&times;</span>
  <!-- Modal Content -->
  <form class="modal-content animate" id="editForm" action="modify_records.php" method="post">

    <div class="container">
       <h3>Edit an Existing Project</h3>

          <label for="Project_Name" class="ui-hidden-accessible">Project Name:</label>
          <input type="text" name="Project_Name" id="Project_Name_Edit" placeholder="Project Name">
          <br><br>
          <label for="Partners" class="ui-hidden-accessible">Partners:</label>
          <?php
          echo $partnersmenu;
          ?>
         <br><br>
          <label for="blank" class="ui-hidden-accessible">. </label>
             <br><br>

          <br><br>
  <input type="button" id="edit_button" class="edit_button" value="Submit"  onclick="edit_row(<?php echo $idtemp;?>);">
  <input type="hidden" id="hidden_temp_id">
          <button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button>
    </div> 
    <div class="container" style="background-color:#f1f1f1">
    </div>
  </form>
</div>

比在你的 js 文件中为你的按钮创建事件监听器

var openModalButtons = document.getElementsByClassName("openModal");
for (var i = 0; i < openModalButtons.length; i++) {
    openModalButtons[i].addEventListener('click', myFunction, false);
}

var myFunction = function() {
    var idtemp = this.getAttribute("data-id");
    document.getElementById('hidden_temp_id').value = idtemp;
};