En mi página php tengo una fila de botones, cada uno de los cuales tiene algunos valores (5 en este ejemplo). Estos valores se enviarán a un script ajax que realiza algunos cálculos de los valores y devuelve el resultado para cada botón sin recargar la página de inicio. En este ejemplo el resultado será
FRANCO=5 (botón 1)
FRANK=franco (botón 2)
FRANCO=48 (botón 3)
FRANK=Bo (botón 4)
FRANK=prueba (botón 5)
Cuando presiono el primer botón, debería ver el resultado 1 en el botón. Cuando presiono el siguiente botón, debería ver el resultado 2 en el botón.
Solo tengo un resultado devuelto en el botón 1 ya que todos los botones tienen el mismo contenedor para el valor de retorno. Necesito más contenedores para valores devueltos y podría agregar $i al contenedor: . Esto me dará diferentes contenedores para devolver el resultado. Pero, ¿cómo puedo usar $i en javascript. Mi problema también es que var x en el javascript siempre será el valor del primer botón. De nuevo, podría agregar $i a id="x": id="x'.$i.'" pero aún así solo tengo document.getElementById("x").value para leer el valor x en javascript.
Espero que alguien me ayude a terminar el código aquí.
Pagina principal:
include('hide-ajax-scripts.php'); $dblinjer=Array(); $dblinjer[0]['loebid']=5; $dblinjer[1]['loebid']='frank'; $dblinjer[2]['loebid']=48; $dblinjer[3]['loebid']='Bo'; $dblinjer[4]['loebid']='test'; $i=0; while($i<5){ $dblinjer[$i]['nrlink']='<div><button type="button" id="x" value="'.$dblinjer[$i]['loebid'].'" onclick=baadimaal("baadimaal")><span id="container"></span></button></div>'; echo $dblinjer[$i]['nrlink']; $i++; }hide-ajax-scripts.php contiene:
<script type="text/javascript"> function baadimaal(str) { var x = document.getElementById("x").value; //henter værdi fra input felt med id = x // document.getElementById("para").innerHTML = x; //viser variablen para på pladsholder const xhttp = new XMLHttpRequest(); xhttp.onload = function() { document.getElementById("container").innerHTML = this.responseText; //her placeres svaret, som kommer tilbage fra hide-ajax-svar filen } xhttp.open("GET", "hide-ajax-svar.php?funk=" + str + "¶=" + x); //overfør str og x til hide-ajax-svar filen xhttp.send(); } </script>hide-ajax-svar.php contiene el cálculo. Aquí vendrán muchos más cálculos y almacenamiento de valores en la base de datos.
<?php if($funk=='baadimaal'){ echo 'FRANK='.$para; } ?>Puede pasar this dentro de su llamada de función donde this refiere al botón actual en el que se hace clic. Además, no puede usar las mismas ids para varios elementos en lugar de usar el selector class . Entonces, cambie su código php como se muestra a continuación:
$dblinjer[$i]['nrlink']='<div><button type="button" value="'.$dblinjer[$i]['loebid'].'" onclick=baadimaal("baadimaal",this)><span class="container"></span></button></div>'; Luego, agregue this como parámetro dentro de su función y luego use el.value para obtener el valor del botón en el que se hizo clic y el.querySelector(".container").innerHTML para agregar el resultado dentro de la etiqueta span donde se hizo clic en el botón. Entonces, cambie su código js como a continuación:
function baadimaal(str,el) { var x = el.value; //henter værdi fra input felt med id = x const xhttp = new XMLHttpRequest(); xhttp.onload = function() { el.querySelector(".container").innerHTML = this.responseText; } xhttp.open("GET", "hide-ajax-svar.php?funk=" + str + "¶=" + x); xhttp.send(); }