Conservez une valeur différente dans la base de données à partir des formes créées dynamiquement à l'aide de PHP?

Jetez un oeil à la capture d'écran ci-dessous. Entrez la description de l'image ici

Selon la capture d'écran, j'ai les données récupérées dans les différents blocs en fonction de la base de données. Par exemple, en fonction du nom d'utilisateur et du mot de passe, ces valeurs sont extraites de la base de données et affichées dans différents blocs. J'ai le PHP pour stocker la valeur dans la base de données, mais le problème auquel je suis confronté est que lorsque j'essaie de le télécharger à partir d'un autre bloc, il enregistre toujours la valeur du premier bloc. Codes comme suit:

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

J'ai supprimé le code pour le téléchargement d'image car il fonctionne parfaitement. Le problème est que les données de l'autre bloc ne sont pas stockées dans la base de données. Seule la valeur du premier bloc est mémorisée deux fois même. Comment résoudre ce problème.

PHP pour stocker des données:

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

Développer ce que le @Logan Wayne a souligné …

Une ID devrait être unique dans une page. Cependant, si plus d'un élément avec l'ID spécifié existe, la méthode getElementById () renvoie le premier élément dans le code source.

Ainsi, dans votre JavaScript, lorsque vous prenez des références à vos éléments de données de table, vous recevrez toujours l'instance FIRST d'un objet Document avec n'importe quel identifiant que vous fournissez.

 // 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 

Vous devrez attribuer des identifiants uniques à vos objets td, ou encore, comme l'a mentionné @Logan Wayne, utiliser la propriété de classe des objets HTML DOM.

Les classes peuvent être utilisées pour regrouper des éléments similaires. Après avoir attribué les noms de classe aux différentes colonnes de votre table ( Produit , Prix ​​promotionnel, Prix régulier , Empilage ), vous pouvez utiliser getElementsByClassName () pour obtenir un tableau des éléments td.

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