Cuando hago clic en el botón "Upisi" funciona bien para el primer registro, pero en todos los demás registros no funcionará.
Ocitanja.php:
<?php
include_once("header.php");
require("spajanje.php");
if(!isset($_POST["ulica"]))
{
header('Location: index.php');
}
else $_SESSION["ulica"] = $_POST["ulica"];
echo "Očitač: " . $_SESSION["ocitac"] . "</br></br>";
echo "<form action='ulica.php'><input type='submit' value='Odabir ulice'></br></br>Odabrana ulica:</br>" . $_POST['ulica'] . "</form>";
echo "</br></br>";
?>
<table>
<?php
$korisnici = mysqli_query($conn, "SELECT * FROM ocitanja WHERE ocitac ='".$_SESSION["ocitac"]."' AND ulica ='".$_POST["ulica"]."'");
while ($row = $korisnici->fetch_assoc()){
echo "<tr><td><b>" . $row['prezime_ime'] . "</b></td></tr>";
echo "<tr><td>Kućni broj: <b>" . $row['kbr'] . "</b></td></tr>";
echo "<form><tr><td>
<label>Broj plinomjera: </label><input type='text' id='bb' size='8' disabled value = '". $row['bb'] ."'></td></tr>";
echo "<tr><td>Zadnje očitanje: " . $row['staro_stanje'] . " m<sup>3</sup></td></tr>";
echo "<tr><td>
<label>Očitanje: </label>
<input id='ocitanje' type='text' size='6' value = '". $row['ocitanje'] ."'> m<sup>3</sup>
<input onclick='myFunction()' type='button' value='Upisi'>
</td></tr></form>";
}
?>
</table>
<?php
include_once("footer.php");
?>
Ajax.js.php:
<?php
$bb2 = $_POST['bb1'];
$ocitanje2 = $_POST['ocitanje1'];
require("spajanje.php");
if (isset($_POST['ocitanje1'])) {
mysqli_query($conn, "UPDATE ocitanja SET ocitanje='$ocitanje2' WHERE bb='$bb2'"); //Insert Query
echo "Uspješno upisano očitanje!";
}
?>
Script.js:
function myFunction() {
var bb = document.getElementById("bb").value;
var ocitanje = document.getElementById("ocitanje").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'bb1=' + bb + '&ocitanje1=' + ocitanje;
if (ocitanje == '') {
alert("Unesi očitanje!");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "ajaxjs.php",
data: dataString,
cache: false,
success: function(html) {
alert(html);
}
});
}
return false;
}
¿Qué estoy haciendo mal? ¿Alguna otra idea de cómo actualizar cada registro por separado en el bucle while? Pero sin actualizar la página. Gracias
2 respuestas
Es difícil saber dónde está exactamente el problema, pero puedo ver dónde pueden surgir algunos problemas.
Primero, las ID son únicas ya que en dos elementos no deben tener las mismas ID. Esa puede ser una razón por la que no funciona correctamente, ya que siempre está utilizando el mismo par de elementos en su llamada AJAX. Así que vamos a convertirlos en clases.
En segundo lugar, aproveche jQuery ya que lo está utilizando. Si está utilizando esta biblioteca, realmente no hay razón para usar el atributo onclick
(o cualquier otro evento). Eliminemos ese atributo en su botón y, en su lugar, asigne una clase, p. upisi
al que haremos referencia en breve.
En tercer lugar, no puede colocar la etiqueta <form/>
entre <tr/>
. Eso es HTML no válido. Como no necesitamos, quítelo. Si desea agrupar elementos <tr/>
, use <tbody/>
elemento.
while ($row = $korisnici->fetch_assoc()){
echo "<tbody>";
echo "<tr><td><b>" . $row['prezime_ime'] . "</b></td></tr>";
echo "<tr><td>Kućni broj: <b>" . $row['kbr'] . "</b></td></tr>";
echo "<tr><td>
<label>Broj plinomjera: </label><input type='text' class='bb' size='8' disabled value = '". $row['bb'] ."'></td></tr>";
echo "<tr><td>Zadnje očitanje: " . $row['staro_stanje'] . " m<sup>3</sup></td></tr>";
echo "<tr><td>
<label>Očitanje: </label>
<input class='ocitanje' type='text' size='6' value='". $row['ocitanje'] ."'> m<sup>3</sup>
<input type='button' value='Upisi' class='upisi'>
</td></tr>";
echo "</tbody>";
}
Ahora, en su JavaScript, adjuntemos un controlador de eventos onclick
a los botones .upisi
.
$('.upisi').click(function () {
// find bb and ocitange relative to the tbody
var tbody = $(this).closest('tbody');
// var bb = tbody.find('.bb').val(), ocitanje = tbody.find('.ocitanje').val();
var bb = $('.bb', tbody).val(), ocitanje = $('.ocitanje', tbody).val();
alert('bb: ' + bb + ', ocitanje: ' + ocitanje);
if (ocitanje == '') {
alert('Unesi očitanje!');
} else {
$.ajax({
type: 'POST',
url: 'ajaxjs.php',
data: { bb1: bb, ocitanje1: ocitanje }, // cleaner
cache: false,
success: function (html) {
// Returns successful data submission message when the entered information is stored in database.
alert(html);
}
});
}
});
Por último, siempre debe verificar si tiene los campos PUBLICADOS antes de usarlos.
<?php
require("spajanje.php");
if (isset($_POST['bb1'], $_POST['ocitanje1'])) {
$bb2 = $_POST['bb1'];
$ocitanje2 = $_POST['ocitanje1'];
if (mysqli_query($conn, "UPDATE ocitanja SET ocitanje='$ocitanje2' WHERE bb='$bb2'")) {
echo "Uspješno upisano očitanje!";
} else {
echo "Something went wrong"; // I have no idea what language you are using, so I'm not even going to try
}
}
?>
Comentario lateral: debe utilizar declaraciones preparadas en su PHP Como está fuera del alcance de su problema, no lo he incluido.
Problema
El problema es simple. En ocitanjia.php, en esta línea:
<label>Broj plinomjera: </label><input type='text' id='bb' size='8' disabled value = '". $row['bb'] ."'></td></tr>";
Cada campo de entrada tiene el mismo id ('bb'), por lo que en script.js, cuando llamas a esta declaración:
var ocitanje = document.getElementById("ocitanje").value;
JQuery devolverá el valor del primer cuadro de texto ya que así es como se comporta jQuery cuando encuentra múltiples elementos con la misma identificación.
Solución Aunque muchas cosas necesitan ser corregidas. El camino más corto es hacer esto: En ocitanjia.php, cambie esto
echo "<tr><td>
<label>Očitanje: </label>
<input id='ocitanje' type='text' size='6' value = '". $row['ocitanje'] ."'> m<sup>3</sup>
<input onclick='myFunction()' type='button' value='Upisi'>
</td></tr></form>";
A esto:
echo "<tr><td>
<label>Očitanje: </label>
<input id='ocitanje' type='text' size='6' value = '". $row['ocitanje'] ."'> m<sup>3</sup>
<input onclick='myFunction(\'". $row['bb'] ."\')' type='button' value='Upisi'>
</td></tr></form>";
Y en script.js cambie esto:
function myFunction() {
var bb = document.getElementById("bb").value;
A esto:
function myFunction(bb) {
Explicación: Pase el valor de bb como parámetro a la función que pasará un valor único de bb cada vez que se llama a la función
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.