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

javascript php jquery mysql ajax
1
mEDO 19 mar. 2017 a las 12:29

2 respuestas

La mejor respuesta

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.

0
Community 13 abr. 2017 a las 12:45

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

1
Ankit Dhanna 19 mar. 2017 a las 15:40

Nuevas preguntas

2 ¿Cómo hacer que Mostrar Div permanezca desagradable en el flujo?
2 ¿Por qué OBJETE.CREATE no clone las propiedades como se esperaba?
3 ¿Cómo agregar estilo para palabras específicas en HTML usando JavaScript?
3 SumProduct Array
2 Ordenar objetos que cumplen umbral
3 TypeScript El argumento del tipo NUNCA [] no está asignable al parámetro del tipo de lejalización del tipo <nunca []>
2 Obteniendo un TypeError: State.posts no es iterable después de lo que parece ser una solicitud de publicación exitosa
4 Actualizar JavaScript anidado objeto uno por uno
2 creando un objeto anidado de las llaves
2 Fusionar objeto juntos
Nuevas preguntas con la etiqueta javascript >

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.

Más sobre javascript...