Хранить другое значение в базе данных из форм, созданных динамически с помощью PHP?

Посмотрите на снимок экрана ниже. введите описание изображения здесь

В соответствии с скриншотом у меня есть данные, полученные в разных блоках на основе базы данных. Например, на основе имени пользователя и пароля эти значения извлекаются из базы данных и отображаются в разных блоках. У меня есть PHP для хранения значения в базе данных, но проблема, с которой я столкнулся, заключается в том, что когда я пытаюсь загрузить его из другого блока, он сохраняет значение из первого блока. Коды, как показано ниже:

<?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++; } ?> 

Я удалил код для загрузки изображения из него, поскольку он работает полностью нормально. Проблема заключается в том, что данные из другого блока не сохраняются в базе данных. только значение для первого блока сохраняется во второй раз. Как решить эту проблему.

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; } ?> 

Related of "Хранить другое значение в базе данных из форм, созданных динамически с помощью PHP?"

Чтобы расширить то, что @Logan Уэйн отметил …

Идентификатор должен быть уникальным на странице. Однако, если существует более одного элемента с указанным идентификатором, метод getElementById () возвращает первый элемент в исходном коде.

Таким образом, в вашем JavaScript, когда вы берете ссылки на ваши элементы данных таблицы, вы всегда будете получать экземпляр FIRST объекта 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-объектов, либо, как упоминалось в @Logan Wayne, использовать свойство класса объектов HTML DOM.

Классы могут использоваться для группировки подобных элементов. После присвоения имен классов различным столбцам в таблице ( Продукт , рекламная цена , обычная цена , стекирование ) вы можете использовать getElementsByClassName (), чтобы получить массив элементов td.

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