javascript - 在数据库中存储与使用 PHP 动态创建的表单不同的值？

Question

请看下面的屏幕截图。

根据屏幕截图，我已将数据提取到基于数据库的不同 block 中。例如，根据用户名和密码，这些值从数据库中获取并显示在不同的 block 中。我有 PHP 将值存储到数据库中，但我面临的问题是当我尝试从其他 block 上传它时，它仍然保存第一个 block 的值。代码如下:

<?php  
include('includes/config.php');
 $upload = 'uploads/';

 session_start();
 $_SESSION['$userid'];

$sql = "SELECT * FROM tbl_store INNER JOIN tbl_job ON tbl_store.store_code = tbl_job.store_code WHERE username = '$userid'";


    $result = mysqli_query($conn,$sql);
    $rowcount=mysqli_num_rows($result);
   // echo "$rowcount";
    $stores = array();
    $stores_add = array();
    $stores_chain = array();
    $job = array();
    $client = array();
    $brand = array(); 
        $week= array();
    $x = 1;
    $imgCnt =1;

        while($row = mysqli_fetch_array($result)){


         echo "工作".'<br/>';
         echo $row['jobs'].'<br/>'.'<br/>'; 
         $job[] = $row['jobs'];

         echo "客戶".'<br/>';
         echo $row['Client'].'<br/>'.'<br/>'; 
         $client[] = $row['Client'];

         echo "牌子".'<br/>';
         echo $row['Brand'].'<br/>'.'<br/>'; 
         $brand[] = $row['jobs'];

         echo "週數".'<br/>';
         echo $row['week'].'<br/>'.'<br/>'; 
         $week[] = $row['week'];

         $target = $upload.'/'.$row['Client'].'/'.$row['Brand'].'/'.$row['jobs'].'/'.$row['store_code'].'/';
          $testpath = $row['Client'].'/'.$row['Brand'].'/'.$row['jobs'].'/'.$row['store_code'].'/';
         $_SESSION['target1'.$x] = $target; 
         if(!file_exists($target))
         {
             mkdir($target,0777,true);
         }
         ?>
    <form id='uploadForm-<?php echo $imgCnt; ?>' action = '' enctype='multipart/form-data' method = 'POST' class="form<?php echo $imgCnt; ?>">
        <input type="file"  class="image<?php echo $imgCnt; ?>" name="img" onChange="readURL(this);" />
        <img id="blah" src="#" alt="your image" /><br/><br/>
        <input type='button' id = '<?php echo $imgCnt; ?>' class='uploadPicture<?php echo $imgCnt; ?> btn btn-primary' value = '上載'>
        <!-- <input type="button" value="上載" class="uploadPicture"  id="upload_btn<?php echo $imgCnt; ?>"/> -->
    </form>
<form enctype="application/x-www-form-urlencoded">
<table width="200" border="1">
  <tr>
    <td>Product</td>
    <td>Promotional Price</td>
    <td>Regular Price</td>
    <td>Stacking</td>
  </tr>
  <tr>
    <td><input type="text" id="product"></td>
    <td><input type="text" id="pp1"></td>
    <td><input type="text" id="rp1"></td>
    <td><input type="text" id="stacking"></td>
  </tr>
</table>
<div id ="div1">
<input type="button"  value="Submit"  onClick="PostData();"/><br/>
</div>
</form>

    <script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function PostData() {




    // 1. Create XHR instance - Start
    var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    else {
        throw new Error("Ajax is not supported by this browser");
    }
    // 1. Create XHR instance - End

    // 2. Define what to do when XHR feed you the response from the server - Start
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status == 200 && xhr.status < 300) {
                document.getElementById('div1').innerHTML = xhr.responseText;
            }
        }
    }
    // 2. Define what to do when XHR feed you the response from the server - Start

    var product = document.getElementById("product").value;
    var pp1 = document.getElementById("pp1").value;
    var rp1 = document.getElementById("rp1").value;
    var stacking = document.getElementById("stacking").value;

    // var image = document.getElementById("image").value;
    // 3. Specify your action, location and Send to the server - Start 


    xhr.open('POST', 'report.php');
    //xhr.open('POST', 'config.php');
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("product=" + product + "&pp1=" + pp1 + "&rp1=" + rp1 + "&stacking=" + stacking);
    //xhr.send("&pid=" + pid);
    // 3. Specify your action, location and Send to the server - End


}

</script>
<?php
echo "-------------------------------------------------------".'<br/>';
        $x = $x+1;
        $imgCnt++;
      }
?>

我已经删除了图片上传的代码，因为它工作得很好。问题是来自另一个 block 的数据没有存储到数据库中。甚至第二次仅存储第一个 block 的值。如何解决这个问题。

PHP 存储数据:

<?php  
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "testing";

$conn = new mysqli($servername, $username, $password, 

$dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "INSERT INTO tbl_report (product,pp1, rp1,stacking) 

VALUES ('$product', '$pp1', '$rp1','$stacking')";

if ($conn->query($sql) === TRUE) {
    echo "Successful";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}
?>

Answer 1

扩展@Logan Wayne 指出的内容......

An ID should be unique within a page. However, if more than one element with the specified ID exists, the getElementById() method returns the first element in the source code.

因此，在您的 JavaScript 中，当您获取对表格数据元素的引用时，无论您提供什么 ID，您总是会获得 Document 对象的第一个实例。

// 2. Define what to do when XHR feed you the response from the server - Start

var product = document.getElementById("product").value; <-- will always return the same element 
var pp1 = document.getElementById("pp1").value; <-- will always return the same element
var rp1 = document.getElementById("rp1").value; <-- will always return the same element 
var stacking = document.getElementById("stacking").value; <-- will always return the same element 

您要么必须为您的 td 对象分配唯一 ID，要么再次像@Logan Wayne 提到的那样，利用 HTML DOM 对象的类属性。

类可以用来对相似的元素进行分组。将类别名称分配给表中的不同列后(产品、促销价、正常价格、堆叠)您可以使用 getElementsByClassName() 获取 td 元素的数组。

...
var products = document.getElementsByClassName("product"); <-- array of product td elements
...